CSS3圓圈動畫放大縮小循環動畫效果
阿新 • • 發佈：2017-05-04
frame cti margin meta doc order fun 縮小 htm
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3圓圈動畫放大縮小循環動畫效果</title>
<style>
.dot {
margin:150px auto;
width:200px;
height:200px;
background-color:#E3E3E3;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
-webkit-animation-name:‘ripple‘;/*動畫屬性名，也就是我們前面keyframes定義的動畫名*/
-webkit-animation-duration: 2s;/*動畫持續時間*/
-webkit-animation-timing-function: ease; /*動畫頻率，和transition-timing-function是一樣的*/
-webkit-animation-delay: 0s;/*動畫延遲時間*/
-webkit-animation-iteration-count: infinite;/*定義循環資料，infinite為無限次*/
-webkit-animation-direction: alternate;/*定義動畫方式*/
}
@keyframes ripple {
0% {
opacity:0.35;
width:190px;
height:190px;
}
100% {
opacity: 0.2;
width:250px;
height:250px;
}
}
</style>
</head>
<body>
<div class="dot"></div>
</body>
</html>
CSS3圓圈動畫放大縮小循環動畫效果