< ! DOCTYPE html>
< html> < head> < meta charset= "utf-8" / > < title> < / title> < style> * { margin: 0 ; padding: 0 ; } body{ width: 100 % ; height: 100 vh; } . container{ position: relative; width: 100 % ; height: 100 vh; display: flex; justify- content: center; align- items: center; background- color: #000 ; } . circle{ display: flex; justify- content: center; align- items: center; position: absolute; width: 200 px; height: 200 px; border- radius: 50 % ; background- image: linear- gradient ( 0 deg, rgb ( 47 , 102 , 255 ) , rgb ( 153 , 64 , 255 ) 30 % , rgb ( 238 , 55 , 255 ) 60 % , rgb ( 255 , 0 , 76 ) 100 % ) ; animation: rotate 1 s linear infinite; } . circle: : before{ content: "" ; position: absolute; width: 200 px; height: 200 px; border- radius: 50 % ; background- image: linear- gradient ( 0 deg, rgb ( 47 , 102 , 255 ) , rgb ( 153 , 64 , 255 ) 30 % , rgb ( 238 , 55 , 255 ) 60 % , rgb ( 255 , 0 , 76 ) 100 % ) ; filter: blur ( 35 px) ; } . circle: : after{ content: "" ; position: absolute; width: 160 px; height: 160 px; border- radius: 50 % ; background: #000 ; } span{ position: absolute; color: #fff; } @keyframes rotate{ 0 % { transform: rotate ( 0 deg) ; } 100 % { transform: rotate ( 360 deg) ; } } < / style> < / head> < body> < div class = "container" > < div class = "circle" > < / div> < / div> < / body>
< / html>
< ! DOCTYPE html>
< html> < head> < meta charset= "utf-8" / > < title> < / title> < style> * { margin: 0 ; padding: 0 ; box- sizing: border- box; } body{ background: #000 ; } . container{ position: relative; width: 100 % ; height: 100 vh; } . container . box{ position: absolute; top: calc ( 50 % - 200 px ) ; left: calc ( 50 % - 200 px ) ; width: 400 px; height: 400 px; transform- style: preserve- 3 d; transform: rotateX ( - 20 deg) rotateY ( 23 deg) translate3d ( 0 , 0 , - 12 px) ; } . container . box > div{ position: absolute; top: 0 ; left: 0 ; width: 100 % ; height: 100 % ; transform- style: preserve- 3 d; } . container . box > div span{ position: absolute; top: 0 ; left: 0 ; display: block; width: 100 % ; height: 100 % ; border: 1 px solid rgba ( 0 , 0 , 0 , 1 ) ; background: #ccc; } . container . box > div span video{ position: absolute; top: 0 ; left: 0 ; width: 100 % ; height: 100 % ; object- fit: cover; filter: blur ( 0 ) ; } . container video{ position: absolute; top: 0 ; left: 0 ; width: 100 % ; height: 100 % ; object- fit: cover; filter: blur ( 20 px) ; } . container . box > div span: nth- child ( 1 ) { transform: rotateX ( 0 deg) translate3d ( 0 , 0 , 200 px) ; } . container . box > div span: nth- child ( 2 ) { transform: rotateX ( - 90 deg) translate3d ( 0 , 0 , - 200 px) ; } . container . box > div span: nth- child ( 2 ) video{ transform: rotateY ( 180 deg) ; } . container . box > div span: nth- child ( 3 ) { transform: rotateY ( - 90 deg) translate3d ( 0 , 0 , 200 px) ; } < / style> < / head> < body> < div class = "container" > < span> < video src= "./video.mp4" autoplay= "" muted= "" loop= "" > < / video> < / span> < div class = "box" > < div> < span> < video src= "./video.mp4" autoplay= "" muted= "" loop= "" > < / video> < / span> < span> < video src= "./video.mp4" autoplay= "" muted= "" loop= "" > < / video> < / span> < span> < video src= "./video.mp4" autoplay= "" muted= "" loop= "" > < / video> < / span> < / div> < / div> < / div> < / body>
< / html>
< ! DOCTYPE html>
< html> < head> < meta charset= "utf-8" / > < title> < / title> < style> body{ margin: 0 ; padding: 0 ; background: #3498 db; } . container{ position: absolute; top: 50 % ; left: 50 % ; transform: translate ( - 50 % , - 50 % ) rotateX ( 70 deg) ; } . ripple{ position: fixed; top: 0 ; transform: translateX ( - 50 % ) ; width: 20 px; height: 20 px; border- radius: 50 % ; animation: ripple 4 s linear infinite; } . r2{ animation- delay: 0.8 s; } . r3{ animation- delay: 1.6 s; } . r4{ animation- delay: 2.4 s; } . r5{ animation- delay: 3.2 s; } . r6{ animation- delay: 4 s; } @keyframes ripple{ from { border: 4 px solid #8e44 ad; background: #9 b59b670; } to{ border: 0 px solid #8E44 AD; background: #9 b59b670; width: 400 px; height: 400 px; top: 20 px; opacity: 0 ; } } < / style> < / head> < body> < div class = "container" > < span class = "ripple r1" > < / span> < span class = "ripple r2" > < / span> < span class = "ripple r3" > < / span> < span class = "ripple r4" > < / span> < span class = "ripple r5" > < / span> < span class = "ripple r6" > < / span> < / div> < / body>
< / html>
< ! DOCTYPE html>
< html> < head> < meta charset= "utf-8" > < title> < / title> < style> body{ margin: 0 ; padding: 0 ; background: #2980 b9; } . loading{ position: absolute; top: 50 % ; left: 50 % ; transform: translate ( - 50 % , - 50 % ) ; height: 40 px; display: flex; align- items: center; } . ogj{ width: 6 px; height: 40 px; background: white; margin: 0 3 px; border- radius: 10 px; animation: loading 0.8 s infinite; } . ogj: nth- child ( 2 ) { animation- delay: 0.1 s; } . ogj: nth- child ( 3 ) { animation- delay: 0.2 s; } . ogj: nth- child ( 4 ) { animation- delay: 0.3 s; } . ogj: nth- child ( 5 ) { animation- delay: 0.4 s; } . ogj: nth- child ( 6 ) { animation- delay: 0.5 s; } . ogj: nth- child ( 7 ) { animation- delay: 0.6 s; } . ogj: nth- child ( 8 ) { animation- delay: 0.7 s; } @keyframes loading{ 0 % { heigth: 0 ; } 50 % { height: 40 px; } 100 % { height: 0 ; } } < / style> < / head> < body> < div class = "loading" > < div class = "ogj" > < / div> < div class = "ogj" > < / div> < div class = "ogj" > < / div> < div class = "ogj" > < / div> < div class = "ogj" > < / div> < div class = "ogj" > < / div> < div class = "ogj" > < / div> < div class = "ogj" > < / div> < / div> < / body>
< / html>
< ! DOCTYPE html>
< html> < head> < meta charset= "utf-8" / > < title> < / title> < style> * { margin: 0 ; padding: 0 ; } body{ display: flex; justify- content: center; align- items: center; min- height: 100 vh; background: rgb ( 250 , 250 , 250 ) ; background- attachment: fixed; background- size: cover; } . book{ position: relative; top: 0 ; width: 400 px; height: 600 px; background: #fff; transform: rotate ( - 37.5 deg) skewX ( 10 deg) ; box- shadow: - 35 px 35 px 50 px rgba ( 0 , 0 , 0 , 1 ) ; transition: 0.5 s; } . book: hover{ transform: rotate ( - 37.5 deg) skewX ( 10 deg) translate ( 20 px, - 20 px) ; box- shadow: - 50 px 50 px 100 px rgba ( 0 , 0 , 0 , 1 ) ; } . book: before{ content: '' ; width: 30 px; height: 100 % ; background: url ( https: / / ss0. bdstatic. com/ 94 oJfD_bAAcT8t7mm9GUKT- xh_/ timg? image& quality= 100 & size= b4000_4000& sec= 1588900098 & di= b41905c683262ede66a811bc539d8368& src= http: / / hbimg. b0. upaiyun. com/ 6 fc64b52819c57b640f8d385c87f20ef740e728612a9e- hI3dqx_fw658) ; position: absolute; top: 0 ; left: 0 ; transform: skewY ( - 45 deg) translate ( - 30 px, - 15 px) ; box- shadow: inset - 10 px 0 20 px rgba ( 0 , 0 , 0 , 0.2 ) ; } . book: after{ content: '' ; width: 100 % ; height: 30 px; background: #ccc; position: absolute; bottom: 0 ; left: 0 ; transform: skewX ( - 45 deg) translate ( 15 px, 30 px) ; } . book h2{ position: absolute; bottom: 100 px; left: 35 px; font- size: 5 em; line- height: 1 em; color: #fff; } . book h2 span{ background: url ( https: / / ss0. bdstatic. com/ 94 oJfD_bAAcT8t7mm9GUKT- xh_/ timg? image& quality= 100 & size= b4000_4000& sec= 1588900098 & di= b41905c683262ede66a811bc539d8368& src= http: / / hbimg. b0. upaiyun. com/ 6 fc64b52819c57b640f8d385c87f20ef740e728612a9e- hI3dqx_fw658) ; background- attachment: fixed; - webkit- background- clip: text; - webkit- text- fill- color: transparent; } . book . writer{ position: absolute; bottom: 20 px; right: 20 px; color: #3262626 ; font- size: 0.6 em; padding- top: 5 px; font- weight: 500 ; border- top- left- radius: 1 px soild #262626 ; } . book . writer i{ font- weight: 700 ; } . book . cover{ position: absolute; top: 0 ; left: 0 ; width: 100 % ; height: 70 % ; background: url ( https: / / ss0. bdstatic. com/ 94 oJfD_bAAcT8t7mm9GUKT- xh_/ timg? image& quality= 100 & size= b4000_4000& sec= 1588900098 & di= b41905c683262ede66a811bc539d8368& src= http: / / hbimg. b0. upaiyun. com/ 6 fc64b52819c57b640f8d385c87f20ef740e728612a9e- hI3dqx_fw658) ; background- size: cover; } < / style> < / head> < body> < div class = "book" > < div class = "cover" > < / div> < h2> Book< / br> < span> Mockup< / span> < / h2> < span class = "writer" > Designed By < i> Muhammad Irshad< / i> < / span> < / div> < / body>
< / html>
< ! DOCTYPE html>
< html> < head> < meta charset= "utf-8" / > < title> < / title> < style> body{ margin: 0 ; padding: 0 ; background: #f1f1f1; } . loading{ position: absolute; top: 50 % ; left: 50 % ; transform: translate ( - 50 % , - 50 % ) rotate ( 75 deg) ; width: 15 px; height: 15 px; } . loading: : before, . loading: : after{ content: "" ; position: absolute; top: 50 % ; left: 50 % ; transform: translate ( - 50 % , - 50 % ) ; width: 15 px; height: 15 px; border- radius: 15 px; animation: loading 1.5 s infinite linear; } . loading: : before{ box- shadow: 15 px 15 px #e77f67, - 15 px - 15 px #778 beb; } . loading: : after{ box- shadow: 15 px 15 px #f8a5c2, - 15 px - 15 px #f5cd79; transform: translate ( - 50 % , - 50 % ) rotate ( 90 deg) ; } @keyframes loading{ 50 % { height: 45 px; } } < / style> < / head> < body> < div class = "loading" > < / div> < / body>
< / html>
< ! DOCTYPE html>
< html> < head> < meta charset= "utf-8" / > < title> < / title> < style> body{ margin: 0 ; padding: 0 ; background: #262626 ; } ul{ position: absolute; top: 50 % ; left: 50 % ; transform: translate ( - 50 % , - 50 % ) ; margin: 0 ; padding: 0 ; display: flex; } ul li{ list- style: none; width: 40 px; height: 40 px; background: #fff; border- radius: 50 % ; animation: animate 1.6 s ease- in - out infinite; } @keyframes animate{ 0 % , 40 % , 100 % { transform: scale ( 0.2 ) ; } 20 % { transform: scale ( 1 ) ; } } ul li: nth- child ( 1 ) { animation- delay: - 1.4 s; background: #ffff00; box- shadow: 0 0 50 px #FFFF00 ; } ul li: nth- child ( 2 ) { animation- delay: - 1.2 s; background: #76 ff03; box- shadow: 0 0 50 px #76 ff03; } ul li: nth- child ( 3 ) { animation- delay: - 1 s; background: #f06292; box- shadow: 0 0 50 px #f06292; } ul li: nth- child ( 4 ) { animation- delay: - 0.8 s; background: #4 fc3f7; box- shadow: 0 0 50 px #4 fc3f7; } ul li: nth- child ( 5 ) { animation- delay: - 0.6 s; background: #ba68c8; box- shadow: 0 0 50 px #ba68c8; } ul li: nth- child ( 6 ) { animation- delay: - 0.4 s; background: #f57c00; box- shadow: 0 0 50 px #f57c00; } ul li: nth- child ( 7 ) { animation- delay: - 0.2 s; background: #673 ab7; box- shadow: 0 0 50 px #673 ab7; } < / style> < / head> < body> < ul> < li> < / li> < li> < / li> < li> < / li> < li> < / li> < li> < / li> < li> < / li> < li> < / li> < / ul> < / body>
< / html>
< ! DOCTYPE html>
< html> < head> < meta charset= "utf-8" / > < title> < / title> < style> * { margin: 0 ; padding: 0 ; } body{ display: flex; justify- content: center; align- items: center; min- height: 100 vh; flex- direction: column; background: #040 d15; } a{ position: relative; display: inline- block; padding: 12 px 36 px; margin: 10 px 0 ; color: #fff; text- decoration: none; text- transform: uppercase; font- size: 18 px; letter- spacing: 2 px; border- radius: 40 px; overflow: hidden; background: linear- gradient ( 90 deg, #0162 c8, #55e7 fc) ; } a: nth- child ( 2 ) { background: linear- gradient ( 90 deg, #755 bea, #ff72c0) ; } span{ position: absolute; background: #fff; transform: translate ( - 50 % , - 50 % ) ; pointer- events: none; border- radius: 50 % ; animation: animate 1 s linear infinite; } @keyframes animate{ 0 % { width: 0 px; height: 0 px; opacity: 0.5 ; } 100 % { width: 500 px; height: 500 px; opacity: 0 ; } } < / style> < / head> < body> < a href= "#" > Button< / a> < a href= "#" > Button< / a> < / body> < script> const button = document. querySelectorAll ( 'a' ) ; button. forEach ( btn => { btn. addEventListener ( 'click' , function ( e ) { let x = e. clientX - e. target. offsetLeft; let y = e. clientY - e. target. offsetTop; let ripples = document. createElement ( 'span' ) ; ripples. style. left = x + 'px' ; ripples. style. top = y + 'px' ; this . appendChild ( ripples) ; setTimeout ( ( ) => { ripples. remove ( ) } , 1000 ) } ) } ) < / script>
< / html>
< ! DOCTYPE html>
< html> < head> < meta charset= "utf-8" / > < title> < / title> < / head> < style> body{ margin: 0 ; padding: 0 ; background: #000 ; } a{ position: absolute; top: 50 % ; left: 50 % ; transform: translate ( - 50 % , - 50 % ) ; width: 200 px; height: 60 px; text- align: center; line- height: 60 px; color: #fff; font- size: 24 px; text- transform: uppercase; text- decoration: none; font- family: sans- serif; box- sizing: border- box; background: linear- gradient ( 90 deg, #03 a9f4, #f441a5, #ffeb3b, #03 a9f4) ; background- size: 400 % ; border- radius: 30 px; } a: hover{ animation: animate 8 s linear infinite; } @keyframes animate{ 0 % { background- position: 0 % ; } 100 % { background- position: 400 % ; } } a: before{ content: '' ; position: absolute; top: - 5 px; left: - 5 px; right: - 5 px; bottom: - 5 px; z- index: - 1 ; background: linear- gradient ( 90 deg, #03 a9f4, #f441a5, #ffeb3b, #03 a9f4) ; background- size: 400 % ; border- radius: 40 px; opacity: 0 ; transition: 0.5 s; } a: hover: before{ opacity: 1 ; filter: blur ( 20 px) ; } < / style> < body> < a href= "#" > Button< / a> < / body>
< / html>
< ! DOCTYPE html>
< html> < head> < meta charset= "utf-8" / > < title> < / title> < / head> < style> body{ margin: 0 ; padding: 0 ; background: #0 c002b; font- family: sans- serif; } a{ position: absolute; top: 50 % ; left: 50 % ; transform: translate ( - 50 % , - 50 % ) ; color: #1670 f0; padding: 30 px 60 px; font- size: 30 px; letter- spacing: 2 px; text- transform: uppercase; text- decoration: none; box- shadow: 0 20 px 50 px rgba ( 0 , 0 , 0 , .5 ) ; overflow: hidden; } a: before{ content: '' ; position: absolute; top: 2 px; left: 2 px; bottom: 2 px; width: 50 % ; background: rgba ( 255 , 255 , 255 , 0.05 ) ; } a span: nth- child ( 1 ) { position: absolute; top: 0 ; left: 0 ; width: 100 % ; height: 2 px; background: linear- gradient ( to right, #0 c002b, #1779 ff) ; animation: animate1 2 s linear infinite; } @keyframes animate1{ 0 % { transform: translateX ( - 100 % ) ; } 100 % { transform: translateX ( 100 % ) ; } } a span: nth- child ( 2 ) { position: absolute; top: 0 ; right: 0 ; width: 2 px; height: 100 % ; background: linear- gradient ( to bottom, #0 c002b, #1779 ff) ; animation: animate2 2 s linear infinite; } @keyframes animate2{ 0 % { transform: translateY ( - 100 % ) ; } 100 % { transform: translateY ( 100 % ) ; } } a span: nth- child ( 3 ) { position: absolute; bottom: 0 ; right: 0 ; width: 100 % ; height: 2 px; background: linear- gradient ( to left, #0 c002b, #1779 ff) ; animation: animate3 2 s linear infinite; } @keyframes animate3{ 0 % { transform: translateX ( 100 % ) ; } 100 % { transform: translateX ( - 100 % ) ; } } a span: nth- child ( 4 ) { position: absolute; top: 0 ; left: 0 ; width: 2 px; height: 100 % ; background: linear- gradient ( to top, #0 c002b, #1779 ff) ; animation: animate4 2 s linear infinite; } @keyframes animate4{ 0 % { transform: translateY ( 100 % ) ; } 100 % { transform: translateY ( - 100 % ) ; } } < / style> < body> < a href= "#" > < span> < / span> < span> < / span> < span> < / span> < span> < / span> button< / a> < / body>
< / html>
< ! DOCTYPE html>
< html> < head> < meta charset= "utf-8" / > < title> 加载中loading效果< / title> < / head> < style> * { margin: 0 ; padding: 0 ; box- sizing: border- box; } body{ width: 100 % ; height: 100 vh; background: #222 ; display: flex; align- items: center; justify- content: center; } . container{ display: flex; } . container . point{ width: 2 em; height: 2 em; border- radius: 50 % ; background: #fff; margin: 1 em; user- select: none; position: relative; } . container . point: : before{ position: absolute; content: '' ; width: 100 % ; height: 100 % ; background: inherit; border- radius: inherit; animation: wave 2.2 s ease- out infinite; } @keyframes wave{ 50 % , 70 % { transform: scale ( 2.5 ) ; } 80 % , 100 % { opacity: 0 ; } } . container . point: nth- child ( 1 ) { background: #7 ef9ff; } . container . point: nth- child ( 2 ) { background: #89 cff0; } . container . point: nth- child ( 3 ) { background: #4682 b4; } . container . point: nth- child ( 4 ) { background: #0 f52ba; } . container . point: nth- child ( 5 ) { background: #000080 ; } . container . point: nth- child ( 1 ) : : before{ animation- delay: 0 s ; } . container . point: nth- child ( 2 ) : : before{ animation- delay: 0.2 s ; } . container . point: nth- child ( 3 ) : : before{ animation- delay: 0.4 s ; } . container . point: nth- child ( 4 ) : : before{ animation- delay: 0.6 s ; } . container . point: nth- child ( 5 ) : : before{ animation- delay: 0.8 s ; } < / style> < body> < div class = "container" > < div class = "point" > < / div> < div class = "point" > < / div> < div class = "point" > < / div> < div class = "point" > < / div> < div class = "point" > < / div> < / div> < / body>
< / html>
![[极客大挑战 2019]BabySQL--详细解析](https://i-blog.csdnimg.cn/direct/0ecf9bfc1159481f85b128a889cfc9cf.png)
