css3 animation动画使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
.basic{
background-color: red;
/* width: 300px;
height: 300px; */
} @keyframes animate1
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} @-moz-keyframes animate1 /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} @-webkit-keyframes animate1 /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} @-o-keyframes animate1 /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} .animate2 { animation: animate1 5s;
-moz-animation: animate1 5s; /* Firefox */
-webkit-animation: animate1 5s; /* Safari 和 Chrome */
-o-animation: animate1 5s; /* Opera */ } </style>
</head>
<body>
<div class="basic" id="div1">
hello world.
</div> <button type="button" name="button">点击应用动画</button> <script type="text/javascript">
const btn = document.getElementsByName('button')[0];
const div = document.getElementById("div1");
btn.addEventListener('click', ()=>{
console.log("点击按钮。。。");
if(div.classList.contains("basic")){
div.classList.remove("basic");
}
div.classList.add("animate2");
});
</script>
</body>
</html>
1. 使用@keyframes定义一个动画效果。
@keyframes animate1
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} @-moz-keyframes animate1 /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} @-webkit-keyframes animate1 /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
} @-o-keyframes animate1 /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
2.将动画效果先绑定到css类上。
.animate2 { animation: animate1 5s;
-moz-animation: animate1 5s; /* Firefox */
-webkit-animation: animate1 5s; /* Safari 和 Chrome */
-o-animation: animate1 5s; /* Opera */ }
3.将动画效果应用到指定的元素上。
const btn = document.getElementsByName('button')[0];
const div = document.getElementById("div1");
btn.addEventListener('click', ()=>{
console.log("点击按钮。。。");
if(div.classList.contains("basic")){
div.classList.remove("basic");
}
div.classList.add("animate2");
});
当点击按钮时,就会将定义的动画效果应用到div上。
css3 animation动画使用的更多相关文章
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...
- CSS3 animation 动画
今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...
- css3 animation(动画)笔记
在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...
- css3 animation 动画属性简介
animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...
- css3 animation动画事件
当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart //动画開始 An ...
- CSS3 animation动画,循环间的延时执行时间
如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的. .item{ webkit-animation ...
- 关于css3 Animation动画
在介绍animation之前有必要先来了解一个东西,那就是“keyframes”,我们把他叫做“关键帧”: 在使用transition制作一个简单的transition效果时,包括了初始属性,最终属性 ...
随机推荐
- python 黑魔法 ---上下文管理器(contextor)
所谓上下文 计算机上下文(Context)对于我而言,一直是一个很抽象的名词.就像形而上一样,经常听见有人说,但是无法和现实认知世界相结合. 最直观的上下文,莫过于小学的语文课,经常会问联系上下文,推 ...
- login oracle as sysdba
- sass对象的定义
sass在3.3引入map类型,它与JS的对象非常相似,它有两种定义模式.外面都是用小括号括括起来,每个键值对可以像JS那样与逗号分开.不同之后是,键名与键值之间的冒号不是 必须的 不用对象的情况 @ ...
- Python运维开发基础05-语法基础
上节作业回顾(讲解+温习90分钟) #!/usr/bin/env python # -*- coding:utf-8 -*- # author:Mr.chen import os,time Tag = ...
- the difference between fopen&open
[the difference between fopen&open] fopen是C标准API,open是linux系统调用,层次上fopen基于open,在其之上.fopen有缓存,ope ...
- ajax406错误
如上,ajax请求时一直返回error,但是后台已经正确返回.网上给出的解决办法是spring3.*的,但我的是sppring 4.*的,应该不适用,我也没试. 思索一下,406 not accept ...
- 23-python用BeautifulSoup用抓取a标签内所有数据
1.获取子标签: thr_msgs = soup.find_all('div',class_=re.compile('msg')) for i in thr_msgs: print(i) ...
- mybatis框架中的输入映射
mybatis.xml映射文件中定义了操作数据库的sql,每个sql是一个statement,映射文件是mybatis的核心. 输入类型: 1.传递简单类型 可以参考我之前的对于数据库增删改查的博文. ...
- Laravel 引入自定义类库或第三方类库
强烈建议引入的类 都是含有命名空间的,这样使用起来就不会出现重名的情况.!!当然,没有命名空间也可以使用,就是类名字(非文件名)最好复杂一些.(重复也不要紧,程序会自己判断) laravel5.4中如 ...
- Android系统编译与测试
1.Android系统分析 2.下载Android源代码(不包括Linux内核部分) 下载好了的Android_5.01.tar.gz,通过samba复制到ubuntu里,再解压之. 可以看到Andr ...