Js点击触发Css3的动画Animations、过渡Transitions效果
2023-09-14 08:58:22 时间
关键是首先指定动画效果的CSS属性名称,然后在Js中改变这个属性
如果不使用Js触发,可以选择利用css的状态:hover,focus,active 来触发,也可以一开始就触发
下例为Js点击触发过渡Transitions效果,指定的属性名称是width
<!DOCTYPE html> <html> <head> <style> #aaa { width: 100px; height: 100px; background: blue; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ } </style> <script> function big() { document.getElementById("aaa").style.width = "300px"; } function small() { document.getElementById("aaa").style.width = "100px"; } </script> </head> <body> <button onclick="big()">Big</button> <button onclick="small()">Small</button> <div id="aaa"></div> </body> </html>
原创文章,欢迎转载,转载请注明出处!
相关文章
- Fabric.js 使用纯色遮挡画布(前景色)
- js书写原生ajax,JS 原生ajax写法
- js动画效果大全_jquery 动画
- 你要是还学不会,请提刀来见 Typora+PicGo+Gitee + node.js 打造个人高效稳定优雅图床
- JS跳转代码_js中跳转页面路径
- Js排序算法_js 排序算法
- js 判断数组中是否包含某个元素(转载)「建议收藏」
- JS 学习笔记 (六) 函数式编程
- 一起手写JS函数的call、apply、bind
- js正则表达式转义字符-【JavaScript正则表达式RegExp】
- js 数组去除重复数据-5 个提升你 JS 编码水平的实例
- js 数组去除重复数据-当WPS开始像支持VBA一样支持JS语言时,微软又该何去何从?
- (九)使用js实现动画
- 如何使用jscythe并通过Node.js的Inspector机制执行任意JS代码
- clipboard.js:最轻便的复制页面内容到剪切板的JS
- JS 测验详解编程语言
- 创建JS文件:在Linux下实现自动化任务(linux创建js文件)
- JS技术连接Oracle数据库实现数据交互(js连接oracle实例)
- 使用JS控制Oracle数据库的更新(js控制oracle更新)
- Oracle中JS的优势让数据库性能提升(oracle中 js)
- JS:正则将首字单词转成大写
- js日期字符串截取分割成单个具体的日期(2009-12-3013:28:29)
- Js获取电脑屏幕的颜色色彩品质(16位或32位)
- js延迟加载改变JS的位置加快网页加载速度
- Js放到HTML文件中的哪个位置有什么区别