触发方式有: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视频教程
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。