css实现逼真水底世界动画背景效果代码
代码语言:html
所属分类:背景
代码描述:css实现逼真水底世界动画背景效果代码,逼真的光线透过水底 ,蓝色的海洋下暗流涌动。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Asap&display=swap");
:root {
--ratioW: 1;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
overscroll-behavior-x: none;
overscroll-behavior-y: none;
scroll-behavior: smooth;
min-height: 100%;
}
body {
font-family: "Asap", sans-serif;
position: relative;
width: 100vw;
min-height: 100vh;
text-align: center;
overflow-x: hidden;
background: linear-gradient(
to bottom,
oklch(60% 0.2 230),
oklch(60% 0.2 180)
);
color: #333;
font-size: clamp(12px, 5.5vw, 28px);
}
main {
position: relative;
}
section {
position: relative;
width: 100vw;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
h1,
h2,
p,
figcaption {
overflow-wrap: break-word;
max-width: 80vw;
mix-blend-mode: overlay;
transform: translate3d(0, 0, 0); /* for safari */
}
a {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
color: currentColor;
}
h2 {
font-size: 1.3em;
}
ul {
max-width: 80vw;
overflow-x: hidden;
overflow-y: visible;
}
li {
list-style: none;
font-size: 0.8em;
text-align: left;
margin: 0.8em 0;
}
figure {
margin: 3rem 0;
font-size: 0.7em;
color: currentColor;
}
figure img {
display: block;
width: clamp(100px, 50vw, 300px);
border-radius: 10px;
filter: drop-shadow(3px 4px 2px rgba(0, 0, 0, 0.2));
background-color: lightgray;
}
figure a {
color: currentColor;
}
svg {
display: none;
}
#bg {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: linear-gradient(
to bottom,
white,
gray 25%,
gray 60%,
khaki
);
opacity: 0.5;
mix-blend-mode: overlay;
}
#surface {
mix-blend-mode: overlay;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
#surface::before,
#surface::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url("//repo.bfw.wiki/bfwrepo/image/6603bf0fc48e9.png");
background-repeat: repeat-x;
--duration: 8s;
--lowHeight: 30vh;
--highHeight: 70vh;
--layerNum: 2;
--index: 0;
--opacity: 0.4;
-webkit-animation: surface var(--duration) linear infinite;
animation: surface var(--duration) linear infinite;
-webkit-animation-delay: calc(
(var(--duration) / var(--layerNum)) * var(--index) * -1
);
animation-delay: calc(
(var(--duration) / var(--layerNum)) * var(--index) * -1
);
opacity: 0;
-webkit-mask-image: linear-gradient(to top, white, transparent var(--lowHeight));
mask-image: linear-gradient(to top, white, transparent var(--lowHeight));
}
#surface::before {
--index: 0;
transform: scale3d(1, -1, 1);
}
#surface::after {
--index: 1;
transform: scale3d(-1, -1, 1);
}
#caustics {
position: fixed;
bottom: 0;
top: 0;
width: 100vw;
height: 100vh;
filter: url(#noise1);
}
#caustics::before,
#caustics::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url("//repo.bfw.wiki/bfwrepo/image/6603beec09483.png");
background-repeat: repeat;
--duration: 10s;
--gapY: 0px;
background-size: calc(100vw / var(--ratioW)) 30vh;
-webkit-animation: caustics calc(var(--duration) * (var(--ratioW))) linear infinite;
animation: caustics calc(var(--duration) * (var(--ratioW))) linear infinite;
opacity: 0.3;
-webkit-mask-image: linear-gradient(
to top,
white,
transparent,
transparent,
transparent
);
mask-image: linear-gradient(
to top,
white,
transparent,
transparent,
transparent
);
}
#caustics::.........完整代码请登录后点击上方下载按钮下载查看
网友评论0