有一张png格式的图片,用css3的animation()配合@keyframes特性,实现图片的上下摇动
原图如下:
html代码如下:
<img src="img/hand.png" id="shake_icon" />
css代码如下:
#shake_icon{ width:100px; height:100px; animation: shaking 0.25s linear infinite; -webkit-animation: shaking 0.25s linear infinite; } @keyframes shaking{
}@-webkit-keyframes shaking{25% {margin-top:-20px;}50% {margin-top:10px;}75% {margin-top:30px;}100% {margin-top:10px;}}25% { margin-top:-20px; } 50% { margin-top:10px; } 75% { margin-top:30px; } 100% { margin-top:10px; }
animation的用法:
在keyframs里面也可以调用css3中的2D 3D转换,过度效果
如:
keyframes shaking{
25% { translate(20,30); }
75% { translate(40,50); } 100% { translate(20,30); }
}
2D效果:移动-translate() 旋转-rotate() 尺寸变化-scale() 翻转给定的角度-skew()
原文地址:https://blog.csdn.net/tangxiujiang
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。