css绘制红色火星效果代码-html代码-BFW代码库

css绘制红色火星效果代码

代码语言：html

代码描述：css绘制红色火星效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        :root {
        	--black: #000;
        	--grey: #7d808a;
        	--red: #e21a35;
        	--salmon: #f07787;
        	--white: #fff;
        	--white75: #ffffff75;
        	--white0: #ffffff00;
        }
        
        *,
        *::after,
        *::before,
        html,
        body {
        	box-sizing: border-box;
        	margin: 0;
        	padding: 0;
        }
        
        body {
        	background-color: var(--grey);
        	display: grid;
        	height: 100vh;
        	place-items: center;
        }
        
        #frame {
        	background-color: var(--white);
        	border: 2vmin solid var(--black);
        	box-sizing: content-box;
        	box-shadow: 0 4vmin 8vmin -4vmin var(--black);
        	height: 80vmin;
        	padding: 4vmin;
        	position: relative;
        	width: 50vmin;
        }
        
        #canvas {
        	background-color: var(--black);
        	height: 80vmin;
        	display: grid;
        	overflow: hidden;
        	position: relative;
        	place-items: center;
        }
        
        .strip {
        	display: flex;
        	flex-direction: column-reverse;
        	flow-wrsp: row wrap; 
        	height: 40vmin;
        	position: absolute;
        	top: 0.25vmin;
        	width: 100%;
        }
        
        .strip s {
        	border-top: 0.2vmin solid var(--white);
        	margin: 4vmin 0 0;
        	width: 100%;
        }
        
        .circle {
        	background: radial-gradient(
        			circle at 35% 25%,
        			var(--white75),
        			var(--white0) 40%
        		),
        		radial-gradient(circle.........完整代码请登录后点击上方下载按钮下载查看