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 關注
- 2006 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消