首页 > 代码库 > 每日计划 - html+css作品 : CSS3动画实现钟摆效果
每日计划 - html+css作品 : CSS3动画实现钟摆效果
#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) 以 “低速-加快-变慢”的周期曲线 执行
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。