Js点击触发Css3的动画Animations、过渡Transitions效果
关键是首先指定动画效果的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>
原创文章，欢迎转载，转载请注明出处！
Js点击触发Css3的动画Animations、过渡Transitions效果的更多相关文章
- css3关键帧动画实现轮播效果
实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...
- 使用css动画实现领积分效果
最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...
- js代码点击触发事件
js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...
- js和jquery触发按钮点击事件
js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- 深入A标签点击触发事件而不跳转的详解
本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧. 点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端. 不过,有时需要点击#页面但不作跳转,可以这样写: < ...
- CSS3 动画及过渡详解
今天开始我们一起来学习有关于CSS3制作动画的几个属性:变形(transform).过渡(transition)和动画(animation)等CSS3技术. 首先我们先来了解一下变形(transfor ...
- CSS3中和动画有关的属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform. transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为 ...
随机推荐
- PS调出怀旧雨中特写的非主流照片
原图 最终效果 一.打开原图素材,按Ctrl + ALt + ~ 调出高光选区,按Ctrl + Shift + I 反选,然后创建曲线调整图层,适当调暗一点. 二.合并所有图层,点通道面板,选择蓝色通 ...
- p33自然同态
如何理解两个划线的地方 1.因为,所以所以ker(π|_H)=kerπ∩H=N∩H 2.gN=Ng,对任意的g 属于G 因为 N被H/N 包含 也对任意的 g 属于 HN成立 ...
- Django 中的Form表单认证
一.Form表单 1.1 Form的几个功能 验证用户数据(显示错误信息) 初始化页面显示内容 HTML Form提交保留上次提交数据 生成HTML标签 1.2 创建表单类Form 1. 创建 ...
- 10-vue的介绍
vue的作者叫尤雨溪,中国人.自认为很牛逼的人物,也是我的崇拜之神. 关于他本人的认知,希望大家读一下这篇关于他的文章,或许你会对语言,技术,产生浓厚的兴趣.https://mp.weixin.qq. ...
- Zabbix appliance manual
https://www.zabbix.com/documentation/4.0/manual/appliance If the appliance fails to start up in Hype ...
- jmeter压测参数设定（转）
jmeter压测参数设定 一.基本公式 线程数 = QPS * time: 注:QPS--每秒完成请求的个数:time--每个请求响应完成平均需要时间: 故QPS * time就是所有请求完成响应所需 ...
- VS2015 + OPENCV + CUDA 安装流程
VS2015 https://blog.csdn.net/guxiaonuan/article/details/73775519?locationNum=2&fps=1 OPENCV htt ...
- Oracle 创建外部表
Oracle 外部表能迅速的将海量的数据导入到数据库里面,外部表的创建使用步骤如下: 1 创建一个Directory:必须用sys用户创建,用户存放外部数据文件. create directory D ...
- [转帖]一个FORK的面试题
一个FORK的面试题 https://coolshell.cn 搞不懂 fork 的含义. Linux 里面的线程不是教科书上面的标准的线程 好像用 父子进程来进行 模拟线程的处理 父子线程应该共享 ...
- [转帖]国产紫光SSD不再只是实验室展品 开始批量出货
国产紫光SSD不再只是实验室展品 开始批量出货 https://www.cnbeta.com/articles/tech/825865.htm 没听说有做HDD的 现做了SSD 弯道超车吗 可以实现全 ...