小动画：一个圆循环变大再透明

来源：互联网发布：上传歌曲到网络qq音乐编辑：程序博客网时间：2024/05/01 13:42

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>top</title>
<style>
.div1{ width:40px; height:40px; border-radius:100%; background: red; margin: 100px auto;
animation: xsl 1s infinite ease-in-out; // infinite:循环 xsl:随意名称等于name，但下面加粗的动画名称要保持一致

} // ease 规定慢速开始，然后变快，然后慢速结束的过渡效果; ease-in 规定以慢速开始的过渡效果; ease-out 规定以慢速结束的过渡效果; ease-in-out 规定以慢速开始和结束的过渡效果

@-moz-keyframes xsl{ // 火狐浏览器谷歌换成@-webkit-keyframes
from{ transform: scale(0.0);}
to{ transform: scale(1.0); opacity:0;}
}
@keyframes xsl{
from{ transform: scale(0.0);}
to{ transform: scale(1.0); opacity:0;}
}
</style>
</head>
<body>
<div class="div1"></div>
</body>

</html>

注意：动画时，浏览器的兼容问题

-webkit- 谷歌 Safari

-mox- 火狐

-o- Opera

阅读全文

0 0