前端能力模型-动画类型及动画库的介绍
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.animate {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
background-color: #f00;
line-height: 200px;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 20px;
}
.animate-transition {
transition: transform 2s linear;
-moz-transition: -moz-transform 2s linear;
-webkit-transition: -webkit-transform 2s linear;
-o-transition: -o-transform 2s linear;
}
.animate-transition:hover {
cursor: pointer;
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="animate animate-transition">Transition Animation</div>
</body>
</html>
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.animate {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
background-color: #f00;
line-height: 200px;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 20px;
}
.animate-keyframes {
-webkit-animation: none;
}
.animate-keyframes:hover {
cursor: pointer;
-webkit-animation: frames 2s linear infinite;
}
@-webkit-keyframes frames {
0% {
background-color: #f00;
-webkit-transform: rotate(0deg);
}
100% {
background-color: #f00;
-webkit-transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="animate animate-keyframes">Transition Animation</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.animate-svg {
width: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="animate-svg">
<svg id="svgAnimation" ns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
<g transform="translate(100, 100)">
<g>
<rect width="200" height="200" rx="100" ry="100" fill="red" transform="translate(-100, -100)"></rect>
<text x="-60" y="-0" font-size="20" fill="white">SVG Animation</text>
<animateTransform attributeName="transform" attributeType="xml" type="rotate" from="0" to="360" dur="3s" repeatCount="indefinite">SVG Animation</animateTransform>
</g>
</g>
</svg>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.animate {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
background-color: #f00;
line-height: 200px;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 20px;
}
.animate-input {
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="animate-RAF" class="animate animate-RAF">RAF Animation</div>
<div class="animate-input"><input type="button" id="btn_start" value="Start" style="width:100px;height:30px;" /></div>
<script type="text/javascript">
var animate_raf = document.getElementById("animate-RAF"),
btn_start = document.getElementById("btn_start"),
frameid = null;
function frame(time) {
animate_raf.style['-webkit-transform'] = 'rotate(' + Math.cos(time/1000) * 360 + 'deg)';
frameid = requestAnimationFrame(frame);
}
// 绑定事件
btn_start.addEventListener("click", function(event) {
var val = this.value;
if (val == "Start") {
frameid = requestAnimationFrame(frame);
this.value = "Pause";
} else {
this.value = "Start";
cancelAnimationFrame(frameid);
}
}, false);
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.animate {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
background-color: #f00;
line-height: 200px;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.web-animation-1 {
-webkit-transform: rotate(360deg);
}
</style>
</head>
<body>
<div id="web_animation_1" class="animate web-animation-1">Web Animation-1</div>
<script src="web-animations.js"></script>
<script type="text/javascript">
var web_animation_1 = document.getElementById("web_animation_1");
web_animation_1.addEventListener('click', function() {
web_animation_1.animate([{
transform: 'rotate(0deg)'
}, {
transform: 'rotate(360deg)'
}],{
duration: 2
});
}, false);
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.animate {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 50%;
background-color: #f00;
line-height: 200px;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.web-animation-2 {
-webkit-transform: rotate(360deg);
}
</style>
</head>
<body>
<div id="web_animation_2" class="animate web-animation-2">Web Animation-2</div>
<script src="web-animations.js"></script>
<script type="text/javascript">
var web_animation_2 = document.getElementById("web_animation_2");
web_animation_2.addEventListener('click', function() {
web_animation_2.animate([{
transform: 'rotate(0deg)'
}, {
transform: 'rotate(360deg)'
}],{
// 旋转方向
direction: "alternate",
// 旋转值
duration: 1,
// 迭代
iterations: Infinity,
// 缓解过渡
easing: 'ease-in-out',
// 播放速率
playbackRate: 2
});
}, false);
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.web_animation_4 {
width: 700px;
margin: 0 auto;
padding: 10px;
background-color: #ccc;
cursor: pointer;
}
.web_animation_4 .par-timing-box {
background-color: #00f;
height: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div id="web_animation_4" class="web_animation_4">
<div id="parItem1" class="par-timing-box" style="width: 500px;"></div>
<div id="parItem2" class="par-timing-box" style="width: 700px;"></div>
<div id="parItem3" class="par-timing-box" style="width: 200px;"></div>
</div>
<script src="web-animations.js"></script>
<script type="text/javascript">
var web_animation_4 = document.getElementById("web_animation_4"),
parItem1 = document.getElementById("parItem1"),
parItem2 = document.getElementById("parItem2"),
parItem3 = document.getElementById("parItem3");
web_animation_4.addEventListener('click', function() {
var obj = new ParGroup([
new Animation(parItem1, [{width: '0px'}, {width: '500px'}], 1),
new Animation(parItem2, [{width: '0px'}, {width: '700px'}], 1),
new Animation(parItem3, [{width: '0px'}, {width: '200px'}], 1)
]);
document.timeline.play(obj);
}, false);
</script>
</body>
</html>
前端能力模型-动画类型及动画库的介绍相关推荐
- Web前端:2022年最佳Javascript动画库
当你考虑制作网站时,你首先考虑的是如何使你的网站脱颖而出,虽然有很多方法可以让它脱颖而出,比如发布独特的内容.制作引人入胜的视频和文章,但吸引人的最佳方式之一是动画和图形.前端开发人员利用Javasc ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- css animation动画完成后隐藏_css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- html页面css3滚动加载,aos.js-网页滚动加载动画的jQueryCSS3动画库
aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. MIT许 ...
- vue过渡动画Animate.css动画库(1)
一.前言: 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验, Vue中为我们可以自定义过渡或动画或者Vue提供一些内置组件完成动画,利用它们我们可以方便的实现过渡动画 ...
- 前端学习(205):animation动画库
动画库 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
- ListView 简单动画和 一些动画库
为什么要有这个,当然是为了 copy 啊啊啊啊 https://github.com/Trinea/android-open-project 开源project搜集 0. 强烈推荐的2个库, ...
- NineoldAndroids动画库源码分析
简介 做Android开发的同学很多都知道或者使用过一个动画库,那就是NineOldAndroids,它的作者及其牛X,好几个著名的开源库都是他的作品,具体大家可以看他的JakeWharton.简单来 ...
- 功能强大的 Javascript 动画库插件
本期介绍一个前端动画插件anime.js,anime.js 是一款功能强大的 Javascript 动画库插件,可以和 CSS3 属性,SVG,DOM 元素和 JS 对象一起工作,制作出各种高性能,平 ...
最新文章
- es安装的时候遇到的所有的坑
- ASP错误捕获的几种常规处理方式
- wxWidgets:wxCaret 示例
- android ArcGIS学习笔记一
- OpenShift DIY:使用Gradle构建Spring Boot / Undertow应用程序
- java 调用js 解析yml_nodejs库yaml读取yml或yaml配置文件
- 金蝶k3rpc服务器不可用_金蝶KIS商贸版常见问题这样解决
- DBA整理的万字详解MySQL性能优化,值得收藏!
- tornado和subprocess实现程序的非堵塞异步处理
- 去除CSDN系统通知小红点
- gif跟随ProgressBar一起动/pk进度条gif特效
- 概率图模型在图像处理中的应用
- Linxu终端远程协助工具termpair
- matlab的方法定义变量,Matlab定义变量怎么操作?定义变量方法介绍
- 服务器cpu哪个型号可以超频,CPU超频史上的14个神器:你用过几个?
- 天翼云80/8080/443端口访问不通问题
- 笔记本修改无线网卡MAC地址
- 牛客网项目--MyBatis
- Ubuntu下的kdbg安装和VSCode安装与简单使用
- 查询订单表中同一父订单下的所有子订单(蜜芽)