纯CSS3如何制作的鼠标悬停时边框旋转
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍纯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%;
}
.container {
width: 100%;
height: 100%;
background: #0f0;
text-align: center;
}
.content {
display: inline-block;
margin-top: 5rem;
width: 20rem;
height: 20rem;
border: solid 15px rgba(255, 255, 255, 1);
border-radius: 50%;
box-sizing: border-box;
transition: all 2s;
}
.content:before {
display: inline-block;
width: 100%;
height: 100%;
border-radius: 50%;
box-sizing: border-box;
content: '';
}
.content:hover {
}
.content:hover:before {
border: dashed 30px #fff;
animation: whirl 9s linear infinite;
}
.con-text {
margin: -60% auto;
width: 80%;
font-size: 3rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
@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如何制作的鼠标悬停时边框旋转”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
