https://www.aliyun.com/?utm_content=se_1006857 1.我是用css3来写的，但是效果总是差一点，有没有什么更好的写法。css3：.sixbox ul li a:hover .six-icon.icon-p2{ -webkit-animation: run 1s steps(59, end) 1s ;animation: run 1s steps(59, end) 1s;transition-timing-function:linear;}jq尝试版：$("#listblock").mouseenter(function(){ $(this).find(".icon-p1").attr({'background-position':"0 -4422px"})});这个就更夸张了 数据在变化，图标是不动的。这个效果我也是利用css3写的，还是觉得效果不行@keyframes r10{0% {-webkit-transform: scale(0.0);opacity: 0;}5% {-webkit-transform: scale(0.3);opacity: 0.5;}15% {-webkit-transform: scale(0.5);opacity: 0.8;}35%{-webkit-transform: scale(0.7);opacity: 0.0;}}有没有朋友给在下指点一二哒 _(:з」∠)_
2 回答
过去了过去
TA贡献7条经验 获得超1个赞
第二个问题，我直接拷贝阿里云的代码，你可以看一下，这个不难，就是一个过度动画和圆圈的时间间隔问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
*{padding: 0; margin: 0;}
.point-area {
text-align: center;
position: relative;
width: 150px;
height: 150px;
margin: 0 auto;
transition: opacity .5s ease-out;
}
.point-area .point-dot {
z-index: 1;
background-color: #6ad7e9;
border: 1px solid rgba(0,205,236,.37);
}
.point-area .point {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 10px;
height: 10px;
margin: auto;
-webkit-border-radius: 50%;
-webkit-background-clip: padding-box;
-moz-border-radius: 50%;
-moz-background-clip: padding;
border-radius: 50%;
background-clip: padding-box;
}
.point-area .point-10 {
width: 100%;
height: 100%
}
.point-area .point-10:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
border: 2px solid #00cdec;
opacity: 0;
-webkit-animation: ripple 4.5s ease-out 225ms infinite;
animation: ripple 4.5s ease-out 225ms infinite
}
.point-area .point-20 {
width: 100%;
height: 100%
}
.point-area .point-20:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
border: 2px solid #00cdec;
opacity: 0;
-webkit-animation: ripple 4.5s ease-out .45s infinite;
animation: ripple 4.5s ease-out .45s infinite
}
.point-area .point-30 {
width: 100%;
height: 100%
}
.point-area .point-30:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
border: 2px solid #00cdec;
opacity: 0;
-webkit-animation: ripple 4.5s ease-out 675ms infinite;
animation: ripple 4.5s ease-out 675ms infinite
}
.point-area .point-40 {
width: 100%;
height: 100%
}
.point-area .point-40:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
border: 2px solid #00cdec;
opacity: 0;
-webkit-animation: ripple 4.5s ease-out .9s infinite;
animation: ripple 4.5s ease-out .9s infinite
}
.point-area .point-50 {
width: 100%;
height: 100%
}
.point-area .point-50:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
border: 2px solid #00cdec;
opacity: 0;
-webkit-animation: ripple 4.5s ease-out 1125ms infinite;
animation: ripple 4.5s ease-out 1125ms infinite
}
@keyframes ripple {
0% {
opacity: 0;
-webkit-transform: scale(.1);
transform: scale(.1)
}
5% {
opacity: 1
}
to {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1)
}
}
</style>
<div class="point-area" >
<a class="point point-dot" ></a>
<div class="point point-10"></div>
<div class="point point-30"></div>
<div class="point point-50"></div>
</div>
</body>
</html>
- 2 回答
- 0 关注
- 1950 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消