标题css3动画效果(animation)水波纹
先看效果把
图片
自己右键下载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水波纹(animation)</title>
<style>
.commit{
width:111px;
height:114px;
animation-name: dsp;
animation-duration: 2.5s;
animation-timing-function: linear;
animation-iteration-count:infinite;
}
@keyframes dsp {
0% {
opacity:0;
transform: scale(0.2);
}
50% {
opacity:1;
transform: scale(0.6);
}
100% {
opacity:0;
transform: scale(1);
}
}
</style>
</head>
<body>
<img src="./img/fire_red.png" alt="水波纹" class="commit">
</body>
</html>
相关属性api 自己查阅一下把;