css实现一个灯塔效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现一个灯塔效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
:root {
--bg-color: #0e080f;
--brown: #6b2412;
--orange: #e5501b;
--light-brown: #983315;
--white: #f5e1c4;
--skin-color: #e19d61;
--lighter-brown: #a45a3a;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: var(--white)
}
.container {
position: relative;
background: rgb(68,39,17);
background: radial-gradient(circle, rgba(68,39,17,1) 0%, rgba(14,8,15,1) 57%);
height: 600px;
width: 800px;
overflow: hidden;
}
.c1 {
position: absolute;
background: rgb(64,32,4);
background: radial-gradient(circle, rgba(64,32,4,1) 0%, rgba(66,35,17,1) 3%, rgba(14,8,15,1) 44%);
height: 900px;
width: 900px;
border-radius: 100%;
top: -189px;
left: -50px;
animation: glowing 5s forwards linear infinite;
animation-delay: 9s;
}
.c2 {
position: absolute;
background: rgb(117,58,6);
background: radial-gradient(circle, rgba(117,58,6,1) 6%, rgba(66,35,17,1) 26%, rgba(14,8,15,1) 72%);
height: 700px;
width: 700px;
border-radius: 100%;
top: -100px;
left: 50px;
animation: glowing 5s forwards linear infinite;
animation-delay: 8s;
}
.c3 {
position: absolute;
background: rgb(163,85,18);
background: radial-gradient(circle, rgba(163,85,18,1) 0%, rgba(31,16,14,1) 74%, rgba(14,8,15,1) 100%);
heig.........完整代码请登录后点击上方下载按钮下载查看
网友评论0