div+css实现可昼夜切换的灯塔动画效果代码-html代码-BFW代码库

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, .........完整代码请登录后点击上方下载按钮下载查看