互联网常识：使用css过渡有哪些触发方式

跟大家讲解下有关使用css过渡有哪些触发方式，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说使用css过渡有哪些触发方式，小编也收集到了有关使用css过渡有哪些触发方式的相关资料，希望大家看到了会喜欢。

触发方式有：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过渡有哪些触发方式的详细内容，更多请关注php中文网其它相关文章！

来源：php中文网

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！