ホームページ >ウェブフロントエンド >htmlチュートリアル >アニメーション効果の読み込み (後で使用するために収集)_html/css_WEB-ITnose
动画效果一:
html代码:
CSS代码:
.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 );
}
}
动画效果二:
HTML代码:
CSS代码:
.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);
}
}
动画效果三:
HTML代码:
CSS代码:
.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 );
}
}
动画效果四:
HTML代码:
CSS代码:
.spinner {
margin : 100px auto ;
幅: 32px ;
高さ : 32px ;
位置 : 相対的;
}
.cube 1 , .cube 2 {
背景色 : #67CF22 ;
幅: 30px ;
高さ : 30px ;
位置: 絶対;
トップ : 0 ;
左 : 0 ;
-webkit-animation: cubemove 1.8 秒の無限イーズインアウト。
アニメーション: cubemove 1.8 秒の無限イーズインアウト。
}
.cube 2 {
-webkit-animation-delay: -0.9 s;
アニメーション遅延: -0.9 秒。
}
@-webkit-keyframes cubemove {
25% { -webkit-transform: 変換X( 42px ) 回転( -90 度) スケール( 0.5 ) }
50% { -webkit-transフォーム:translateX ( 42px ) 変換Y( 42ピクセル ) 回転( -180 度) }
75% { -webkit-transform:translateX( 0px ) 変換Y( 42px ) 回転( -270 度) スケール( 0.5 ) }
100% { -webkit -transform: 回転( -360 度) }
}
@keyframes cubemove {
25% {
変換: 変換X( 42px ) 回転( -90 度) スケール( 0.5 );
-webkit-transform: 変換X( 42px ) 回転( -90 度) スケール( 0.5 );
} 50% {
変換: 変換X( 42px ) 変換Y( 42px ) 回転( -179 度);
-webkit-transform: 変換X( 42px ) 変換Y( 42px ) 回転( -179 度);
} 50.1% {
transform: 変換X( 42px ) 変換Y( 42px ) 回転( -180 度);
-webkit-transform: 変換X( 42px ) 変換Y( 42px ) 回転( -180 度);
} 75% {
変換: 変換X( 0px ) 変換Y( 42px ) 回転( -270 度) スケール( 0.5 );
-webkit-transform: 変換X( 0px ) 変換Y( 42px ) 回転( -270 度) スケール( 0.5 );
} 100% {
transform: rotate( -360 deg);
-webkit-transform: rotate( -360 deg);
}
}
动画效果五:
HTML代码:
CSS代码:
.spinner {
margin : 100px auto ;
幅: 90px ;
高さ : 90px ;
位置 : 相対的;
text-align : center ;
-webkit-animation: 2.0 秒の無限リニア回転。
アニメーション: 2.0 秒の無限リニア回転。
}
.dot 1 , .dot 2 {
width : 60% ;
高さ: 60% ;
表示 : インラインブロック ;
位置: 絶対;
トップ : 0 ;
背景色 : #67CF22 ;
境界半径: 100% ;
-webkit-animation: バウンス 2.0 秒の無限イーズインアウト。
アニメーション: バウンス 2.0 秒、無限イーズインアウト。
}
.dot 2 {
トップ : 自動 ;
下 : 0px ;
-webkit-アニメーション遅延: -1.0 秒;
アニメーション遅延: -1.0 秒;
}
@-webkit-keyframes 回転 { 100% { -webkit-transform: 回転( 360 度) }}
@keyframes 回転 { 100% { 変換: 回転( 360 度); -webkit-transform: 回転( 360 度) }}
@-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 );
}
}
动画效果六:
HTML代码:
CSS代コード:
.spinner {
margin : 100px auto 0 ;
幅: 150px ;
text-align : center ;
}
.スピナー > div {
幅 : 30px ;
高さ : 30px ;
背景色 : #67CF22 ;
境界半径: 100% ;
表示 : インラインブロック ;
-webkit-animation: バウンス遅延 1.4 秒、無限のイーズインアウト。
アニメーション: バウンスディレイ 1.4 秒、無限イーズインアウト。
/* アニメーションの開始時に最初のフレームがちらつかないようにします */
-webkit-animation-fill-mode: Both ;
アニメーションフィルモード: 両方 ;
}
.spinner .bounce 1 {
-webkit-animation-delay: -0.32 s;
アニメーション遅延: -0.32 秒;
}
.spinner .bounce 2 {
-webkit-animation-delay: -0.16 s;
アニメーション遅延: -0.16 秒;
}
@-webkit-keyframes bouncedelay {
0% , 80% , 100% { -webkit-transform:scale( 0.0 ) }
40% { -webkit-transform:scale( 1 .0) }
}
@keyframes bouncedelay {
0% , 80% , 100% {
transform:scale( 0.0 );
-webkit-transform:scale( 0.0 );
} 40% {
transform: scale( 1.0 );
-webkit-transform: scale( 1.0 );
}
}
动画效果七:
HTML代码:
CSS代码:
.spinner {
width : 40px ;
高さ: 40px ;
マージン: 100px 自動;
背景色 : #333 ;
境界半径: 100% ;
-webkit-animation: スケールアウト 1.0 秒の無限イーズインアウト。
アニメーション: スケールアウト 1.0 秒の無限イーズインアウト。
}
@-webkit-keyframes スケールアウト {
0% { -webkit-transform:scale( 0.0 ) }
100% {
-webkit-transform:scale( 1.0);
不透明度: 0 ;
}
}
@keyframes スケールアウト {
0% {
変換:scale( 0.0 );
-webkit-transform:scale( 0.0 );
} 100% {
変換:scale( 1.0 );
-webkit-transform:scale( 1.0 );
不透明度: 0 ;
}
}
アニメ画效果八:
HTML代:
CSS代码:
.spinner {
margin : 100px auto ;
幅: 20px ;
高さ: 20px ;
位置 : 相対的;
}
.container 1 > div、.container 2 > div、.container 3 > div {
width : 6px ;
高さ: 6px ;
背景色 : #333 ;
境界半径: 100% ;
位置: 絶対;
-webkit-animation: バウンス遅延 1.2 秒、無限のイーズインアウト。
アニメーション: bouncedelay 1.2 秒、無限イーズインアウト。
-webkit-animation-fill-mode: 両方 ;
アニメーションフィルモード: 両方 ;
}
.spinner .spinner-container {
位置 : 絶対 ;
幅 : 100% ;
高さ : 100% ;
}
.container 2 {
-webkit-transform:rotateZ( 45 度);
変換: 回転Z(45度);
}
.container 3 {
-webkit-transform:rotateZ( 90 度);
変換: 回転Z(90度);
}
.circle 1 { トップ : 0 ;左: 0 ; }
.circle 2 { トップ : 0 ;右: 0 ; }
.circle 3 { 右 : 0 ;下: 0; }
.circle 4 { 左 : 0 ;下: 0; }
.container 2 .circle 1 {
-webkit-animation-delay: -1.1 s;
アニメーション遅延: -1.1 秒。
}
.container 3 .circle 1 {
-webkit-animation-delay: -1.0 s;
アニメーション遅延: -1.0 秒;
}
.container 1 .circle 2 {
-webkit-animation-delay: -0.9 s;
アニメーション遅延: -0.9 秒。
}
.container 2 .circle 2 {
-webkit-animation-delay: -0.8 s;
アニメーション遅延: -0.8 秒;
}
.container 3 .circle 2 {
-webkit-animation-delay: -0.7 s;
アニメーション遅延: -0.7 秒;
}
.container 1 .circle 3 {
-webkit-animation-delay: -0.6 s;
アニメーション遅延: -0.6 秒;
}
.container 2 .circle 3 {
-webkit-animation-delay: -0.5 s;
アニメーション遅延: -0.5 秒;
}
.container 3 .circle 3 {
-webkit-animation-delay: -0.4 s;
アニメーション遅延: -0.4 秒。
}
.container 1 .circle 4 {
-webkit-animation-delay: -0.3 s;
アニメーション遅延: -0.3 秒。
}
.container 2 .circle 4 {
-webkit-animation-delay: -0.2 s;
アニメーション遅延: -0.2 秒;
}
.container 3 .circle 4 {
-webkit-animation-delay: -0.1 s;
アニメーション遅延: -0.1 秒;
}
@-webkit-keyframes bouncedelay {
0% , 80% , 100% { -webkit-transform:scale( 0.0 ) }
40% { -webkit-transform:scale( 1 .0) }
}
@keyframes bouncedelay {
0% , 80% , 100% {
transform:scale( 0.0 );
-webkit-transform:scale( 0.0 );
} 40% {
変換: スケール( 1.0 );
-webkit-transform:scale( 1.0 );
}
}