CSS3 ?? ?? ?? ?? ????? ?? ??
??? ???? ???? CSS3 ?? ?? ?? ?? ????? ?? ?????. ?? ?????? ??? ??? ??? ??? ?? ???? ??? ?? ? ????.
<!doctype html>
<html>
<??>
<meta charset="utf-8">
<title>CSS3動感彈性波紋變換動畫特效</title>
<???>
? {
? ??: #1C1C1C;
? ????: ??;
}
.wrap {
? ??: ??;
? ??: 50%;
? ??: 50%;
? -webkit-transform: ??(-50%, -50%);
? ? ? ? ? ??: ??(-50%, -50%);
? ?? ??: -150px;
}
ul {
? -?? ??: ??3d(0, 1, 0, 45deg);
? ? ? ? ? ??: Rotate3d(0, 1, 0, 45deg);
}
? ? {
? ??: #1c1c1c;
? ?? ???: ?? 1px 1px 40px #19A598;
? ??? ??: 50%;
? ??: ??;
? ??: 50%;
? ??: 50%;
}
li:nth-child(1) {
? ???: 1px ??? #189c90;
? ??: 30px;
? ??: 30px;
? Z-??: -1;
? ?? ??: -15px;
? ??-??: 5px;
? -webkit-animation: 2? 0.2? ?? ??;
? ? ? ? ? ?????: 2? 0.2? ?? ??;
}
li:nth-child(2) {
? ???: 1px ??? #169388;
? ??: 60px;
? ??: 60px;
? Z-??: -2;
? ?? ??: -30px;
? ??-??: 10px;
? -webkit-animation: 2? 0.4? ?? ??;
? ? ? ? ? ?????: 2? 0.4? ?? ??;
}
li:nth-child(3) {
? ???: 1px ??? #158a80;
? ??: 90px;
? ??: 90px;
? Z-??: -3;
? ?? ??: -45px;
? ??-??: 15px;
? -webkit-animation: 2? 0.6? ?? ??;
? ? ? ? ? ?????: 2? 0.6? ?? ??;
}
li:nth-child(4) {
? ???: 1px ??? #148277;
? ??: 120px;
? ??: 120px;
? Z-??: -4;
? ?? ??: -60px;
? ??-??: 20px;
? -webkit-animation: 2? 0.8? ?? ??;
? ? ? ? ? ?????: 2? 0.8? ?? ??;
}
li:nth-child(5) {
? ???: 1px ??? #12796f;
? ??: 150px;
? ??: 150px;
? Z-??: -5;
? ?? ??: -75px;
? ??-??: 25px;
? -webkit-animation: 2? 1? ?? ??;
? ? ? ? ? ?????: 2? 1? ?? ??;
}
li:nth-child(6) {
? ???: 1px ??? #117067;
? ??: 180px;
? ??: 180px;
? Z-??: -6;
? ?? ??: -90px;
? ??-??: 30px;
? -webkit-animation: 2? 1.2? ?? ??;
? ? ? ? ? ?????: 2? 1.2? ?? ??;
}
li:nth-child(7) {
? ???: 1px ??? #10675f;
? ??: 210px;
? ??: 210px;
? Z-??: -7;
? ?? ??: -105px;
? ??-??: 35px;
? -webkit-animation: 2? 1.4? ?? ??;
? ? ? ? ? ?????: 2? 1.4? ?? ??;
}
li:nth-child(8) {
? ???: 1px ??? #0e5e57;
? ??: 240px;
? ??: 240px;
? Z-??: -8;
? ?? ??: -120px;
? ??-??: 40px;
? -webkit-animation: 2? 1.6? ?? ??;
? ? ? ? ? ?????: 2? 1.6? ?? ??;
}
li:nth-child(9) {
? ???: 1px ??? #0d554f;
? ??: 270px;
? ??: 270px;
? Z-??: -9;
? ?? ??: -135px;
? ??-??: 45px;
? -webkit-animation: 2? 1.8? ?? ??;
? ? ? ? ? ?????: 2? 1.8? ?? ??;
}
li:nth-child(10) {
? ???: 1px ??? #0c4c46;
? ??: 300px;
? ??: 300px;
? Z-??: -10;
? ?? ??: -150px;
? ??-??: 50px;
? -webkit-animation: 2s 2s ?? ??;
? ? ? ? ? ?????: 2? 2? ?? ??;
}
li:nth-child(11) {
? ???: 1px ??? #0a443e;
? ??: 330px;
? ??: 330px;
? Z-??: -11;
? ?? ??: -165px;
? ??-??: 55px;
? -webkit-animation: 2? 2.2? ?? ??;
? ? ? ? ? ?????: 2? 2.2? ?? ??;
}
@-webkit-keyframes ?? {
? 0% {
? ? -webkit-transform: ??(0deg) ??(1);
? ? ? ? ? ? ??: ??(0deg) ???(1);
? }
? 50% {
? ? -webkit-transform: ??(360deg) ??(2);
? ? ? ? ? ? ??: ??(360deg) ???(2);
? }
? 100% {
? ? -webkit-transform: ??(0deg) ??(1);
? ? ? ? ? ? ??: ??(0deg) ???(1);
? }
}
@keyframes ?? {
? 0% {
? ? -webkit-transform: ??(0deg) ??(1);
? ? ? ? ? ? ??: ??(0deg) ???(1);
? }
? 50% {
? ? -webkit-transform: ??(360deg) ??(2);
? ? ? ? ? ? ??: ??(360deg) ???(2);
? }
? 100% {
? ? -webkit-transform: ??(0deg) ??(1);
? ? ? ? ? ? ??: ??(0deg) ???(1);
? }
}
? ? {
? ?? ???: ??;
}
</???>
</??>
<body><script src="/demos/googlegg.js"></script>
<div class="wrap">
<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; ??:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">?
</div>
</??>