CSS3实现钟摆动态效果
来源:互联网 发布:网络博客真的能赚钱吗 编辑:程序博客网 时间:2024/05/17 02:18
前段时间去参加网易游戏的面试,面试官让我当场用css3做一个钟摆效果,由于当时对transform,transition比较熟悉,还没研究过animation,所以就没有写出来,感觉很郁闷,回去就研究了一下,简单做了个demo出来。
首先看下效果:
兼容性:chrome,firefox,ie10+都支持
好了,下面是代码
html部分
<div class="clock-box"> <div class="clock"></div></div>
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属性实现。
0 0
- CSS3实现钟摆动态效果
- 运用CSS3实现钟摆效果
- 自定义View实现钟摆效果进度条PendulumView
- 钟摆效果动画效果
- 纯css3实现动态大脸猫效果
- CSS3实现动态多级菜单效果
- Android自定义View: 如何实现类钟摆的动画效果?
- css3动态效果
- CSS3动态效果收集
- css3动态效果
- 钟摆(圆锥摆)效果
- CSS3实现的超酷动态圆形悬浮效果
- 使用CSS3实现动态加载gif图片的效果
- CSS3实现一个鼠标跟随动态旋转效果
- 仿真树叶飘落效果的实现(精灵旋转、翻转、钟摆运动等综合运用)
- cocos2d--仿真树叶飘落效果的实现(精灵旋转、翻转、钟摆运动等综合运用)
- css3实现闪光效果
- css3实现按钮开关效果
- socket编程
- Python3.5 如何安装对应版本的numpy
- 关于anaconda环境下安装第三方包(如think python一书中的swampy)
- POJ 3253 Fence Repair(huffman树的应用)
- Python Standard Library —— JSON Encoders and Decoders
- CSS3实现钟摆动态效果
- Android开发常用到的中间View(加载,重试等)
- OpenCV 简介
- Java Date相关
- RubyMine 快捷键总结
- Android 4.4 kitkat以上及以下根据uri获取路径的方法
- PHP之JavaScript
- poll函数
- 【运营商大数据】用户群特征刻画