未加星标

纯CSS3制作的鼠标悬停时边框旋转

字体大小 | |
[前端(html5) 所属分类 前端(html5) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

下面以2017年新年祝福语为例给大家展示下效果。

纯CSS3实现的鼠标悬停时边框旋转的效果:

纯CSS3制作的鼠标悬停时边框旋转

 

实现代码如下,代码中注释已经比较详细,就不再多说了:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {width: 40rem;height: 30rem;font-size: 62.50%; /* 把body的字体设置为10px以方便使用rem时的计算 */
}
.container {width: 100%;height: 100%;background: #0f0;text-align: center;
}
/* 设置content元素的属性 */
/* 此元素的宽和高必须相等,即设置border-radius: 50%;后应该是一个圆 */
/* 使用rem相对于body的字体尺寸设置了宽和高 */
.content {display: inline-block;margin-top: 5rem;width: 20rem;height: 20rem;border: solid 15px rgba(255, 255, 255, 1); /* 此处设置边框,使用rgba的方式是为了后面隐藏时方便,只需要设置a的值为0即可隐藏 */border-radius: 50%;box-sizing: border-box; /* 使用此属性防止边框撑开盒子,border-box会让边框占用盒子里面的空间 */transition: all 2s; /* 该元素的所有属性的变化会在2s内完成 */
}
/* 使用伪类before设置需要转动的边框 */
/* 因为如果元素边框转动,内容也会跟着转动 */
/* 此处要的效果是只有边框转动而内容不转动 */
.content:before {display: inline-block;width: 100%;height: 100%;border-radius: 50%;box-sizing: border-box;content: '';
}
/* 设置鼠标悬停在content元素上时content属性的变化 */
.content:hover {/*border: solid 15px rgba(255, 255, 255, 0);*/
}
/* 设置鼠标悬停在content上时content的before伪类属性的变化 */
.content:hover:before {border: dashed 30px #fff;animation: whirl 9s linear infinite; /* 执行动画whirl,执行一次的周期是9s,执行期间的速度曲线为linear,无限循环 */
}
/* 设置文本内容显示的样式 */
.con-text {margin: -60% auto;width: 80%;font-size: 3rem;/* 以下三个属性为了让文字超出宽度时显示省略号,必须同时使用才有效果 */overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
/* 动画whirl,从0度旋转到360度 */
@keyframes whirl {from { transform: rotate(0deg);}to { transform: rotate(360deg);}
}
</style>
</head>
<body>
<section class="container">
<div class="content" title="新年好新年好新年好"><p class="con-text">新年好新年好新年好</p>
</div>
</section>
</body>
</html>

以上所述是小编给大家介绍的纯CSS3制作的鼠标悬停时边框旋转,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

主题: CSS3CSS360UT谢大
分页:12
转载请注明
本文标题:纯CSS3制作的鼠标悬停时边框旋转
本站链接:http://www.codesec.net/view/520946.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(html5) | 评论(0) | 阅读(112)