css实现三维球体波浪浮动动画效果代码
代码语言：html
所属分类：三维
代码描述：css实现三维球体波浪浮动动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'>
<style>
body {
background: linear-gradient(0deg, #1b2735 0%, #090a0f 100%);
height: 100vh;
overflow: hidden;
display: flex;
font-family: "Anton", sans-serif;
justify-content: center;
align-items: center;
perspective: 500px;
}
div {
transform-style: preserve-3d;
}
.camera {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.camera.-x {
transform: rotateX(60deg);
}
.camera.-y {
trannsform: rotateY(0deg);
}
.camera.-z {
-webkit-animation: rotateZ 30000ms linear infinite;
animation: rotateZ 30000ms linear infinite;
}
.sea {
position: relative;
display: grid;
grid-template-rows: repeat(10, 8%);
grid-template-columns: repeat(10, 8%);
grid-gap: 2%;
width: 250px;
height: 250px;
}
.counter {
position: absolute;
width: 100%;
height: 100%;
}
.counter.-x {
transform: rotateX(-60deg);
}
.counter.-y {
transform: rotateY(0deg);
}
.counter.-z {
animation: rotateZ 30000ms linear infinite reverse;
}
.graphic {
width: 100%;
height: 100%;
background: radial-gradient(circle at 0 3px, #fff, #6094B3 60%, #25335E);
border-radius: 100%;
filter: drop-shadow(0 100px 12px rgba(96, 148, 179, 0.2));
}
.wave:nth-child(1) {
-webkit-animation: wave 1000ms -30ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -30ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(2) {
-webkit-animation: wave 1000ms -60ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -60ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(3) {
-webkit-animation: wave 1000ms -90ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -90ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(4) {
-webkit-animation: wave 1000ms -120ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -120ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(5) {
-webkit-animation: wave 1000ms -150ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -150ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(6) {
-webkit-animation: wave 1000ms -180ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -180ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(7) {
-webkit-animation: wave 1000ms -210ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -210ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(8) {
-webkit-animation: wave 1000ms -240ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -240ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(9) {
-webkit-animation: wave 1000ms -270ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -270ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(10) {
-webkit-animation: wave 1000ms -300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(11) {
-webkit-animation: wave 1000ms -330ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -330ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(12) {
-webkit-animation: wave 1000ms -360ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -360ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(13) {
-webkit-animation: wave 1000ms -390ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -390ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(14) {
-webkit-animation: wave 1000ms -420ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -420ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(15) {
-webkit-animation: wave 1000ms -450ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -450ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(16) {
-webkit-animation: wave 1000ms -480ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -480ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(17) {
-webkit-animation: wave 1000ms -510ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -510ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(18) {
-webkit-animation: wave 1000ms -540ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -540ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(19) {
-webkit-animation: wave 1000ms -570ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -570ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(20) {
-webkit-animation: wave 1000ms -600ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -600ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(21) {
-webkit-animation: wave 1000ms -630ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -630ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(22) {
-webkit-animation: wave 1000ms -660ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -660ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(23) {
-webkit-animation: wave 1000ms -690ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -690ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(24) {
-webkit-animation: wave 1000ms -720ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -720ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(25) {
-webkit-animation: wave 1000ms -750ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -750ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(26) {
-webkit-animation: wave 1000ms -780ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -780ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(27) {
-webkit-animation: wave 1000ms -810ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -810ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(28) {
-webkit-animation: wave 1000ms -840ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -840ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(29) {
-webkit-animation: wave 1000ms -870ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -870ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(30) {
-webkit-animation: wave 1000ms -900ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -900ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(31) {
-webkit-animation: wave 1000ms -930ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -930ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(32) {
-webkit-animation: wave 1000ms -960ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -960ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(33) {
-webkit-animation: wave 1000ms -990ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -990ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(34) {
-webkit-animation: wave 1000ms -1020ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1020ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(35) {
-webkit-animation: wave 1000ms -1050ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1050ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(36) {
-webkit-animation: wave 1000ms -1080ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1080ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(37) {
-webkit-animation: wave 1000ms -1110ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1110ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(38) {
-webkit-animation: wave 1000ms -1140ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1140ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(39) {
-webkit-animation: wave 1000ms -1170ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1170ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(40) {
-webkit-animation: wave 1000ms -1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(41) {
-webkit-animation: wave 1000ms -1230ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1230ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(42) {
-webkit-animation: wave 1000ms -1260ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1260ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(43) {
-webkit-animation: wave 1000ms -1290ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1290ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(44) {
-webkit-animation: wave 1000ms -1320ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1320ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(45) {
-webkit-animation: wave 1000ms -1350ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1350ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(46) {
-webkit-animation: wave 1000ms -1380ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1380ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(47) {
-webkit-animation: wave 1000ms -1410ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1410ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(48) {
-webkit-animation: wave 1000ms -1440ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1440ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(49) {
-webkit-animation: wave 1000ms -1470ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1470ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(50) {
-webkit-animation: wave 1000ms -1500ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1500ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(51) {
-webkit-animation: wave 1000ms -1530ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1530ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(52) {
-webkit-animation: wave 1000ms -1560ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1560ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(53) {
-webkit-animation: wave 1000ms -1590ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1590ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(54) {
-webkit-animation: wave 1000ms -1620ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1620ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(55) {
-webkit-animation: wave 1000ms -1650ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1650ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(56) {
-webkit-animation: wave 1000ms -1680ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1680ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(57) {
-webkit-animation: wave 1000ms -1710ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1710ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(58) {
-webkit-animation: wave 1000ms -1740ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1740ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(59) {
-webkit-animation: wave 1000ms -1770ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1770ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(60) {
-webkit-animation: wave 1000ms -1800ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1800ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(61) {
-webkit-animation: wave 1000ms -1830ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1830ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(62) {
-webkit-animation: wave 1000ms -1860ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1860ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(63) {
-webkit-animation: wave 1000ms -1890ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1890ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(64) {
-webkit-animation: wave 1000ms -1920ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1920ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(65) {
-webkit-animation: wave 1000ms -1950ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1950ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(66) {
-webkit-animation: wave 1000ms -1980ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -1980ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(67) {
-webkit-animation: wave 1000ms -2010ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2010ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(68) {
-webkit-animation: wave 1000ms -2040ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2040ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(69) {
-webkit-animation: wave 1000ms -2070ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2070ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(70) {
-webkit-animation: wave 1000ms -2100ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2100ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(71) {
-webkit-animation: wave 1000ms -2130ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2130ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(72) {
-webkit-animation: wave 1000ms -2160ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2160ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(73) {
-webkit-animation: wave 1000ms -2190ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2190ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(74) {
-webkit-animation: wave 1000ms -2220ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2220ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(75) {
-webkit-animation: wave 1000ms -2250ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2250ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(76) {
-webkit-animation: wave 1000ms -2280ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2280ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(77) {
-webkit-animation: wave 1000ms -2310ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2310ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(78) {
-webkit-animation: wave 1000ms -2340ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2340ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(79) {
-webkit-animation: wave 1000ms -2370ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2370ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(80) {
-webkit-animation: wave 1000ms -2400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(81) {
-webkit-animation: wave 1000ms -2430ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2430ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(82) {
-webkit-animation: wave 1000ms -2460ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2460ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(83) {
-webkit-animation: wave 1000ms -2490ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2490ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(84) {
-webkit-animation: wave 1000ms -2520ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2520ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(85) {
-webkit-animation: wave 1000ms -2550ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2550ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(86) {
-webkit-animation: wave 1000ms -2580ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2580ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(87) {
-webkit-animation: wave 1000ms -2610ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2610ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(88) {
-webkit-animation: wave 1000ms -2640ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2640ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(89) {
-webkit-animation: wave 1000ms -2670ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2670ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(90) {
-webkit-animation: wave 1000ms -2700ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2700ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(91) {
-webkit-animation: wave 1000ms -2730ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2730ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(92) {
-webkit-animation: wave 1000ms -2760ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2760ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(93) {
-webkit-animation: wave 1000ms -2790ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2790ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(94) {
-webkit-animation: wave 1000ms -2820ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2820ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(95) {
-webkit-animation: wave 1000ms -2850ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2850ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(96) {
-webkit-animation: wave 1000ms -2880ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2880ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(97) {
-webkit-animation: wave 1000ms -2910ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2910ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(98) {
-webkit-animation: wave 1000ms -2940ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2940ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(99) {
-webkit-animation: wave 1000ms -2970ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -2970ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.wave:nth-child(100) {
-webkit-animation: wave 1000ms -3000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
animation: wave 1000ms -3000ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
@-webkit-keyframes rotateX {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}
@keyframes rotateX {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}
@-webkit-keyframes rotateY {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
@keyframes rotateY {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
@-webkit-keyframes rotateZ {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
@keyframes rotateZ {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
@-webkit-keyframes wave {
0% {
transform: translateZ(0);
}
100% {
transform: translateZ(30px);
}
}
@keyframes wave {
0% {
transform: translateZ(0);
}
100% {
transform: translateZ(30px);
}
}
</style>
</head>
<body translate="no" >
<div class="camera -x">
<div class="camera -y">
<div class="camera -z">
<div class="sea">
<div class="wave">
<div class="counter -z">
<div class="counter -y">
<div class="counter -x">
<div class="graphic"></div>
</div>
</div>
</div>
</div>
<div class="wave">
<div class="counter -z">
<div class="counter -y">
<div class="counter -x">
<div class="graphic"></div>
</div>
</div>
</div>
</div>
<div class="wave">
<div class="counter -z">
<div class="counter -y">
<div class="counter -x">
<div class="graphic"></div>
</div>
</div>
</div>
</div>
<div class="wave">
<div class="counter -z">
<div class="counter -y">
<div class="counter -x">
<div class="graphic"></div>
</div>
</div>
</div>
</div>
<div class="wave">
<div class="counter -z">
<div class="counter -y">
<div class="counter -x">
<div class="graphic"></div>
</div>
</div>
</div>
</div>
<div class="wave">
<div class="counter -z">
<div class="counter -y">
<div class="counter -x">
<div class="graphic"></div>
</div>
</div>
</div>
</div>
<div class="wave">
<div class="counter -z">
<div class="counter -y">
<div class="counter -x">
<div class="graphic"></div>
</div>
</div>
</div>
</div>
<div class="wave">
<div class="counter -z">
<div class="counter -y">
<div class="counter -x">
<div class="graphic"></div>
</div>
</div>
</div>
</div>
<div class="wave">
<div class="counter -z">
<div class="counter -y">
<div class="counter -x">
<div class="graphic"></div>
</div>
</div>
</div>
</div>
<div class="wave">
<div class="counter -z">
<div class="counter -y">
<div class="counter -x">
<div class="graphic"></div>
</div>
</div>
</div>
</div>
<div class="wave">
<div class="counter -z">
<div class="counter -y">
<div class="counter -x">
<div class="graphic"></div>
</div>
</div>
</div>
</div>
<div class="wave">
<div class="counter -z">
<div class="counter -y">
<div class="counter -x">
<div class="graphic"></div>
</div>
</div>
</div>
</div>
<div class="wave">
<div class="counter -z">
<div class="counter -y">
<div class="counter -x">
<div class="graphic"></div>
</div>
</div>
</div>
</div>
<div class="wave">
<div class="counter -z">
<div class="counter -y">
<div class="counter -x">
<div class="graphic"></div>
</div>
</div>
</div>
</div>
<div class="wave">
<div class="counter -z">
<div class="counter -y">
<div class="counter -x">
<div class="graphic"></div>
</div>
</div>
</div>
</div>
<div class="wave">
<div class="counter -z">
<div class="counter -y">
<div class="counter -x">
<div class="graphic"></div>
</div>
</div>
</div>
</div>
<div class="wave">
<div class="counter -z"&g.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0