div+css实现可昼夜切换的灯塔动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现可昼夜切换的灯塔动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --red: #972627; --red-2: #c17d7d; --white: #e2b59a; --sm: #fcedbb90; --sm-2: #c57356; --sky-1: var(--red); --sky-2: var(--white); --sea-1: #645355; --sea-2: #9c766780; --sea-3: #0e3641; --base-1: #335e53; --base-2: #142c2c; --shine: #fff6; --windows: #5f3300; --reflex: #fff2; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; } body * { transform-style: preserve-3d; } .sky { position: absolute; width: 100%; height: 50%; background: linear-gradient(180deg, var(--sky-1), var(--sky-2)); top: 0; z-index: -1; display: flex; align-items: flex-end; justify-content: center; } .sea { position: absolute; width: 100%; height: 50%; background: linear-gradient(180deg, var(--sea-1), #fff0), radial-gradient(circle at 50% 0%, var(--sea-2) 30%, var(--sea-3) 50%, #fff0 100%), var(--sea-3); top: 50%; z-index: -1; } .content { width: 60vmin; height: 100vmin; background-size: contain; position: relative; display: flex; align-items: center; justify-content: center; } .sky:before, .content:after { content: ""; position: absolute; width: 19vmin; height: 19vmin; background: radial-gradient(circle at 50% 60%, var(--sm-2), var(--sm) 100%); border-radius: 100%; margin-top: -7.75vmin; box-shadow: 0 0.5vmin 0.5vmin 0 var(--sm) inset; clip-path: polygon(0 0, 100% 0, 100% 71%, 0 71%); } .content:after { transform: rotateX(180deg); transform-origin: 50% 71%; opacity: 0.25; background: linear-gradient(180deg, #fff0, var(--sm)), radial-gradient(circle at 50% 50%, #fff0, #fff0 5vmin 8.75vmin, #fff0 calc(9.25vmin + 5px) 100%); box-shadow: 0 -1vmin 1vmin 0 var(--sm) inset; } .sky:before { bottom: -6vmin; } .content * { position: absolute; } .lighthouse { background: #0ff0; width: 11vmin; height: 30vmin; margin-top: -30vmin; perspective: 80vmin; } .base { --rock-1: var(--base-1) 1.1vmin, #fff0 calc(1.1vmin + 3px) 100%; --rock-2: var(--base-1) 1vmin, #fff0 calc(1vmin + 1px) 100%; background: radial-gradient(ellipse at 14% 37%, var(--rock-2)), radial-gradient(ellipse at 86% 37%, var(--rock-2)), radial-gradient(ellipse at 19% 6%, var(--rock-1)), radial-gradient(ellipse at 81% 6%, var(--rock-1)), radial-gradient(ellipse at 63% 32%, var(--rock-1)), radial-gradient(ellipse at 37% 32%, var(--rock-1)), radial-gradient(ellipse at 76% 60%, var(--rock-1)), radial-gradient(ellipse at 24% 60%, var(--rock-1)), radial-gradient(ellipse at 98% 84%, var(--rock-1)), radial-gradient(ellipse at 73% 96%, var(--rock-1)), radial-gradient(ellipse at 50% 72%, var(--rock-1)), radial-gradient(ellipse at 27% 96%, var(--rock-1)), radial-gradient(ellipse at 2% 84%, var(--rock-1)), linear-gradient(180deg, var(--base-1) 0 0.25vmin, #fff0 0 100%), linear-gradient(90deg, #fff0 1vmin, var(--base-2) 0 calc(100% - 1vmin), #fff0 0 100%), linear-gradient(-119deg, #fff0 0 1.25vmin, var(--base-2) calc(0.9vmin) 70%, #fff0 0 100%), linear-gradient(119deg, #fff0 0 1.25vmin, var(--base-2) calc(0.9vmin + 1px) 70%, #fff0 0 100%), linear-gradient(90deg, #fff0 0 0.75vmin, var(--base-1) 0 calc(100% - 0.75vmin), #fff0 0 100%), linear-gradient(-119deg, #fff0 0 0.9vmin, var(--base-1) calc(0.9vmin + 1px) 70%, #fff0 0 100%), linear-gradient(119deg, #fff0 0 0.9vmin, var(--base-1) calc(0.9vmin + 1px) 70%, #fff0 0 100%); width: 11vmin; height: 3vmin; bottom: 0; border-radius: 1.55vmin 1.55vmin 0 0; } .base:before { content: ""; background: linear-gradient(-95deg, #fff0 0 0.25vmin, var(--red-2) calc(0.25vmin + 1px) 0.65vmin, var(--red) calc(0.65vmin + 1px) 6vmin, #fff0 0 100%), linear-gradient(95deg, #fff0 0 0.25vmin, var(--red-2) calc(0.25vmin + 1px) 0.65vmin, var(--red) calc(0.65vmin + 1px) 6vmin, #fff0 0 100%); width: 7.5vmin; height: 2vmin; position: absolute; top: -2vmin; left: 1.75vmin; } .base:after { content: ""; background: linear-gradient(-112deg, var(--red) 0 1vmin, var(--white) calc(1vmin + 1px) 1.25vmin, #fff0 calc(1.25vmin + 1px) 100% ), linear-gradient(112deg, var(--red) 0 1vmin, var(--white) calc(1vmin + 1px) 1.25vmin, #fff0 calc(1.25vmin + 1px) 100%), repeating-linear-gradient(0deg, var(--base-2) 0 0.3vmin, var(--base-1) 0 0.5vmin); width: 4.1vmin; height: 2vmin; position: absolute; top: -2vmin; left: 3.5vmin; background-repeat: no-repeat; background-position: 0 0, 0 0, 5% 0; background-size: 100% 100%, 100% 100%, 90% 100%; } .tower { background: radial-gradient(circle at 50% 100%, var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%), radial-gradient(circle at 50% calc(100% - 0.25vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%), radial-gradient(circle at 50% calc(100% - 0.5vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%), radial-gradient(circle at 50% calc(100% - 0.75vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%), radial-gradient(circle at 50% calc(100% - 1vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%), linear-gradient(-94.5deg, var(--shine) 0 1.85vmin, #fff0 calc(1.85vmin + 1px) 100%), linear-gradient(94.5deg, var(--shine) 0 1.85vmin, #fff0 calc(1.85vmin + 1px) 100%), radial-gradient(circle at 50% 125%, var(--white) 0 9vmin, var(--red) calc(9vmin + 1px) 13vmin, var(--white) calc(13vmin + 1px) 17vmin, var(--red) calc(17vmin + 1px) 21vmin, var(--white) calc(21vmin + 1px) 23vmin); width: 6vmin; height: 19vmin; left: 2.5vmin; top: 6vmin; clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%); } .top { background: linear-gradient(90deg, var(--shine) 0 0.75vmin, #fff0 0 100%), linear-gradient(90deg, var(--shine) 0 0.75vmin, #fff0 0 100%), linear-gradient(90deg, var(--shine) 0 0.7vmin, #fff0 0 100%), linear-gradient(90deg, var(--shine) 0 0.7vmin, #fff0 0 100%), conic-gradient(from -1deg at 8% 89%, #fff0 0 35%, var(--shine) 36% 100%), conic-gradient(from 0deg at 92% 89%, var(--shine) 0 64%, #fff0 65% 100%), radial-gradient(circle at 50% 1.55vmin, #fff, #fc0 0.25vmin, var(--red-2) calc(0.25vmin + 1px) 0.35vmin, #fff0 calc(0.35vmin + 1px) 100%), radial-gradient(circle at 50% 187%, var(--white) 0 7vmin, #fff0 calc(7vmin + 1px) 7.5vmin, var(--white) calc(7.5vmin + 1px) 8.35vmin, #fff0 calc(8.35vmin + 1px) 9.5vmin, var(--white) calc(9.5vmin + 1px) 100% ), linear-gradient(-95deg, #fff0 0 1.4vmin, var(--shine) calc(1.4vmin + 1px) 1.65vmin, var(--red) calc(1.65vmin + 1px) 2.85vmin, #fff0 0 100%), linear-gradient(95deg, #fff0 0 1.4vmin, var(--shine) calc(1.4vmin + 1px) 1.65vmin, var(--red) calc(1.65vmin + 1px) 2.85vmin, #fff0 0 100%); width: 4.65vmin; height: 5.5vmin; left: 3.15vmin; top: 0.75vmin; border-radius: 0.5vmin; clip-path: polygon(0% 96%, 0% 70%, 22% 63%, 24% 53%, 7% 56%, 8% 41%, 25% 38%, 27% 17%, 15% 18%, 16% 10%, 22% 8%, 35% 6%, 54% 5%, 74% 8%, 73% 8%, 82% 10%, 83% 18%, 72% 17%, 75% 37%, 88% 41%, 89% 56%, 77% 54%, 78% 62%, 100% 70%, 100% 96%, 85% 100%, 15% 100%); background-repeat: no-repeat; background-size: 1vmin 1.1vmin, 1vmin 1.1vmin, 1vmin 1.15vmin, 0.45vmin 1.15vmin, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-position: 3.45vmin 0.25vmin, 0.35vmin 0.25vmin, 0vmin 2.1vmin, 3.75vmin 2.1vmin, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } .roof { border: 0.65vmin solid #fff0; border-bottom-color: var(--red); left: 4.9vmin; top: -0.2vmin; } .lighthouse + .lighthouse { transform-origin: 50% 100%; transform: rotateX(180deg); opacity: 0.15; } .lighthouse + .lighthouse .tower { background: radial-gradient(circle at 50% 100%, var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%), radial-gradient(circle at 50% calc(100% - 0.25vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%), radial-gradient(circle at 50% calc(100% - 0.5vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%), radial-gradient(circle at 50% calc(100% - 0.75vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%), radial-gradient(circle at 50% calc(100% - 1vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%), linear-gradient(-94.5deg, #fff2 0 1.65vmin, #fff0 calc(1.65vmin + 1px) 100%), linear-gradient(94.5deg, #fff2 0 1.5vmin, #fff0 calc(1.55vmin + 1px) 100%), radial-gradient(circle at 50% 125%, var(--white) 0 9vmin, var(--red) calc(9vmin + 1px) 13vmin, var(--white) calc(13vmin + 1px) 14vmin, #fff0 18vmin); background-repeat: no-repeat; background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 70%, 100% 70%, 100% 100%; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 100%, 0 100%, 0 0; filter: blur(2px); } .lighthouse + .lighthouse .tower:after { filter: blur(3px); } .lighthouse + .lighthouse .tower:before { opacity: 0; } input { display:none; } label[for=light] { width: 11vmin; cursor: pointer; height: 30vmin; margin-top: -30vmin; clip-path: polygon(30% 0, 70% 0, 95% 100%, 5% 100%); } label[for=night] { position: absolute; bottom: 3vmin; background: #fff; width: 36px; height: 36px; border-radius: 100% 1% 100% 100%; background: radial-gradient(circle at 90% 10%, #fff 0 0.1vmin, #fff0 calc(0.1vmin + 1px) 100%), radial-gradient(circle at 68% 25%, #fff 0 0.1vmin, #fff0 calc(0.1vmin + 1px) 100%), radial-gradient(circle at 85% 40%, #fff 0 0.08vmin, #fff0 calc(0.08vmin + 1px) 100%), radial-gradient(circle at 95% 20%, #fff0 0 2vmin, #fff calc(2vmin + 1px) 100%); cursor: pointer; } .light { width: 0.75vmin; height: 0.75vmin; background: #f600; b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0