每日计划 - html+css作品 : CSS3动画实现钟摆效果

浏览数：687 / 时间：2015年06月09日 
#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>

安拉，

创建动画：@keyframes name {}

绑定动画：animation name property

比如示例就是将一个名为 around 的动画绑定到一个ID为 container 的容器上。

然后呢，这个动画的属性是：用八秒时间 不停歇的（永久运行forever） 以 “低速-加快-变慢”的周期曲线 执行 

每日计划 - html+css作品 : CSS3动画实现钟摆效果,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class java 代码 html style src class java 代码 html style src

相关文章

随机文章

您可能还喜欢

您可能还喜欢