10.28-11.3 WEB（二）
上周作业复习WEB(一)，整理资料
居中写三遍，JS原生轮播图背着能写出。
1、手风琴 这个是点了才动你可以写hover，hover之后滑动但是移出就还原，点击才像视频里这样，不还原，你可以用div背景色，或者自己找图这里面是有动画效果的，不是直接就变了。
2、css单位，px、em、rem、vmin、vmax
3、媒体查询
4、帧动画
5、3d盒子
6、还有个正方体，我找找这个有扩展，换图
7、百叶窗
8、再写一个JQ轮播图
刚接触逐帧动画的时候一头雾水，因此又去学习了CSS3的动画接触到animation和@keyframs的使用，搭配JavaScript实现动画的控制。
CSS3逐帧动画原理及其控制
成品镇楼：
一、定义动画
@keyframs的使用
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
使用方式（1）from…to…：
- @keyframes my {
from{初始状态属性}
to{结束状态属性}
}
使用方式（2）0%…xx%…100%：
- @keyframes my { //可以定义无数个中间状态
0%{初始状态属性}
…%{中间状态属性}
50%{中间状态属性}
100%{结束状态属性}
}
animation的使用：
animation和transition的区别
相同点：
- 都是随着时间改变元素的属性值。
不同点：
- transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；
- 而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。
animation为动画混合属性，由8个属性组成：
（图示为常用属性）
animation-name 检索或设置对象所应用的动画名称，如上面@keyframs创建的my。
animation-duration 检索或设置对象动画的持续时间。
animation-timing-function 检索或设置对象动画的过渡类型。
linear动画从头到尾的速度是相同的。ease默认。动画以低速开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。
或自定的step()函数，等下的逐帧动画就会使用。
难点：steps(number_of_steps, direction)是一个阶跃函数用于把整个操作领域切分为相同大小的间隔，每个间隔都是相等的。number必须为正数。大白话，number就是把设置的动画，间隔几次跳跃一次。
内置属性：step-start等同于steps(1,start)，动画分成1步，动画执行时以左侧端点为开始；step-end等同于steps(1,end)：动画分成1步，动画执行时以结尾端点为开始。
注意start和end的区别：
animation-delay 检索或设置动画在启动前的延迟时间
animation-iteration-count 检索或设置对象动画的循环播放的次数，默认为1。
animation-iteration-count: infinite | number
infinite循环一直播放。number一个数字，定义应该播放多少次动画
animation-direction 检索或设置对象动画在循环中是否反向运动，
normal默认值。动画按正常播放。reverse动画反向播放。alternate动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。alternate-reverse动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。initial设置该属性为它的默认值。inherit从父元素继承该属性。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
none默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。forwards在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。backwards动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）。both动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。initial设置该属性为它的默认值。inherit从父元素继承该属性。
animation-play-state 检索或设置对象动画的状态，规定动画是否正在运行或暂停。默认是 “running”。
animation-play-state:running | paused
基础示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>
二、实现帧动画
在有了css3动画的基础上，就可以开始实现把连续的图片运动起来了。
如图示，由四个小图片拼接而成的，现在给上代码让它运动起来：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="player.js"></script>
<style>
.boxA {
width: 300px; /*宽高尺寸任意增减*/
height: 100px;
background:url("http://img.mukewang.com/565d07490001365329660269.png") no-repeat;
background-size: 400% 100%; /*这项是关键，用来撑开拼凑起来的序列帧，一行4帧图就是400% */
-webkit-animation: bird-slow .5s steps(3) infinite; /*发生了3次位移steps就是3*/
animation: bird-slow .5s steps(3) infinite;
}
@keyframes bird-slow {
0% {
background-position: 0% 0%;
}
100% {
background-position: 99% 0%; /*整张图是100%，3次位移每一次是33%，第三次就是99%*/
}
}
@-webkit-keyframes bird-slow {
0% {
background-position: 0% 0%;
}
100% {
background-position: 99% 0%;
}
}
</style>
<title>demo</title>
</head>
<body>
<div class="boxA" id="boxA">
</div>
</body>
</html>
最关键的就是这两行代码：
background-size: 400% 100%;
这项是关键，用来撑开拼凑起来的序列帧，一行4帧图就是400% 。
animation: bird-slow .5s steps(3) infinite;
发生了3次位移steps就是3，表明是三次跳跃，而不是简单的在图片上的移动
三、控制帧动画
首先实现动画停止的功能
<button id="btn" type="button" onclick="func(this)">停止</button>
用户点击按钮调用 func(this) 这个函数，用到JavaScript，开头引入js文件
<script type="text/javascript" src="player.js"></script>
实现动画的停止和继续，在CSS中animation-play-state就可以实现，那在JS中因为$this代表的就是当前这个按钮对象，就可以根据它来进行判断开始和停止，再更改获取到的boxA.style.animationPlayState的值
function func($this){
var boxA = document.getElementById("boxA");
if($this.innerText=="停止"){
boxA.style.animationPlayState="paused";
$this.innerText="开始";
}else{
boxA.style.animationPlayState="running";
$this.innerText="停止";
}
};
在CSS中让按钮变好看一点：
#btn{
margin: 30px;
border: 1px solid black;
border-radius: 80%;
width: 60px;
height: 60px;
background-color: pink;
}
#btn:hover{
background-color: bisque;
}
下面来控制他的速度：
<button id="btn" type="button" onclick="fast(this)">加快</button>
<button id="btn" type="button" onclick="slow(this)">变慢</button>
<button id="btn" type="button" onclick="nomal(this)">正常</button>
在JS中怎么写呢？这里我掉坑了，控制速度我首先想到的是animation-timing-function，一直调试结果出现图片滑动播放的情况，之后仔细一想，动画播放是周期性的，缩短周期就可以控制速度了，所以正确的应该是改变他的animation-duration。
function fast($this){
var boxA = document.getElementById("boxA");
boxA.style.animationDuration=".2s"
};
function slow($this){
var boxA = document.getElementById("boxA");
boxA.style.animationDuration=".8s"
}
function nomal($this){
var boxA = document.getElementById("boxA");
boxA.style.animationDuration=".5s"
}
就可以实现啦~~完美！
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="player.js"></script>
<style>
.boxA {
width: 300px; /*宽高尺寸任意增减*/
height: 100px;
background:url("http://img.mukewang.com/565d07490001365329660269.png") no-repeat;
background-size: 400% 100%; /*这项是关键，用来撑开拼凑起来的序列帧，一行4帧图就是400% */
-webkit-animation: bird-slow .5s steps(3) infinite; /*发生了3次位移steps就是3*/
animation: bird-slow .5s steps(3) infinite;
}
@keyframes bird-slow {
0% {
background-position: 0% 0%;
}
100% {
background-position: 99% 0%; /*整张图是100%，3次位移每一次是33%，第三次就是99%*/
}
}
@-webkit-keyframes bird-slow {
0% {
background-position: 0% 0%;
}
100% {
background-position: 99% 0%;
}
}
#btn{
margin: 30px;
border: 1px solid black;
border-radius: 80%;
width: 60px;
height: 60px;
background-color: pink;
}
#btn:hover{
background-color: bisque;
}
</style>
<title>demo</title>
</head>
<body>
<div class="boxA" id="boxA">
</div>
<button id="btn" type="button" onclick="func(this)">停止</button>
<button id="btn" type="button" onclick="fast(this)">加快</button>
<button id="btn" type="button" onclick="slow(this)">变慢</button>
<button id="btn" type="button" onclick="nomal(this)">正常</button>
</body>
</html>
function func($this){
var boxA = document.getElementById("boxA");
if($this.innerText=="停止"){
boxA.style.animationPlayState="paused";
$this.innerText="开始";
}else{
boxA.style.animationPlayState="running";
$this.innerText="停止";
}
};
function fast($this){
var boxA = document.getElementById("boxA");
boxA.style.animationDuration=".2s"
};
function slow($this){
var boxA = document.getElementById("boxA");
boxA.style.animationDuration=".8s"
}
function nomal($this){
var boxA = document.getElementById("boxA");
boxA.style.animationDuration=".5s"
}
附上github地址
下一章：CSS3 3D旋转盒子加缩放
扫一扫
697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
