< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 制作竖条加载动画< / title> < style> . animbox { margin : 50px auto; width : 200px; text- align: center; } . animbox > div { background- color: #279fcf; width : 4px; height : 35px; border- radius: 2px; margin : 2px; animation- fill- mode: both; display : inline- block; animation : anim 0 . 9s 0s infinite cubic- bezier ( .11 , .49 , .38 , .78 ) ; } . animbox > : nth- child ( 2 ) , . animbox > : nth- child ( 4 ) { animation- delay: 0 . 25s ! important; } . animbox > : nth- child ( 1 ) , . animbox > : nth- child ( 5 ) { animation- delay: 0 . 5s ! important; } @keyframes anim { 0 % { transform : scaley ( 1 ) ; } 80 % { transform : scaley ( 0.3 ) ; } 90 % { transform : scaley ( 1 ) ; } } < / style>
< / head>
< body> < div class = "animbox" > < div> < / div> < div> < / div> < div> < / div> < div> < / div> < div> < / div> < / div>
< / body>
< / html> < ! DOCTYPE html>
< html lang= "en" > < head> < meta charset= "UTF-8" / > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" / > < title> Document< / title> < style> . box { height : 100 % ; width : 100 % ; position : absolute; background : url ( "https://img0.baidu.com/it/u=2771945787,9120044&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500" ) no- repeat; background- size: cover; animation : fade- away 3s linear forwards; } . text { position : absolute; line- height: 55px; color : #fff; font- size: 36px; text- align: center; left : 50 % ; top : 50 % ; transform : translate ( - 50 % , - 50 % ) ; opacity : 0 ; animation : show 2s cubic- bezier ( 0.74 , - 0.1 , 0.86 , 0.83 ) forwards; } @keyframes fade- away { 30 % { filter : brightness ( 1 ) ; } 100 % { filter : brightness ( 0 ) ; } } @keyframes show { 20 % { opacity : 0 ; } 100 % { opacity : 1 ; } } < / style> < / head> < body> < div class = "container" > < div class = "box" > < / div> < div class = "text" > < p> 电影闭幕效果< / p> < / div> < / div> < / body>
< / html> < ! DOCTYPE html>
< html lang= "en" > < head> < meta charset= "UTF-8" / > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" / > < title> Document< / title> < style> body { background : #222 ; } . arrow { position : absolute; left : 50 % ; top : 50 % ; - webkit- transform- origin: 50 % 50 % ; transform- origin: 50 % 50 % ; - webkit- transform: translate3d ( - 50 % , - 50 % , 0 ) ; transform : translate3d ( - 50 % , - 50 % , 0 ) ; } . arrow- 1 { - webkit- animation: arrow- movement 2s ease- in - out infinite; animation : arrow- movement 2s ease- in - out infinite; } . arrow- 2 { - webkit- animation: arrow- movement 2s 1s ease- in - out infinite; animation : arrow- movement 2s 1s ease- in - out infinite; } . arrow: before, . arrow: after { background : #fff; content : "" ; display : block; height : 3px; position : absolute; top : 0 ; left : 0 ; width : 30px; } . arrow: before { - webkit- transform: rotate ( 45deg) translateX ( - 23 % ) ; transform : rotate ( 45deg) translateX ( - 23 % ) ; - webkit- transform- origin: top left; transform- origin: top left; } . arrow: after { - webkit- transform: rotate ( - 45deg) translateX ( 23 % ) ; transform : rotate ( - 45deg) translateX ( 23 % ) ; - webkit- transform- origin: top right; transform- origin: top right; } @- webkit- keyframes arrow- movement { 0 % { opacity : 0 ; top : 45 % ; } 70 % { opacity : 1 ; } 100 % { opacity : 0 ; } } @keyframes arrow- movement { 0 % { opacity : 0 ; top : 45 % ; } 70 % { opacity : 1 ; } 100 % { opacity : 0 ; } } < / style> < / head> < body> < div class = "arrow arrow-1" > < / div> < div class = "arrow arrow-2" > < / div> < / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" > < head> < meta charset= "UTF-8" / > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" / > < title> Document< / title> < style> . heart- shake { width : 100px; height : 30px; margin : auto; border- radius: 10px; background : #3866ff; color : #ffffff; box- shadow: 0 2px 30px 0 #3866ff63; animation : submitBtn 1 . 5s ease infinite; } @keyframes submitBtn { 0 % { transform : scale ( 1 ) ; } 50 % { transform : scale3d ( .8 , .8 , .8 ) ; } 100 % { transform : scale ( 1 ) ; } } < / style> < / head> < body> < div class = "heart-shake ege" > 按钮心跳动画< / div> < / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 制作水波扩散效果加载动画< / title> < style> . ball{ width : 100px; height : 100px; margin : 50px auto; position : relative; transform : translateY ( - 30px) ; } . ball> div { background- color: #279fcf; border- radius: 100 % ; margin : 2px; position : absolute; left : 15px; top : 15px; opacity : 0 ; width : 60px; height : 60px; animation : anim 1s 0s linear infinite both; } . ball > div: nth- child ( 2 ) { animation- delay: 0 . 2s; } . ball> div: nth- child ( 3 ) { animation- delay: 0 . 4s; } . ball > div: nth- child ( 4 ) { animation- delay: 0 . 6s; } @keyframes anim { 0 % { transform : scale ( 0 ) ; opacity : 0 ; } 5 % { opacity : 1 ; } 100 % { transform : scale ( 1 ) ; opacity : 0 ; } } < / style>
< / head>
< body> < div class = "ball" > < div> < / div> < div> < / div> < div> < / div> < div> < / div> < / div>
< / body>
< / html> < ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 环形加载动画< / title> < style> * { margin : 0 ; padding : 0 ; } body { background : #ffefce; } . cont { width : 100px; height : 100px; position : relative; margin : 100px auto; } . line div { position : absolute; left : 0 ; top : 0 ; width : 4px; height : 100px; } . line div: before, . line div: after { content : '' ; display : block; height : 50 % ; background : #009cda; border- radius: 5px; } . line div: nth- child ( 2 ) { transform : rotate ( 15deg) ; } . line div: nth- child ( 3 ) { transform : rotate ( 30deg) ; } . line div: nth- child ( 4 ) { transform : rotate ( 45deg) ; } . line div: nth- child ( 5 ) { transform : rotate ( 60deg) ; } . line div: nth- child ( 6 ) { transform : rotate ( 75deg) ; } . line div: nth- child ( 7 ) { transform : rotate ( 90deg) ; } . line div: nth- child ( 8 ) { transform : rotate ( 105deg) ; } . line div: nth- child ( 9 ) { transform : rotate ( 120deg) ; } . line div: nth- child ( 10 ) { transform : rotate ( 135deg) ; } . line div: nth- child ( 11 ) { transform : rotate ( 150deg) ; } . line div: nth- child ( 12 ) { transform : rotate ( 165deg) ; } . circle { position : absolute; left : - 15 % ; top : 35 % ; width : 50px; height : 50px; margin : - 9px 0 0 - 9px; background : #ffefce; border- radius: 100 % ; } @keyframes load { 0 % { opacity : 0 ; } 100 % { opacity : 1 ; } } . line div: nth- child ( 1 ) : before { animation : load 1 . 2s linear 0s infinite; } . line div: nth- child ( 2 ) : before { animation : load 1 . 2s linear 0 . 05s infinite; } . line div: nth- child ( 3 ) : before { animation : load 1 . 2s linear 0 . 1s infinite; } . line div: nth- child ( 4 ) : before { animation : load 1 . 2s linear 0 . 15s infinite; } . line div: nth- child ( 5 ) : before { animation : load 1 . 2s linear 0 . 2s infinite; } . line div: nth- child ( 6 ) : before { animation : load 1 . 2s linear 0 . 25s infinite; } . line div: nth- child ( 7 ) : before { animation : load 1 . 2s linear 0 . 3s infinite; } . line div: nth- child ( 8 ) : before { animation : load 1 . 2s linear 0 . 35s infinite; } . line div: nth- child ( 9 ) : before { animation : load 1 . 2s linear 0 . 4s infinite; } . line div: nth- child ( 10 ) : before { animation : load 1 . 2s linear 0 . 45s infinite; } . line div: nth- child ( 11 ) : before { animation : load 1 . 2s linear 0 . 5s infinite; } . line div: nth- child ( 12 ) : before { animation : load 1 . 2s linear 0 . 55s infinite; } . line div: nth- child ( 1 ) : after { animation : load 1 . 2s linear 0 . 6s infinite; } . line div: nth- child ( 2 ) : after { animation : load 1 . 2s linear 0 . 65s infinite; } . line div: nth- child ( 3 ) : after { animation : load 1 . 2s linear 0 . 7s infinite; } . line div: nth- child ( 4 ) : after { animation : load 1 . 2s linear 0 . 75s infinite; } . line div: nth- child ( 5 ) : after { animation : load 1 . 2s linear 0 . 8s infinite; } . line div: nth- child ( 6 ) : after { animation : load 1 . 2s linear 0 . 85s infinite; } . line div: nth- child ( 7 ) : after { animation : load 1 . 2s linear 0 . 9s infinite; } . line div: nth- child ( 8 ) : after { animation : load 1 . 2s linear 0 . 95s infinite; } . line div: nth- child ( 9 ) : after { animation : load 1 . 2s linear 1 . 0s infinite; } . line div: nth- child ( 10 ) : after { animation : load 1 . 2s linear 1 . 05s infinite; } . line div: nth- child ( 11 ) : after { animation : load 1 . 2s linear 1 . 1s infinite; } . line div: nth- child ( 12 ) : after { animation : load 1 . 2s linear 1 . 15s infinite; } < / style>
< / head>
< body>
< div class = "cont" > < div class = "line" > < div> < / div> < div> < / div> < div> < / div> < div> < / div> < div> < / div> < div> < / div> < div> < / div> < div> < / div> < div> < / div> < div> < / div> < div> < / div> < div> < / div> < / div> < div class = "circle" > < / div>
< / div>
< / body>
< / html> < ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 制作小圆圈轮流放大的加载动画< / title> < style>
* { padding : 0 ; margin : 0 ;
} . ball { width : 240px; height : 90px; text- align: center; color : #fff; background : rgba ( 0 , 0 , 0 , 0.5 ) ; margin : 20px auto;
} . ball > p { padding : 20px 0 ;
} . ball > div { width : 18px; height : 18px; background : #1abc9c; border- radius: 100 % ; display : inline- block; animation : move 1 . 4s infinite ease- in - out both;
} . ball . ball1 { animation- delay: 0 . 16s;
} . ball . ball2 { animation- delay: 0 . 32s;
} . ball . ball3 { animation- delay: 0 . 48s;
} @keyframes move { 0 % { transform : scale ( 0 ) } 40 % { transform : scale ( 1.0 ) } 100 % { transform : scale ( 0 ) }
} < / style>
< / head>
< body> < div class = "cont" > < div class = "ball" > < p> 正在加载, 请稍后~ < / p> < div class = "ball1" > < / div> < div class = "ball2" > < / div> < div class = "ball3" > < / div> < / div> < / div>
< / body>
< / html> < ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 椭圆形进度条加载< / title> < style> . cont { margin : 50px auto; } . cont, p { width : 300px; height : 20px; border- radius: 10px; position : relative; background- color: rgba ( 189 , 189 , 189 , 1 ) ; } #bar { background- color: #0e90d2; width : 0 ; animation : prog 1 5s ease forwards; } #txt { position : absolute; left : 250px; width : 50px; font : bold 18px/ 20px "" ; color : #f00; } @keyframes prog { 0 % { width : 0px; } 100 % { width : 300px; } } < / style>
< / head>
< body>
< div class = "cont" > < p id= "bar" > < span id= "txt" > 0 % < / span> < / p>
< / div>
< script type= "text/javascript" > window. onload = function ( ) { var i = 0 ; var txt = document. getElementById ( "txt" ) ; var ds = setInterval ( function ( ) { i++ ; txt. innerHTML = i + "%" ; if ( i == 100 ) { clearInterval ( ds) } } , 50 ) }
< / script>
< / body>
< / html>
< ! DOCTYPE html>
< html lang= "en" >
< head> < meta charset= "UTF-8" > < title> 文字轮播滚动< / title> < style> . marquee- outer- wrapper { overflow : hidden; width : 100 % ; } . marquee- inner- wrapper { background : #eee; height : 40px; font- size: 14px; color : red; line- height: 40px; margin : 0 auto; white- space: nowrap; position : relative; } . marquee- inner- wrapper span { position : absolute; top : 0 ; left : 100 % ; height : 100 % ; } . first- marquee { - webkit- animation: 25s first- marquee linear infinite normal; animation : 25s first- marquee linear infinite normal; padding- right: 70 % ; } @keyframes first- marquee { 0 % { - webkit- transform: translate3d ( 0 , 0 , 0 ) ; transform : translate3d ( 0 , 0 , 0 ) ; } 100 % { - webkit- transform: translate3d ( - 200 % , 0 , 0 ) ; transform : translate3d ( - 200 % , 0 , 0 ) ; display : none; } } . second- marquee { - webkit- animation: 25s first- marquee linear 12s infinite normal; animation : 25s first- marquee linear 12s infinite normal; padding- right: 53 % ; } @keyframes second- marquee { 0 % { - webkit- transform: translate3d ( 0 % , 0 , 0 ) ; transform : translate3d ( 0 % , 0 , 0 ) ; } 100 % { - webkit- transform: translate3d ( - 200 % , 0 , 0 ) ; transform : translate3d ( - 200 % , 0 , 0 ) ; display : none; } } < / style>
< / head>
< body>
< div class = "marquee-outer-wrapper" > < div class = "marquee-inner-wrapper" > < span class = "first-marquee" > 使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画< / span> < span class = "second-marquee" > 使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画< / span> < / div> < / div>
< / body>
< / html> 
)
