css特效

1.页面淡入淡出

加载中...

/*页面淡入淡出效果*/ @-webkit-keyframes fadeIn { 0% {opacity: 0; /*初始状态 透明度为0*/} 50% {opacity: 0.5; /*中间状态 透明度为0*/} 100% {opacity: 1; /*结尾状态 透明度为1*/} } body{ font-family:"微软雅黑"; background:#f0f0f0; height:100%; -webkit-animation-name: fadeIn; /*动画名称*/ -webkit-animation-duration: 5s; /*动画持续时间*/ -webkit-animation-iteration-count: 1; /*动画次数*/ -webkit-animation-delay: 0s; /*延迟时间*/ }

2.左右反转loading

#loading { z-index:-999; background-color: #0098fc; font-size:24px; width:60px; height:60px; text-align:center; position:absolute; top:50%; left:50%; margin-top:-30px; margin-left:-30px; -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes rotateplane { 0%{ -webkit-transform: perspective(120px) } 50%{ -webkit-transform: perspective(120px) rotateY(180deg) } 100%{ -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }

转自其他文章:css3 loading http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html

Loading 动画效果一

HTML 代码：

1 2 3 4 5 6 7

class = "spinner" > class = "rect1" > class = "rect2" > class = "rect3" > class = "rect4" > class = "rect5" >

CSS 代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

.spinner { margin : 100px auto ; width : 50px ; height : 60px ; text-align : center ; font-size : 10px ; } .spinner > div { background-color : #67CF22 ; height : 100% ; width : 6px ; display : inline- block ; -webkit-animation: stretchdelay 1.2 s infinite ease-in-out; animation: stretchdelay 1.2 s infinite ease-in-out; } .spinner .rect 2 { -webkit-animation-delay: -1.1 s; animation-delay: -1.1 s; } .spinner .rect 3 { -webkit-animation-delay: -1.0 s; animation-delay: -1.0 s; } .spinner .rect 4 { -webkit-animation-delay: -0.9 s; animation-delay: -0.9 s; } .spinner .rect 5 { -webkit-animation-delay: -0.8 s; animation-delay: -0.8 s; } @-webkit-keyframes stretchdelay { 0% , 40% , 100% { -webkit-transform: scaleY( 0.4 ) } 20% { -webkit-transform: scaleY( 1.0 ) } } @keyframes stretchdelay { 0% , 40% , 100% { transform: scaleY( 0.4 ); -webkit-transform: scaleY( 0.4 ); } 20% { transform: scaleY( 1.0 ); -webkit-transform: scaleY( 1.0 ); } }

Loading 动画效果二

HTML 代码：

1

class = "spinner" >

CSS 代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

.spinner { width : 60px ; height : 60px ; background-color : #67CF22 ; margin : 100px auto ; -webkit-animation: rotateplane 1.2 s infinite ease-in-out; animation: rotateplane 1.2 s infinite ease-in-out; } @-webkit-keyframes rotateplane { 0% { -webkit-transform: perspective( 120px ) } 50% { -webkit-transform: perspective( 120px ) rotateY( 180 deg) } 100% { -webkit-transform: perspective( 120px ) rotateY( 180 deg) rotateX( 180 deg) } } @keyframes rotateplane { 0% { transform: perspective( 120px ) rotateX( 0 deg) rotateY( 0 deg); -webkit-transform: perspective( 120px ) rotateX( 0 deg) rotateY( 0 deg) } 50% { transform: perspective( 120px ) rotateX( -180.1 deg) rotateY( 0 deg); -webkit-transform: perspective( 120px ) rotateX( -180.1 deg) rotateY( 0 deg) } 100% { transform: perspective( 120px ) rotateX( -180 deg) rotateY( -179.9 deg); -webkit-transform: perspective( 120px ) rotateX( -180 deg) rotateY( -179.9 deg); } }

Loading 动画效果三

HTML 代码：

1 2 3 4

class = "spinner" > class = "double-bounce1" > class = "double-bounce2" >

CSS 代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

.spinner { width : 60px ; height : 60px ; position : relative ; margin : 100px auto ; } .double-bounce 1 , .double-bounce 2 { width : 100% ; height : 100% ; border-radius: 50% ; background-color : #67CF22 ; opacity: 0.6 ; position : absolute ; top : 0 ; left : 0 ; -webkit-animation: bounce 2.0 s infinite ease-in-out; animation: bounce 2.0 s infinite ease-in-out; } .double-bounce 2 { -webkit-animation-delay: -1.0 s; animation-delay: -1.0 s; } @-webkit-keyframes bounce { 0% , 100% { -webkit-transform: scale( 0.0 ) } 50% { -webkit-transform: scale( 1.0 ) } } @keyframes bounce { 0% , 100% { transform: scale( 0.0 ); -webkit-transform: scale( 0.0 ); } 50% { transform: scale( 1.0 ); -webkit-transform: scale( 1.0 ); } }

Loading 动画效果四

HTML 代码：

1 2 3 4

"spinner" > "cube1" > "cube2" >

CSS 代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

.spinner { margin : 100px auto ; width : 32px ; height : 32px ; position : relative ; } .cube 1 , .cube 2 { background-color : #67CF22 ; width : 30px ; height : 30px ; position : absolute ; top : 0 ; left : 0 ; -webkit-animation: cubemove 1.8 s infinite ease-in-out; animation: cubemove 1.8 s infinite ease-in-out; } .cube 2 { -webkit-animation-delay: -0.9 s; animation-delay: -0.9 s; } @-webkit-keyframes cubemove { 25% { -webkit-transform: translateX( 42px ) rotate( -90 deg) scale( 0.5 ) } 50% { -webkit-transform: translateX( 42px ) translateY( 42px ) rotate( -180 deg) } 75% { -webkit-transform: translateX( 0px ) translateY( 42px ) rotate( -270 deg) scale( 0.5 ) } 100% { -webkit-transform: rotate( -360 deg) } } @keyframes cubemove { 25% { transform: translateX( 42px ) rotate( -90 deg) scale( 0.5 ); -webkit-transform: translateX( 42px ) rotate( -90 deg) scale( 0.5 ); } 50% { transform: translateX( 42px ) translateY( 42px ) rotate( -179 deg); -webkit-transform: translateX( 42px ) translateY( 42px ) rotate( -179 deg); } 50.1% { transform: translateX( 42px ) translateY( 42px ) rotate( -180 deg); -webkit-transform: translateX( 42px ) translateY( 42px ) rotate( -180 deg); } 75% { transform: translateX( 0px ) translateY( 42px ) rotate( -270 deg) scale( 0.5 ); -webkit-transform: translateX( 0px ) translateY( 42px ) rotate( -270 deg) scale( 0.5 ); } 100% { transform: rotate( -360 deg); -webkit-transform: rotate( -360 deg); } }

Loading 动画效果五

HTML 代码：

1 2 3 4

"spinner" > "dot1" > "dot2" >

CSS 代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

.spinner { margin : 100px auto ; width : 90px ; height : 90px ; position : relative ; text-align : center ; -webkit-animation: rotate 2.0 s infinite linear; animation: rotate 2.0 s infinite linear; } .dot 1 , .dot 2 { width : 60% ; height : 60% ; display : inline- block ; position : absolute ; top : 0 ; background-color : #67CF22 ; border-radius: 100% ; -webkit-animation: bounce 2.0 s infinite ease-in-out; animation: bounce 2.0 s infinite ease-in-out; } .dot 2 { top : auto ; bottom : 0px ; -webkit-animation-delay: -1.0 s; animation-delay: -1.0 s; } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate( 360 deg) }} @keyframes rotate { 100% { transform: rotate( 360 deg); -webkit-transform: rotate( 360 deg) }} @-webkit-keyframes bounce { 0% , 100% { -webkit-transform: scale( 0.0 ) } 50% { -webkit-transform: scale( 1.0 ) } } @keyframes bounce { 0% , 100% { transform: scale( 0.0 ); -webkit-transform: scale( 0.0 ); } 50% { transform: scale( 1.0 ); -webkit-transform: scale( 1.0 ); } }

Loading 动画效果六

&nb

css特效

Artikel berkaitan