文档章节

h5-动画基本介绍

o
 osc_wws45aot
发布于 2019/08/20 15:34
字数 425
阅读 10
收藏 0

精选30+云产品,助力企业轻松上云!>>>

1.介绍

 1 *{
 2             margin: 0;
 3             padding: 0;
 4         }
 5         div{
 6             width: 200px;
 7             height: 200px;
 8             background-color: #5aff61;
 9 
10             /*添加动画效果*/
11             /*1.animation-name: 指定动画名称;*/
12             animation-name: moveTest;
13             /*2.设置动画的总耗时*/
14             animation-duration: 2s;
15             /*3.设置动画的播放次数,默认1次,可以指定具体指,可以指定:infinite:无限次:*/
16             /*animation-iteration-count: infinite;*/
17             /*4.设置交替动画  alternate:来回交替*/
18             /*animation-direction: alternate;*/
19             /*5.设置动画延迟*/
20             animation-delay: 2s;
21             /*6.设置动画结束时的状态:默认情况下,动画完毕之后回到原始状态
22             forwards:会保留动画结束时的状态,在有延迟的情况下,并不会立即进行到动画的初识状态
23             backwards:不会保留动画结束时的装填,在添加了动画延迟的前提下,如果动画有初识状态,那么会立即进行到初识状态
24             both:会保留动画结束时的支行太,在添加了动画延迟的情况下也会立即进入到动画的初始状态
25             */
26             animation-fill-mode: both;
27 
28             /*6.动画的时间函数*/
29             animation-timing-function: linear;
30 
31             /*7.设置动画的播放状态:  paused:暂停   running:播放*/
32             animation-play-state: running;
33         }
34 
35         /*创建动画*/
36         @keyframes moveTest {
37             /*百分比是指整个动画耗时的百分比*/
38             0%{/*可以写:from{}*/
39                 transform: translate(0,0) rotate(60deg);
40             }
41             50%{
42                 transform: translate(0,500px);
43             }
44             100%{/*可以写:to{}*/
45                 transform: translate(500px,800px);
46             }
47         }

2.添加播放、暂停开关

 1 <input type="button" value="播放" id="play">
 2 <input type="button" value="暂停" id="pause">
 3 <script>
 4     var div = document.querySelector("div");
 5     document.querySelector("#play").onclick = function () {
 6         div.style.animationPlayState="running";
 7     }
 8     document.querySelector("#pause").onclick = function () {
 9         div.style.animationPlayState="paused";
10     }
11 </script>

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
一款可视化的在线制作H5

一款可视化的在线制作H5 官方网站: http://www.iii66.cn 制作H5网址: http://www.iii66.cn/love/page/index 包括对图片,文字,图形,视频,声音和分享的设置功能,现在逐一介绍给大家。 ...

benpao
2017/03/01
0
0
【干货】超强整理19个辅助制作HTML5的工具/网站

本期分享共包含19个工具/网站,从文案策划到交互设计把控你的H5制作。 关于H5制作流程 笔者接触的H5制作辅助制作工作基本构成分为文案策划、设计交流学习、制图、视频编辑与剪辑、原型、H5动...

H5教程案例分享
03/19
0
0
原生JS实现的h5小游戏-植物大战僵尸

代码地址如下:<br>http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结合面向对象的编程思想进...

osc_uhmvp9bs
2018/08/07
12
0
2019最新WEB前端开发小白必看的学习路线(附学习视频教程)

2019最新WEB前端开发小白必看的学习路线(附学习视频教程)。web前端自学之路:史上最全web学习路线,HTML5是万维网的核心语言,标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重...

osc_1gvm4g7s
2018/11/21
4
0
序列帧&一镜到底H5开发实现分析

什么是序列帧类H5 我们遇到的一类H5,其中包括“强动画”效果,UI设计提供的是一系列序列帧的素材时,前端将序列帧素材还原成动画进行展示的H5. 几种实现方法 gif 采用gif格式的图片来展示序...

冷星1024
2019/02/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

asp.net core之NLog

NuGet添加 NLog.Web.AspNetCore。 <PackageReference Include="Microsoft.AspNetCore.App" /> 添加配置文件 新建一个文件nlog.config(建议全部小写,linux系统中要注意), 并右键点击其属性......

一介草民Coder
37分钟前
23
0
.NET中的struct和class有什么区别? - What's the difference between struct and class in .NET?

问题: .NET中的struct和class有什么区别? 解决方案: 参考一: https://stackoom.com/question/3OT/NET中的struct和class有什么区别 参考二: https://oldbug.net/q/3OT/What-s-the-differ...

富含淀粉
今天
23
0
android:layout_weight是什么意思? - What does android:layout_weight mean?

问题: I don't understand how to use this attribute. 我不明白如何使用这个属性。 Can anyone tell me more about it? 谁能告诉我更多关于它的事情? 解决方案: 参考一: https://stacko...

javail
今天
17
0
CSS背景不透明度[重复] - CSS Background Opacity [duplicate]

问题: This question already has an answer here: 这个问题已经在这里有了答案: How do I give text or an image a transparent background using CSS? 如何使用CSS为文本或图像提供透明背...

fyin1314
今天
31
0
node http 获取gb2312网页如何转为utf8

最初,我想当然认为是下述做法,但被证明是错误的 const http = require('http'), iconv = require('iconv-lite');const url = 'http://xxx';http.get(url, function(res) { var bo......

高延
今天
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部