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; Div :hover {/*background: green no-repeat url(); */ background: green ; /*transform: translate(100px, 100px); Transform: scale(1.3); Transform: translate(100px, 100px) Scale (0.3) rotate(45deg); / * order After the first mobile zoom * /} < / style > < / head > < body > < div > < / div > < / body > < / HTML >Copy the code
02. Experience animation
<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <title> height: 100px; background-color: pink; position: absolute; left: 0; */ * Animation: move 2s ease 0s infinite alternate; -webkit-animation: move 2s ease 0s infinite alternate; } */ @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>Copy the code
<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> height: auto; /* Animation: heart 0.5s infinite; } div{ width: 100px; height: 100px; background-color: pink; margin: 100px auto; Animation: 0.5 s infinite heart; } @keyframes heart{0%{transform: scale(1); 50%} {the 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>Copy the code
05, the 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); 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>Copy the code
06 A two-sided box
<! 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>Copy the code