After the last article , Let's review what we learned before
01, transition
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>Document</title> <style> div { width: 100px; height: 100px;
background-color: pink; transition: all .3s; /* Transitional writing itself is Who does animation to write on who s ms*/ }
div:hover { /*background: green no-repeat url();*/ background: green ;
/*transform: translate(100px, 100px); only x y The default is 0 transform: scale(1.3); only x y
default Equal scale */ transform: translate(100px, 100px) scale(0.3) rotate(45deg);
/* The order matters before Zoom after move */ } </style> </head> <body> <div> </div> </body> </html>

02, Experience animation
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>03 Experience animation </title>
<style> div{ width: 100px; height: 100px; background-color: pink; position:
absolute; left: 0; /* Call animation */ /* animation: Animation name Take time Motion curve When does it start Playback times Is it in the opposite direction */
animation: move 2s ease 0s infinite alternate; -webkit-animation: move 2s ease
0s infinite alternate; } /* Declaration animation Keyframes @keyframes Animation name {} */ @keyframes move{
from{ left: 0; background-color: pink; } to{ left: 1000px; background-color:
yellow; } } @-webkit-keyframes move{ from{ left: 0; background-color: yellow; }
to{ left: 1000px; background-color: yellow; } } @-ms-keyframes move{ from{
left: 0; background-color: pink; } to{ left: 1000px; background-color: yellow;
} } </style> </head> <body> <div></div> </body> </html>

03, heartbeat
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>04 heartbeat </title>
<style> img{ width: 400px; height: auto; /* animation: Animation name Take time Motion curve When does it start Playback times
Is it in the opposite direction */ animation: heart 0.5s infinite; } div{ width: 100px; height: 100px;
background-color: pink; margin: 100px auto; animation: heart 0.5s
infinite;// One is called heart Animation of every other 0.5s Perform animation Infinite times } @keyframes heart{ 0%{ transform:
scale(1); } 50%{ transform: scale(1.1); } 100%{ transform: scale(1); } }
</style> </head> <body> <img src="../images/1.jpg" height="744" width="800"
alt="loading" /> <div></div> </body> </html>

05,sea sea
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>Document</title> <style> * { margin: 0; padding: 0; } html, body {
width: 100%; height: 100%; background-color: #0EA9B1; overflow: hidden; } img {
width: 100%; height: auto; position: absolute; bottom: 0; left: 0; }
img:first-child { animation: move 2s linear infinite; } img:last-child {
animation: move 2s linear 0.3s infinite; } .sun { width: 100px; height: 100px;
/*background-color: pink;*/ margin: 100px; position: relative; } .sun::before,
.sun::after { content: ""; position: absolute; top: 50%; left: 50%; width:
50px; height: 50px; transform: translate(-50%, -50%); background: rgba(255,
255, 255, 0.8); border-radius: 50%; animation: sun 2s infinite; } .sun::after {
width: 80px; height: 80px; background: rgba(255, 255, 255, 0.6); animation: sun
3s infinite; } @keyframes move { 0% { bottom: 0; } 50% { bottom: -50px; } 100%
{ bottom: 0; } } @keyframes sun { 0% { transform:translate(-50%, -50%)
scale(1); box-shadow: 0px 0px 5px rgba(255,255,255,0.7); } 50% {
transform:translate(-50%, -50%) scale(1.1); box-shadow: 0px 0px 30px
rgba(255,255,255,0.7); } 100% { transform:translate(-50%, -50%) scale(1);
box-shadow: 0px 0px 5px rgba(255,255,255,0.7); } } </style> </head> <body> <div
class="sun"></div> <img src="../images/1.png" height="211" width="2000"
alt="loading"> <img src="../images/2.png" height="211" width="2000"
alt="loading"> </body> </html>

06, Three column equal width layout
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>07 Three column equal width layout </title>
<style> section{ width: 80%; height: 150px; margin: 100px auto; } section div{
width: 30%; height: 100%; float: left; margin: 0 10px; } section
div:nth-child(1){ background-color: pink; } section div:nth-child(2){
background-color: purple; } section div:nth-child(3){ background-color: blue; }
</style> </head> <body> <section> <div>1</div> <div>2</div> <div>3</div>
</section> </body> </html>

07,css3 Flexible layout
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3 Flexible layout </title>
<style> section{ width: 80%; height: 150px; margin: 100px auto; /* Father added Flexible layout */
display: flex; } section div{ height: 100%; flex: 1;// Children's share } section
div:nth-child(1){ background-color: pink; flex: 2; } section div:nth-child(2){
background-color: purple; margin: 0 10px; } section div:nth-child(3){
background-color: blue; flex: 3; } </style> </head> <body> <section>
<div>1</div> <div>2</div> <div>3</div> </section> </body> </html>

08,css3 Fixed expansion layout
<!DOCTYPE html> <html> <head> <meta charset="utf-8">
<title>css3 Expansion layout fixed width </title> <style> section{ width: 80%; height: 150px; margin:
100px auto; /* Father added Flexible layout */ display: flex; min-width:
500px;//section The smallest width is 500px } section div{ height: 100%; /* flex:1 Children's share */ }
section div:nth-child(1){ background-color: pink; width: 200px; } section
div:nth-child(2){ background-color: purple; margin: 0 10px; flex: 2; } section
div:nth-child(3){ background-color: blue; flex: 1; } </style> </head> <body>
<section> <div>1</div> <div>2</div> <div>3</div> </section> </body> </html>

09,css3 Vertical distribution of expansion layout
<!DOCTYPE html> <html> <head> <meta charset="utf-8">
<title>css3 Vertical distribution of expansion layout </title> <style> section{ width: 80%; height: 150px; margin:
100px auto; /* Father added Flexible layout */ display: flex; min-width: 500px;
//section The smallest width is 500px flex-direction: column;// vertical distribution } section div{ flex:
1;// Children's share } section div:nth-child(1){ background-color: pink; } section
div:nth-child(2){ background-color: purple; } section div:nth-child(3){
background-color: blue; } </style> </head> <body> <section> <div>1</div>
<div>2</div> <div>3</div> </section> </body> </html>

10, ctrip
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>11 ctrip </title>
<style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body {
min-width: 320px; max-width: 540px; margin: 0 auto; font: normal 14px/1.5
Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei; } header {
height: 108px; } header img { height: 100%; width: auto; } nav { border: 1px
solid #ccc; padding: 4px; } nav a { text-decoration: none; color: #fff;
text-shadow: 0 2px 1px rgba(0,0,0,.2); /*text-shadow: Horizontal position Vertical position Fuzzy distance Shadow color ;*/ }
.row { height: 90px; display: flex; /* Flexible layout */ border-radius: 5px; overflow:
hidden; margin-bottom: 5px; } .row div { height: 100%; flex: 1;
background-color: #FF697A; border-right: 1px solid #fff; } .row
div:nth-child(3) { border-right: 0; } .row div a { display: block; width: 100%;
height: 100%; } .row33 { display: flex; flex-direction: column; } .row33 a {
flex: 1; text-align: center; line-height: 45px; } .row33 a:first-child {
border-bottom: 1px solid #fff; } .row em { display: block; height: 45px;
text-align: center; line-height: 45px; font-style: normal; } .row i { display:
block; width: 43px; height: 43px; margin: -5px auto 0; background:
url(../images/ctrip.png) no-repeat 0 -127px; -webkit-background-size: 104px; /*
prefix */ -moz-background-size: 104px; /* prefix Foxes */ -ms-background-size: 104px; /*
prefix ie */ -o-background-size: 104px; /* prefix ie */ background-size: 104px; } .row
.icon-flight { background-position: 0 -288px; } </style> </head> <body>
<header> <img src="../images/banner.jpg" height="307" width="1536" alt="">
</header> <nav> <div class="row"> <div> <a href="#"> <em> hotel </em> <i></i> </a>
</div> <div class="row33"> <a href="#"> Overseas hotel </a> <a href="#"> Special Hotel </a> </div>
<div class="row33"> <a href="#"> Group buying </a> <a href="#"> Tongfu Inn </a> </div> </div> <div
class="row"> <div> <a href="#"> <em> hotel </em> <i class="icon-flight"></i> </a>
</div> <div class="row33"> <a href="#"> Overseas hotel </a> <a href="#"> Special Hotel </a> </div>
<div class="row33"> <a href="#"> Group buying </a> <a href="#"> Tongfu Inn </a> </div> </div> <div
class="row"> <div> <a href="#"> <em> hotel </em> <i></i> </a> </div> <div
class="row33"> <a href="#"> Overseas hotel </a> <a href="#"> Special Hotel </a> </div> <div
class="row33"> <a href="#"> Group buying </a> <a href="#"> Tongfu Inn </a> </div> </div> <div
class="row"> <div class="row33"> <a href="#"> Overseas hotel </a> <a href="#"> Special Hotel </a>
</div> <div class="row33"> <a href="#"> Overseas hotel </a> <a href="#"> Special Hotel </a> </div>
<div class="row33"> <a href="#"> Group buying </a> <a href="#"> Tongfu Inn </a> </div> </div>
</nav> </body> </html>

11, Background zoom
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>12 Background zoom </title>
<style> div{ width: 400px; height: 400px; background: url(../images/x.jpg)
no-repeat; /* colour picture Tile position roll */ border: 1px solid red; /* background-size: w h
Specifies the size of the background image ; */ /* background-size:100px 100px; */ /* background-size:100px;
If there is only one value The latter value defaults to auto Equal scale */ /* background-size:cover; */ background-size:
contain; } </style> </head> <body> <div></div> </body> </html>

12, background gradient
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>13 background gradient </title>
<style> div{ width: 300px; height: 100px; /*
background:-webkit-linear-gradient( The starting position of the gradient , Color position , Location color ) */ background:
-webkit-linear-gradient(top,red 0%,green 50%,blue 100%); } </style> </head>
<body> <div></div> </body> </html>

13, Multi background
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>14 Multi background </title>
<style> div{ border: 1px solid #000; width: 600px; height: 600px; background:
url(../images/2.jpg) no-repeat top left,url(../images/3.jpg) no-repeat bottom
right; } </style> </head> <body> <div></div> </body> </html>

14, Bubbles
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>15 Bubbles </title>
<style> div{ width: 300px; height: 80px; border-radius: 20px;
background:url(../images/paopao.png) no-repeat top
left,url(../images/paopao.png) no-repeat right bottom; background-color: blue;
transition: all 3s; } div:hover{ background-position: right bottom,top left; }
</style> </head> <body> <div></div> </body> </html>

15, transparency
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>16 transparency </title>
<style> div{ width: 100px ; height: 100px; background-color: red; /*
background:rgba(255,0,0,.2) The background of the box is transparent */ opacity: 0.2;// The box is translucent /*
filter:alpha(opacity=20) ie 6 Writing method */ } </style> </head> <body> <div></div>
<p>12312312</p> </body> </html>

16,rotateX
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>17rotateX</title>
<style> img{ transition: all 2s; } img:hover{ transform: rotateX(360deg); }
</style> </head> <body> <img src="../images/x.jpg" height="226" width="300"
alt="loading" /> </body> </html>

17,rotateY
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>18rotateY</title>
<style> body{ perspective: 500px; } img{ transition: all 2s; } img:hover{
transform: rotateY(360deg); } </style> </head> <body> <img
src="../images/1498446043198.png" alt="loading" /> </body> </html>

18, A box flipped on both sides
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>18rotateY</title>
<style> body{ perspective: 500px; } img{ transition: all 2s; } img:hover{
transform: rotateY(360deg); } </style> </head> <body> <img
src="../images/1498446043198.png" alt="loading" /> </body> </html>

Technology
©2019-2020 Toolsou All rights reserved,
c Language to achieve mine clearance Games and mine source code Node.js Middle template engine 3 species Python data structure ,13 Creation methods , This is the conclusion , Great ! The situation of receiving and receiving multi-path git It's set correctly ssh, But it still prompts Permission denied (publickey) new iPhone I won't support it 5G Will lead to further decline in shipment C# Sorting method of Chinese Dictionaries 10909 rice ! Chinese fighter successfully landed in Mariana Trench MySQL8.0MGR Single owner / Multi master installation and switching Java Poor reflection performance ?