Animation动画
动画序列+配置动画
1、定义动画轨迹
①@keyframes name{
from{
开始位置
}
to{
结束位置
}
}
②@keyframes name{
0%{ }
50%{ }
100%{ }
}
2、元素执行轨迹
div{
animation-name:name;
animation-duration: number s/ms;
animation-delay:number s/ms;
animation-timing-function:ease/ease-in/ease-out/ease-in-out/linear
animation-iteration-count:number/infinite
animation-direction:reverse/alternate/alternate-reverse
animation-fill-mode:forwards/backwards
}
1、(from-to)方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
/* 执行动画 */
animation-name: move;
/* 动画持续时间 */
animation-duration: 3s;
}
/* 1、定义动画轨迹 */
@keyframes move{
from{
margin-left: 0px;
background-color: aquamarine;
}
to{
margin-left: 300px;
background-color: brown;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2、 (%)动画方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
/* 执行动画 */
animation-name: move;
/* 动画持续时间 */
animation-duration: 3s;
/* 延迟时间 */
animation-delay: 3s;
/* 动画执行次数 无限循环:infinite*/
animation-iteration-count: 2;
/* 设置动画方向 reverse、alternate、alternate-reverse */
animation-direction: reverse;
/* 执行前、执行后停留位置 backwards、forwards*/
animation-fill-mode: forwards;
}
/* 1、定义动画轨迹 */
@keyframes move{
0%{
margin-left: 0px;
background-color: aquamarine;
}
50%{
background-color: thistle;
}
100%{
margin-left: 300px;
background-color: pink;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
多个div动画---多个div块用不同的速度曲线滑到同一地方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: tomato;
margin: 10px;
animation-name: move;
animation-duration: 5s;
animation-iteration-count: infinite;
}
div:first-child{
/* 动画速度曲线 */
animation-timing-function: ease;
}
div:nth-child(2){
animation-timing-function: ease-in;
}
div:nth-child(3){
animation-timing-function: ease-out;
}
div:nth-child(4){
animation-timing-function: ease-in-out;
}
div:last-child{
animation-timing-function: linear;
}
@keyframes move{
from{
margin-left: 0px;
background-color:tomato;
}
to{
margin-left:500px;
background-color: tan;
}
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<link rel="shortcut icon" type='images/-icon' href="favicon.ico">
<style>
div#outer{
width: 400px;
height: 150px;
border: 1px solid tomato;
margin:0 auto;
/* 子元素超出部分隐藏 */
overflow: hidden;
}
div.move{
width: 2000px;
height: 150px;
background-color: tomato;
animation-name: move;
animation-duration: 10s;
animation-timing-function: steps(5);
animation-iteration-count: infinite;
}
div.move div{
width: 400px;
height: 150px;
float: left;
color: wheat;
font-size: 40px;
}
@keyframes move{
form{
margin-left: 0px;
}
to{
margin-left: -2000px;
}
}
</style>
</head>
<body>
<div id="outer">
<div class="move">
<div style="background-color: tomato;">div1</div>
<div style="background-color: orange;">div2</div>
<div style="background-color:gold ;">div3</div>
<div style="background-color:yellowgreen ;">div4</div>
<div style="background-color: teal;" >div5</div>
</div>
</div>
</body>
</html>
西游
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>梦幻西游</title>
<style>
*{
margin: 0px;
padding: 0px;
}
html,body{
height: 100%;
}
div.bg{
height: 100%;
background-image: url('./background.jpg');
animation-name: bg;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
div.content{
position: absolute;
left: 350px;
bottom: 300px;
}
div.content li{
list-style: none;
width: 200px;
height: 180px;
/* background-color: red; */
margin-right: 50px;
float: left;
overflow: hidden;
}
div.content li div{
width: 1600px;
height: 180px;
/* background-color: aquamarine; */
animation-name: roles;
animation-duration: 1s;
animation-timing-function: steps(8);
animation-iteration-count: infinite;
}
div.content li div img{
width: 1600px;
height: 180px;
}
@keyframes roles{
from{
margin-left: 0px;
}
to{
margin-left: -1600px;
}
}
@keyframes bg{
from{
margin-left: -2000px;
}
to{
margin-left: 0px;
}
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="content">
<ul>
<li>
<div>
<img src="./wk.png" alt="">
</div>
</li>
<li>
<div>
<img src="./bj.png" alt="">
</div>
</li>
<li>
<div><img src="./tc.png" alt=""></div>
</li>
<li>
<div>
<img src="sc.png"">
</div>
</li>
</ul>
</div>
</body>
</html>
呼吸灯:
1.外圆
1.扩大10px
2.缩小10px
3.保持不动
2.内圆
1.外圆扩大的同时,内圆缩小10px
2.外圆缩小的同时,内圆扩大10px
3.内圆缩小12px
4.内圆放大12px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>呼吸灯</title>
<style>
*{
box-sizing:border-box;
}
div.article{
width: 200px;
height: 300px;
background-color: black;
margin:0 auto;
}
div.top{
width: 200px;
height: 200px;
padding: 20px;
animation-name: outer;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
div#outer{
height: 100%;
border: 5px solid whitesmoke;
border-radius: 50%;
padding: 20px;
animation-name: inner;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
div#inner{
height: 100%;
border: 5px solid wheat;
border-radius: 50%;
}
div.text{
color:white;
text-align:center;
}
/* 外圆 */
@keyframes outer{
25%{
padding: 10px;
}
50%{
padding: 20px;
}
100%{
padding: 20px;
}
}
/* 内圆 */
@keyframes inner{
25%{
padding: 30px;
}
50%{
padding: 20px;
}
75%{
padding: 32px;
}
100%{
padding: 20px;
}
}
</style>
</head>
<body>
<div class="article">
<div class="top">
<div id="outer">
<div id="inner"></div>
</div>
</div>
<div class="text">hi!</div>
</div>
</body>
</html>
========================================================================
transitions动画
transitions 提供了一种在更改CSS属性时控制动画速度的方法
可以决定哪些属性发生动画效果 (明确地列出这些属性),何时开始 (设 置 delay),持续多久 (设置 duration) 以及如何动画 (定义timing funtion,比如匀速 地或先快后慢)。
1、鼠标点击后图片宽高背景颜色发生变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition</title>
<style>
div{
width: 100px;
height: 100px;
background-color: rgb(204, 241, 229);
/* 指定过渡时长 */
transition-duration: 3s;
/* 指定哪个属性用于过渡,没有指定的瞬间变化,取值有width/height/background-color/all */
transition-property: all;
/* 指定过渡延迟的时长 */
transition-delay: 3s;
/* 运动速度曲线的函数 ease/ease-in/ease-out/ease-in-out/liner*/
transition-timing-function: linear;
}
div:hover{
width: 200px;
height: 200px;
background-color: rgb(202, 110, 110);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
2、鼠标点击一张图片后转到另一张图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition</title>
<style>
div{
width: 800px;
height: 500px;
background-color: rgb(204, 241, 229);
background-image: url('./1.jpg');
}
div:hover{
background-image: url('./2.jpg');
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
3、点击图片后图片放大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition</title>
<style>
div{
width: 800px;
height: 500px;
background-color: rgb(204, 241, 229);
/* 添加过渡效果 */
transition-property: all;
transition-duration: 3s;
transition-timing-function: linear;
/* 超出父元素的子元素隐藏(因为img在慢慢变大)如果不设置hidden子元素会超过父元素 */
overflow: hidden;
}
div img{
width: 800px;
height: 500px;
transition-property: all;
transition-duration: 2s;
transition-timing-function: linear;
}
img:hover{
width: 820px;
height: 520px;
}
</style>
</head>
<body>
<div>
<img src="./2.jpg" alt="">
</div>
</body>
</html>
========================================================================
变形效果
1、旋转 x/y/z轴旋转
效果:
x轴旋转 高度改变
y轴旋转 宽度改变
z轴旋转 位置旋转(顺时针)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
margin: 120px;
border-left:2px solid aquamarine;
border-top:2px solid blueviolet;
border-right:2px solid tan;
border-bottom:2px solid tomato;
/* transform: rotateX(60deg);
transform: rotateY(180deg);
transform: rotateZ(180deg); */
}
div.one{
/* 绕X轴旋转,高度发生改变,0~90°越来越矮,90°时消失(没有厚度)
90~180°慢慢变高,180°时上下边框互换 */
transform: rotateX(60deg);
}
div.two{
/* 绕Y轴旋转,宽度改变,0~90°越来越窄,90°时消失,90~180°越来越宽
180°时左右边框互换 */
transform: rotateY(0deg);
}
div.three{
/* 绕Z轴顺时针旋转,中心、大小没有改变 */
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
2、倾斜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倾斜</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
margin: 120px;
float: left;
}
/* 水平方向不变,垂直方向倾斜,从左上角开始倾斜 */
div.one{
transform: skewX(20deg);
}
/* 垂直方向不变,水平方向倾斜 */
div.two{
transform: skewY(20deg);
}
/* 都变 */
div.three{
transform:skew(20deg,20deg);
}
</style>
</head>
<body>
<div></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
3、缩放
```css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>缩放</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
margin: 120px;
float: left;
}
/* 等比例缩小 */
div.one{
transform: scale(0.5,0.5);
}
/* 等比例放大两倍 */
div.two{
transform: scale(2,2);
}
/* 只缩放长/宽 */
div.three{
transform:scale(2,1);
}
</style>
</head>
<body>
<div></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
以下是要用到的图片