方法:1、使用“animation: 动画名称 5s infinite;”语句给元素绑定动画;2、使用“@keyframes 动画名称 {50% {transform: scale(-1,1);}}”语句控制动画的动作,实现左右翻转效果。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
css3实现元素左右翻转
可以利用animation属性和“@keyframes”创建一个元素左右翻转的动画。动画中使用transform: scale(-1,1)
控制元素左右翻转。
实现代码:
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <style> div { width: 100px; height: 100px; background: red; margin: 100px; animation: mymove 5s infinite; -webkit-animation: mymove 5s infinite; /* Safari and Chrome */ } @keyframes mymove { 50% { transform: scale(-1,1); } } @-webkit-keyframes mymove{ /* Safari and Chrome */ 50% { transform: scale(-1,1); } } </style> </head> <body> <div></div> </body> </html>
(学习视频分享:css视频教程)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。