圆圈转动特效

最新推荐文章于 2021-06-03 10:29:40 发布

琉-璃

最新推荐文章于 2021-06-03 10:29:40 发布

阅读量409

点赞数

本文链接：https://blog.csdn.net/weixin_42486438/article/details/97755676

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圆圈转动特效</title>
</head>

<body>

<ul class="liuc container animated fadeInUp" data-animation="fadeInUp">
<li><img src="img/liuc01.png">洽谈沟通双方洽谈沟通确认初步合作意向</li>
<li><img src="img/liuc02.png">制定方案提报策划方案细节，签订合同</li>
<li><img src="img/liuc03.png">项目执行严格执行策划方案</li>
<li><img src="img/liuc04.png">项目支付 项目测试完成交付使用</li>
<li><img src="img/liuc05.png">技术支持一年免费技术支持</li>
</ul>
<style>
 @charset "utf-8";
*{margin: 0;padding: 0;border: 0;outline: none;
box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
-ms-box-sizing: border-box; -moz-box-sizing: border-box;}
html {width: 100%; font-weight: normal;
 -webkit-text-size-adjust:none; -ms-text-size-adjust: 100%;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;}
body{font-size: 14px;line-height: 1.6;background-color:#fff;
font-family: 'PingFangSC-Regular,Microsoft YaHei'; min-width: 1200px;}
ul,ul li,ol,li {list-style: none outside none;}
h1,h2,h3,h4,h5,h6,i{font-weight: normal; font-style: normal;}
img {vertical-align: middle;border: none;}
input,select,option,label,th{vertical-align: middle;border: none}
a {text-decoration: none;color: inherit;}
a:hover {text-decoration: none; }
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {zoom: 1;display: block;_height: 1px;clear: both;}
.fl {float: left;}
.fr {float: right;}
.container{display: block;width:86%; max-width: 1600px; min-width: 1150px;
margin: 0 auto; }

/***liuc*********************************************************************************/
.liuc{/*width: 100%;*/margin-bottom:4%; display: table;margin-top: 30px;}
.liuc li{width: 20%; text-align: center; float: left;}
.liuc li i{display: inline-block; padding: 8%; border-radius: 50%;background: #0166ce;
margin-bottom: 2%;position:relative; }
.liuc li b{color: #212121; display: block; font-size: 22px;}
.liuc li p{color: #5f5f5f; font-size: 15px}
.liuc li i:after{position:absolute;width:100%;height:100%;border-radius:50%;content:'';
top:0;left:0;z-index:-1;}
.liuc li:hover i{-webkit-transform:scale(.86);-moz-transform:scale(.86);-ms-transform:scale(.86);
   transform:scale(.86); -o-transform:scale(.86);}
.liuc li:hover i:after{   animation:sonarEffect 1.3s ease-out 75ms;
   -webkit-animation:sonarEffect 1.3s ease-out 75ms;
   -moz-animation:sonarEffect 1.3s ease-out 75ms;}
.liuc li i{transition:all .5s ease-in-out; -webkit-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out;}

/*liuc 悬浮*/
@keyframes sonarEffect{
0%{opacity:.3;}
40%{opacity:.5;box-shadow:0 0 0 2px rgba(255,255,255,.1),0 0 5px 5px #0166ce,0 0 0 5px rgba(255,255,255,.5)}
100%{box-shadow:0 0 0 2px rgba(255,255,255,.1),0 0 5px 5px #0166ce,0 0 0 5px rgba(255,255,255,.5);
 -webkit-transform:scale(1.25);opacity:0;}
}
@-webkit-keyframes sonarEffect{
0%{opacity:.3}
40%{opacity:.5;box-shadow:0 0 0 2px rgba(255,255,255,.1),0 0 5px 5px #0166ce,0 0 0 5px rgba(255,255,255,.5)}
100%{box-shadow:0 0 0 2px rgba(255,255,255,.1),0 0 5px 5px #0166ce,0 0 0 5px rgba(255,255,255,.5);
 -webkit-transform:scale(1.25);opacity:0}
}
@-moz-keyframes sonarEffect{
0%{opacity:.3}
40%{opacity:.5;box-shadow:0 0 0 2px rgba(255,255,255,.1),0 0 5px 5px #0166ce,0 0 0 5px rgba(255,255,255,.5)}
100%{box-shadow:0 0 0 2px rgba(255,255,255,.1),0 0 5px 5px #0166ce,0 0 0 5px rgba(255,255,255,.5);
 -webkit-transform:scale(1.25);opacity:0}
}
</style>
</body>
</html>

琉-璃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圆圈转动特效

<!doctype html><html><head><meta charset="utf-8"><title>圆圈转动特效</title></head><body><ul class="liuc container animated ...
复制链接

扫一扫