<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style>
.abc{}
.hou {
width: 200px;
height:200px;
margin: 100px auto;
background-color:#F9F;
border-radius:200px;
-webkit-animation:scaleout 6.0s infinite ease-in-out;
animation: scaleout 6.0s infinite ease-in-out;
}
@-webkit-keyframes scaleout {
0% { -webkit-transform: scale(0,0) ;opacity: 0;}
50% {
-webkit-transform: scale(1,1);
opacity:1;
}
100% {
-webkit-transform: scale(0,0);
opacity: 0;
}
}
@keyframes scaleout {
0% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50%{
-webkit-transform: scale(1,1);
transform: scale(1,1);
opacity:1;
}
100% {
transform: scale(0,0);
-webkit-transform: scale(0,0);
opacity:0;
}
}
</style>
</head>
<body>
<div class="hou"></div>
</body>
</html>
css3动画效果--过渡效果
原创
©著作权归作者所有:来自51CTO博客作者maobinhou的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:css3动画效果--过渡效果
下一篇:我的友情链接
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的css - 打字机动画效果
使用 css 实现好玩的单行打字机效果,和我一起看看吧。
动效设计 交互设计 ux/ui 打字机动画 -
CSS打字效果
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>wgchen</title>
css 前端 css3 html .net -
canvas打字效果
文章目录基础版 单行输入进阶版多行输出 超出换行使用canvas绘制基础版 单行输入以下是整个html文件可复制
html5 javascript html canvas 2d -
Angular 锚点效果 animate
Angular 锚点效果实现 animate H5跳转
锚点 angular HTML 像素点 -
使用typeIt实现打字效果
我们可以通过typeIt插
JavaScript 调用函数 加载 .net -
打字效果代码
nt.writeln("if (document.all){");
javascript 提高工作效率