css布局实现湖面石头打水漂动画效果代码
代码语言:html
所属分类:动画
代码描述:css布局实现湖面石头打水漂动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; padding: 0; } .sky { background: linear-gradient(180deg, #673ab7, #ff980094); height: 50vh; } .sun { position: relative; background: -webkit-radial-gradient(50vw 55vh, circle cover, rgba(254, 255, 255, 0.8) 5%, rgb(236, 255, 0) 10%, rgb(253 50 41 / 54%) 25%, rgb(243 0 0 / 37%) 40%, rgb(93, 0, 0) 100%); width: 100vw; height: 100vh; left: 0; top: 0; box-shadow: 0 0 8em 4em #ff6600cc, 0 0 8em -16em #ff660000 inset, 0 0 20px 5px #ffcc007d; opacity: 0.5; } .water { background: linear-gradient(to top, rgba(0,25,45,1) 0%,rgba(14,71,117,1) 35%, rgba(26,126,174,1) 70%, rgba(62,168,220,1) 100%); height: 50vh; overflow: hidden; position: relative; } .water:before { content: ""; width: 100%; height: 100%; position: absolute; background: repeating-linear-gradient(175deg,rgba(165,165,165,0.08) 45%, rgba(175,175,175,0.08) 47%, rgba(235,235,235,0.08) 50%, rgba(195,195,195,0.08) 54%, rgba(165,165,165,0.08) 57%), linear-gradient(to left top, rgba(0,0,0,0.0) 10%,rgba(0,0,0,0.20) 44%,rgba(0,0,0,0.65) 95%,rgba(0,0,0,0.62) 100%); opacity: 0.5; box-shadow: 0 6px 6px -6px #ffc107 inset; animation: ocean 15s infinite; } .stone { position: relative; width: 3em; height: 1.5em; animation: skip-stone 4s 1.5s infinite; transform: translate(calc(50vw - 2em), 50vh); transition: transform 1s ease-out 0s; padding: 1em; z-index: 2; margin-left: -2em; transform-origin: center center; } .stone:before { background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%); width: 1.75em; height: 0.65em; border-radius: 100%; content: ""; display: block; position: absolute; top: 1.25em; transform: rotate(173deg); left: 1.25em; opacity: 0.75; } .stone:after { background: radial-gradient(circle at 40% 0%, #323232, #0a0a0a 80%, #000000 100%); width: 3em; height: 1.5em; border-radius: 100%; content: ""; display: block; } .stone-shadow { position: absolute; width: 3em; height: 1.5em; padding: 1em; animation: skip-shadow 4s 1.5s infinite; transform: translate(50vw, 50vh); transition: transform 1s ease-out 0s; opacity: 0.35; margin-left: -1.5em; margin-top: -3em; } .stone-shadow:before { background: black; box-shadow: 0 0 1em 0 #000; z-index: 0; position: absolute; width: 1.75em; height: 0.65em; border-radius: 100%; content: ""; display: block; top: 1.25em; left: 1.25em; opacity: 0.75; } .wave { position: relative; left: 50vw; top: 31vh; width: 0px; height: 0px; z-index: 1; } .wave:before, .wave:after { content: ''; position: absolute; top: 0; right: 0; transform: translate(50%) rotateX(75deg); border-radius: 100%; opacity: 0; width: 10px; height: 10px; border: 6px solid rgb(91 174 212 / 0.25); animation: dripple 4s ease-out 1.75s infinite; } .wave:after { animation-delay: 2.5s; } .wave2 { top: 19vh; transform: scale(0.8); } .wave2:before, .wave2:after { animation-delay: 2.25s; } .wave3 { top: 8.5vh; transform: scale(0.6); } .wave3:before, .wave3:after { animation-delay: 2.65s; } .wave4 { top: 0.5vh; transform: scale(0.4); } .wave4:before, .wave4:after { animation-delay: 2.95s; } .wave5 { top: -4vh; transform: scale(0.2); } .wave5:before, .wave5:after { animation-delay: 3.35s; } .wave6 { top: -5.5vh; transform: scale(0.1); } .wave6:before, .wave6:aft.........完整代码请登录后点击上方下载按钮下载查看
网友评论0