| CSS3实现钟摆动态效果 | 您所在的位置：网站首页 › 摆钟摆动 › CSS3实现钟摆动态效果 |
CSS3实现钟摆动态效果
|
前段时间去参加网易游戏的面试，面试官让我当场用css3做一个钟摆效果，由于当时对transform，transition比较熟悉，还没研究过animation，所以就没有写出来，感觉很郁闷，回去就研究了一下，简单做了个demo出来。 首先看下效果： 兼容性：chrome,firefox,ie10+都支持 好了，下面是代码 html部分 css部分 .clock-box { width:300px; height:300px; margin:100px auto; border:1px solid #00ff90; } .clock { width: 2px; height: 100px; background: #000000; margin: 30px auto; position: relative; } .clock::after { content: ""; position: absolute; bottom: -20px; left: -9px; width: 20px; height: 20px; border-radius: 10px; background: #ff0000; } .clock { -webkit-animation: go 1s ease-in-out alternate infinite; -moz-animation: go 1s ease-in-out alternate infinite; animation: go 1s ease-in-out alternate infinite; } @keyframes go { 0% { -webkit-transform: rotate(30deg); -webkit-transform-origin: top center; -moz-transform: rotate(30deg); -moz-transform-origin: top center; transform: rotate(30deg); transform-origin: top center; } 100% { -webkit-transform: rotate(-30deg); -webkit-transform-origin: top center; -moz-transform: rotate(-30deg); -moz-transform-origin: top center; transform: rotate(-30deg); transform-origin: top center; } }代码很简单，效果也很简单，但是思路就是这样了，元素使用animation属性绑定动画，然后@keyframes 实例这个动画，动画主要用到transform属性实现。 |
【本文地址】
公司简介
联系我们