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的释义为 ...
随机推荐
- mariadb（第五章）视图、事物、索引、外键
视图 对于复杂的查询,在多个地方被使用,如果需求发生了改变,需要更改sql语句,则需要在多个地方进行修改,维护起来非常麻烦 假如因为某种需求,需要将user拆房表usera和表userb,该两张表的结 ...
- vue组件化开发组件拆分原则是什么
原则:可复用.可组合: 两大类:页面组件.功能组件: 除了公共头导航.侧导航.脚部内容,还有:
- A. Chess Placing
链接 [https://codeforces.com/contest/985/problem/A] 题意 给你一个偶数n,输入n/2个数,代表棋子的位置,有一个1*n的棋盘是黑白相间的 问你使得所有棋 ...
- Linux安装Apache常见报错(一)
启动Apache提示报错:Could not reliably determine the server's fully qualified domain name, using localhost, ...
- Tea Party CodeForces - 808C （构造+贪心）
Polycarp invited all his friends to the tea party to celebrate the holiday. He has ncups, one for ea ...
- 单列模式，装饰器、new方法、类/静态方法实现单列模式
一.单列模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在. 如,某个服务器程序的配置信息存放在一个文件中,客户端通过一个 C ...
- 06_Hadoop分布式文件系统HDFS架构讲解
mr 计算框架 假如有三台机器 统领者master 01 02 03 每台机器都有过滤的应用程序 移动数据 01机== 300M >mr 移动计算 java程序传递给各个机器(mr) ...
- Python3练习题 018：打印星号菱形
Python的内置方法 str.center(width [, fillchar]) 就能轻而易举打印出来:str即是数量不等的星号,width即是最大宽度(7个空格),默认填充字符fillchar就 ...
- 重构客户注册-基于ActiveMQ实现短信验证码生产者
重构目标:将bos_fore项目中的CustomerAction作为短信消息生产者,将消息发给ActiveMQ,创建一个单独的SMS项目,作为短信息的消费者,从ActiveMQ获取短信消息,调用第三方 ...
- Spring Boot 框架学习 (一)配置并运行Spring Boot 框架
下载开发工具: 下载完成打开以后,第一步检查环境 查看jdk是否配置: 接着一定要注意,maven通常情况下它是没有给你配置的,要自行配置: 右键新建: 然后依赖选择web.跟Mybatis就行了. ...