每日计划 - html+css作品 : CSS3动画实现钟摆效果
2020-12-13 02:31
标签：style blog class code java color 安拉， 创建动画：@keyframes name {} 绑定动画：animation name property 比如示例就是将一个名为 around 的动画绑定到一个ID为 container 的容器上。 然后呢，这个动画的属性是：用八秒时间 不停歇的（永久运行forever） 以 “低速-加快-变慢”的周期曲线
执行 每日计划 - html+css作品 : CSS3动画实现钟摆效果,搜素材,soscw.com 每日计划 - html+css作品 : CSS3动画实现钟摆效果 标签：style blog class code java color 原文地址：http://www.cnblogs.com/hualongbei/p/3718575.html
#container{ transition:all 3s; margin:-20px auto; width:1px; height: 500px;
animation: around 8s infinite ease;}
#line{width: 1px; height: 360px; background-color: #BBB; margin: auto;}
#ball{width: 60px; margin-left:-30px; height:60px; background-color:#D2691E ; border-radius:15px;}
@keyframes around{
0% {transform: rotate(38deg ); transform-origin: top;}
50% {transform: rotate(-38deg); transform-origin: top}
100%{transform: rotate(38deg); transform-origin: top}
}
div id="container">
div id="line">div>
div id="ball">div>
div>
上一篇：thinkphp框架
文章标题：每日计划 - html+css作品 : CSS3动画实现钟摆效果
文章链接：http://soscw.com/essay/25764.html