< ! 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>
