ホームページ

JS特殊効果

CSS3特殊効果

CSS3 動的弾性波紋変形アニメーション特殊効果

これは、ユニークでクリエイティブな CSS3 動的弾性波紋変形アニメーション効果です。純粋な CSS3 円形波紋アニメーション効果です。あまり実用的ではありませんが、必要な効果を作成するための実装方法を学ぶことができます。

ダウンロード中プレビュー

<!doctype html>
<html>
<頭>
<メタ文字セット="utf-8">
<title>CSS3アニメーション感弹性波纹变换アニメーション画特效</title>

<スタイル>
体 {＃＃＃背景: #1C1C1C;
オーバーフロー: 非表示;
}

。包む {＃＃＃位置: 絶対;
トップ: 50%;
左: 50%;
-webkit-transform: 変換(-50%, -50%);
変換: 変換(-50%, -50%);
マージン左: -150px;
}

ウル {
-webkit-transform:rotate3d(0, 1, 0, 45deg);
変換:rotate3d(0, 1, 0, 45deg);
}
ウルリ {
背景: #1c1c1c;
ボックスシャドウ: インセット 1px 1px 40px #19A598;
境界半径: 50%;
位置: 絶対;
トップ: 50%;
左: 50%;
}

li:nth-child(1) {
境界線: 1 ピクセルの実線 #189c90;
幅: 30px;
高さ: 30px;
z インデックス: -1;
マージントップ: -15px;
左マージン: 5px;
-webkit-animation: スピン 2 秒 0.2 秒無限;
アニメーション: スピン 2 秒 0.2 秒無限;
}

li:nth-child(2) {
境界線: 1 ピクセルの実線 #169388;
幅: 60px;
高さ: 60px;
z インデックス: -2;
マージントップ: -30px;
左マージン: 10px;
-webkit-animation: スピン 2 秒 0.4 秒無限;
アニメーション: スピン 2 秒 0.4 秒無限;
}

li:nth-child(3) {
境界線: 1 ピクセルの実線 #158a80;
幅: 90px;
高さ: 90px;
z インデックス: -3;
マージントップ: -45px;
左マージン: 15px;
-webkit-animation: スピン 2 秒 0.6 秒無限;
アニメーション: スピン 2 秒 0.6 秒無限;
}

li:nth-child(4) {
境界線: 1 ピクセルの実線 #148277;
幅: 120px;
高さ: 120px;
z インデックス: -4;
マージントップ: -60px;
左マージン: 20px;
-webkit-animation: スピン 2 秒 0.8 秒無限;
アニメーション: スピン 2 秒 0.8 秒無限;
}

li:nth-child(5) {
境界線: 1 ピクセルの実線 #12796f;
幅: 150px;
高さ: 150px;
z インデックス: -5;
マージントップ: -75px;
左マージン: 25px;
-webkit-animation: スピン 2 秒 1 秒無限;
アニメーション: スピン 2 秒 1 秒無限;
}

li:nth-child(6) {
境界線: 1 ピクセルの実線 #117067;
幅: 180px;
高さ: 180px;
z インデックス: -6;
マージントップ: -90px;
左マージン: 30px;
-webkit-animation: スピン 2 秒 1.2 秒無限;
アニメーション: スピン 2 秒 1.2 秒無限;
}

li:nth-child(7) {
境界線: 1 ピクセルの実線 #10675f;
幅: 210px;
高さ: 210px;
z インデックス: -7;
マージントップ: -105px;
左マージン: 35px;
-webkit-animation: スピン 2 秒 1.4 秒無限;
アニメーション: スピン 2 秒 1.4 秒無限;
}

li:nth-child(8) {
境界線: 1 ピクセルの実線 #0e5e57;
幅: 240px;
高さ: 240px;
z インデックス: -8;
マージントップ: -120px;
左マージン: 40px;
-webkit-animation: スピン 2 秒 1.6 秒無限;
アニメーション: スピン 2 秒 1.6 秒無限;
}

li:nth-child(9) {
境界線: 1 ピクセルの実線 #0d554f;
幅: 270px;
高さ: 270px;
z インデックス: -9;
マージントップ: -135px;
左マージン: 45px;
-webkit-animation: スピン 2 秒 1.8 秒無限;
アニメーション: スピン 2 秒 1.8 秒無限;
}

li:nth-child(10) {
境界線: 1 ピクセルの実線 #0c4c46;
幅: 300px;
高さ: 300px;
z インデックス: -10;
マージントップ: -150px;
左マージン: 50px;
-webkit-animation: 2 秒 2 秒無限スピン;
アニメーション: 2 秒 2 秒無限スピン;
}

li:nth-child(11) {
境界線: 1 ピクセルの実線 #0a443e;
幅: 330px;
高さ: 330px;
z インデックス: -11;
マージントップ: -165px;
左マージン: 55px;
-webkit-animation: スピン 2 秒 2.2 秒無限;
アニメーション: スピン 2 秒 2.2 秒無限;
}

@-webkit-keyframes スピン {
0% {
-webkit-transform: 回転(0度) スケール(1);
変換: 回転(0度) スケール(1);
}
50% {
-webkit-transform: 回転(360度) スケール(2);
変換: 回転(360度) スケール(2);
}
100% {
-webkit-transform: 回転(0度) スケール(1);
変換: 回転(0度) スケール(1);
}
}

@keyframes スピン {
0% {
-webkit-transform: 回転(0度) スケール(1);
変換: 回転(0度) スケール(1);
}
50% {
-webkit-transform: 回転(360度) スケール(2);
変換: 回転(360度) スケール(2);
}
100% {
-webkit-transform: 回転(0度) スケール(1);
変換: 回転(0度) スケール(1);
}
}
ウルリ {
リストスタイル: なし;
}
</style>

</head>
<body><script src="/demos/googlegg.js"></script>

<div class="ラップ">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

<div style="text-align:center;margin:30px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>
</本文>
</html>

免責事項

このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロードサイトによって転載されたものです。ソフトウェアの整合性をご自身で確認してください。このサイトのすべてのリソースは学習の参考のみを目的としています。商業目的で使用しないでください。そうでない場合は、すべての結果に対して責任を負うことになります。侵害がある場合は、削除するためにご連絡ください。連絡先情報: admin@php.cn