触发方式有:1、通过伪类元素“:hover”触发,语法“元素{transition:属性 过渡时间}元素:hover{属性:属性值}”;2、通过“element.classList.add("元素名称")”语句触发css过渡效果。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
第一种: 通过伪类元素触发
<style> .box{ width: 100px; height: 100px; background-color: blueviolet; transition: width 1s linear .5s; } .box:hover{ width: 400px; } </style> <p class="box"> </p>
第二种: 通过JS触发
通过js添加必须有一定的延迟(延迟去掉无效果)来改变元素的样式
<style> .box{ width: 100px; height: 100px; background-color: blueviolet; transition: width 1s linear .5s; } .box1{ width: 400px; }</style> <p class="box"> </p> <scrpit> setTimeout(() => { let element = document.getElementsByClassName('box')[0]; element.classList.add('box1') }, 1) </scrpit>
推荐学习:css视频教程
以上就是使用css过渡有哪些触发方式的详细内容,更多请关注群英网络其它相关文章!
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2018 群英 版权所有 茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号-36 粤公网安备 44090202000006号 粤工商备P091701000595