CSSの1篇の文章はシリーズの7を理解します:アニメーションの効果animation、あなたのホームページを動かします
16278 ワード
一、意味:ダイナミック効果を増加する遷移:transition アニメーション:animation 変形:transform
CSS
1. transition： ， 。 （hover）
|---transition-property:
|---all， 。
|---transition-duration:
|---transition-delay:
|---transition-timing-function: （ ）
|---steps(n,start)， ，
， （hover）
transition:2s margin-left 1s cubic-bezier(.24,.95,.82,-0.88);
2. animation： ， 。 。
|---animation-name: ， 。
|---animation-duration、animation-delay、animation-timing-function
|---animation-iteration-count: 。infinite
|---animation-direction:
|--normal
|--reverse
|--alternate
|--reverse-alternate
|---animation-fill-mode:
|---none
|---forwards：
|---backwards：
|---both
3. ：transform, ,
3.1 （ ）
|--- translateX(100px/50%)
|--- translateY()
|--- translateZ()
3.2 , ，
|--rotateX(180deg/2turn)
|--rotateY()
|--rotateZ()
3.3
|--scaleX()
|--scaleY()
|--scale()
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
/*1. */
/* body ， */
body{
width: 800px;
height: 1000px;
}
/* */
.box1-transition{
width: 100px;
height: 100px;
background-color:chartreuse;
transition-property: all;
transition-duration: 2s;
transition-delay:1s;
transition-timing-function: steps(3,end);
}
/* ， body，box1 700px*/
body:hover .box1-transition{
margin-left: 300px;
}
/*2. */
.box2-animation{
margin-top:300px;
animation: animation-test 2s infinite 1s alternate-reverse;
}
@keyframes animation-test{
from{
margin-left:0px;
width: 100px;
height: 100px;
background-color: chartreuse;
}
to{
margin-left:300px;
width: 200px;
height: 300px;
background-color: red;
}
}
/*3. */
.box3{
width: 100px;
height: 100px;
background-color: goldenrod;
}
.box3:hover{
transform:translateY(5%);
box-shadow:0 0 10px rgb(0,0,0,.7);
}
/*4. */
html{
perspective: 800px;
}
.box3-rotate{
width: 300px;
height: 300px;
}
body:hover .box3-rotate{
transform: rotateY(180deg);
}
style>
head>
<body>
<div class="box1-transition">div>
<div class="box3">div>
<div class="box3-rotate"><img src="./an.jpg" alt="">div>
<div class="box2-animation">div>
body>
html>