CSS3 过渡效果触发时机的问题
2016-08-22 14:39
323 查看
像360deg过渡效果,做专题的同学应该是经常做的.
其实触发过渡效果有很多种方式,今天总结一下:
1.最常见的hover触发过渡效果
2.js添加操作来触发
比如直接修改style属性来触发
3.通过伪类触发
利用input获得焦点,可以把一些相应提示信息显示出来
通过active来触发
开关按钮
如果上面要模拟开关,需要把主要的样式都放在input的兄弟元素上.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>360deg过渡效果</title> <style type="text/css"> div{ cursor:pointer; width:100px; height:40px; background:#92B901; font-size:14px; opacity:0.5; transition-property:width,height,background,font-size,opacity,transform; transition-duration:1s,1s,1s,1s,1s,1s; border-radius:5px; font-weight:bold; color:#FFF; padding:10px; } div:hover{ width:120px; height:60px; background:#1ec7e6; font-size:20px; opacity:1; transform:rotate(360deg); } </style> </head> <body> <div>CSS3 transition</div> </body> </html>
其实触发过渡效果有很多种方式,今天总结一下:
1.最常见的hover触发过渡效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hover过渡效果</title> <style type="text/css"> div{cursor:pointer;width:100px;height:40px;background:#92b901;transition:width 0.5s;} div:hover{width:200px;} </style> </head> <body> <div></div> </body> </html>
2.js添加操作来触发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js添加样式来触发过渡效果</title> <style type="text/css"> div{width:100px;height:40px;background:#92b901;transition:width 0.5s;} .change{width:200px;} </style> <script type="text/javascript"> setTimeout(function(){ var div = document.querySelector("div"); div.classList.add("change"); }); </script> </head> <body> <div></div> </body> </html>
比如直接修改style属性来触发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js直接修改style属性来触发过渡效果</title> <style type="text/css"> div{width:100px;height:40px;background:#92b901;transition:width 0.5s;} </style> <script type="text/javascript"> setTimeout(function(){ var div = document.querySelector("div"); div.style.width="200px"; }); </script> </head> <body> <div></div> </body> </html>
3.通过伪类触发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js直接修改伪类属性来触发过渡效果</title> <style type="text/css"> div{width:100px;height:40px;background:#92b901;transition:width 0.5s;} input:focus ~ div{width:200px;} </style> </head> <body> <input> <div></div> </body> </html>
利用input获得焦点,可以把一些相应提示信息显示出来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input获得焦点,可以把一些相应提示信息显示出来</title> <style type="text/css"> input:focus ~ p{width:200px;transform:scale(1);} p{transform:scale(0);transition:transform 0.2s;} </style> </head> <body> <input> <p>请输入数字</p> </body> </html>
通过active来触发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>active来触发</title> <style type="text/css"> button:active ~ p{width:200px;transform:scale(1);} p{transform:scale(0);transition:transform 0.2s;} </style> </head> <body> <button>hold me</button> <p>hahah</p> </body> </html>
开关按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> input{display:none;} label{width:100px;height:50px;background:#ADC14E;display:block;border-radius:25px;} div{width:50px;height:50px;border-radius:50%;background:#FFF;border:1px solid silver;position:relative;left:0;transition: left 0.5s;} input:checked ~ div{left:50px;} </style> </head> <body> <label> <input type="checkbox"> <div></div> </label> </body> </html>
如果上面要模拟开关,需要把主要的样式都放在input的兄弟元素上.
相关文章推荐
- 【CSS3】使用JAVASCript触发过渡效果
- Js点击触发Css3的动画Animations、过渡Transitions效果
- 使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
- 使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
- 使用css3过渡属性实现翻牌效果
- jQuery和CSS3全屏带过渡动画效果的模态窗口插件
- 带CSS3过渡效果的模态窗口js插件
- CSS3的过渡效果
- css3实现网页平滑过渡效果
- 用TransitionDrawable实现ImageView渐隐渐显过渡效果,并解决OutOfMemory问题
- css3的transition 过渡效果
- CSS3 transition 属性 过渡效果
- CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)
- 超棒的CSS3动画页面过渡效果
- 超棒的CSS3动画页面过渡效果
- CSS3 transition 属性过渡效果 详解
- 使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
- CSS3实现的超酷页面过渡效果
- 15个CSS3和jQuery的超棒页面过渡效果教程
- CSS3的过渡效果(transition)与动画(animation)