关于云栖大会首页的几个效果问题
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;}
}
有没有朋友给在下指点一二哒 _(:з」∠)_
什么名字都被占用浏览 1951回答 2
2回答
-
过去了过去
第二个问题，我直接拷贝阿里云的代码，你可以看一下，这个不难，就是一个过度动画和圆圈的时间间隔问题。<!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>
随时随地看视频慕课网APP
Html/CSS
JQuery