鼠标放上边框变虚转圈效果的案例
<!doctype html><html><head><meta charset="utf-8"><title>鼠标放上边框变虚转圈效果</title><script src="http://libs.baidu.com/jquery/1.11.3/jque...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标放上边框变虚转圈效果</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
body {
width:400px;
height:400px;
margin:50px auto;
}
.box {
width:100%;
height:100%;
background:#ca1fd9;
text-align:center;
}
.box-1 {
display:inline-block;
width:320px;
height:320px;
margin-top:38px;
border:15px solid rgba(255,255,255,1);
border-radius:50%;
box-sizing:border-box;
transform:all 2s;
}
.box-1:before {
display:inline-block;
width:100%;
height:100%;
border-radius:50%;
box-sizing:border-box;
content:"";
}
.box-1:hover {
border:15px solid rgba(255,255,255,0);
}
.box-1:hover:before {
border:dashed 30px #fff;
animation:zz 9s linear infinite;
}
p {
margin:-60% auto;
width:80%;
font-size:50px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
color:aliceblue;
}
@keyframes zz {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}</style>
</head>
<body>
<div class="box">
<div class="box-1">
<p>转圈效果</p>
</div>
</div>
</body>
</html>
- 发表于 2020-06-27 12:22
- 阅读 ( 552 )
- 分类：web前端开发
