<!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，但下面加粗的动画名称要保持一致
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>
<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 规定以慢速开始和结束的过渡效果
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
317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
