snrg.net
当前位置:首页 >> Css3点击旋转动画 >>

Css3点击旋转动画

写了例子,效果不是很好,仅供参考<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>IE浏览器CSS transform旋转属性的演示</title> <meta http-equiv="X-UA-

div{transform: rotate(45deg);transform-origin:20% 40%;/*定义动画的旋转中心点*/-ms-transform: rotate(45deg); /* IE 9 */-ms-transform-origin:20% 40%; /* IE 9 */-webkit-transform: rotate(45deg); /* Safari 和 Chrome */-webkit-transform-origin:20%

transform-origin:.设置就好了 注意它是css3的,注意加浏览器前缀

这个要分成两个css3动画去做小变大是最外层父级,例如它执行了1s;内层的负责旋转,延迟1s执行

方法/步骤 首先我们新建一个html空白文档,取名字叫做css3动画,保存一下.然后写html结构,我们只需要一个div元素即可,class名字叫做img.我们设置其边框为不同的颜色,边框宽度设置成100px.因为是圆环,所以我们用到了css3的圆角

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 100px; height: 100px; border:3px solid red; border-radius: 50%; margin: 200px; animation: rotate 5s infinite; } @keyframes rotate

你在这里面也没设置让他旋转的代码,肯定不会旋转的 就是这句:-webkit-transform:rotate(720deg) scale(2,2); @keyframes mylasting1{0%{top:550px; -webkit-transform:rotate(10deg) scale(2,2); transform:rotate(720deg) scale(2,2);}25%{top:250

用js吧,帮个点击事件,移除那个旋转样式

这样应该使用html5可以实现 如果你想要使用css实现的 可以参考css3里的 @-webkit-keyframes @-webkit-animation 这个两个参数的使用

<!DOCTYPE html><html><head><title>transform</title><!--我用的谷歌浏览器--><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="../scripts/jquery-2.1.1.min.js"></script><script src="../scripts/bootstrap.min.

网站首页 | 网站地图
All rights reserved Powered by www.snrg.net
copyright ©right 2010-2021。
内容来自网络,如有侵犯请联系客服。zhit325@qq.com