css+js实现蜡烛燃烧计时器效果代码-html代码-BFW代码库

css+js实现蜡烛燃烧计时器效果代码

代码语言：html

所属分类：其他

代码描述：css+js实现蜡烛燃烧计时器效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        :root {
        	--bg: #e0ffff;
        }
        body {
        	background: var(--bg);
        }
        hr {
        	margin-top: 42px;
        	width: 150px;
        	border-width: 0.5px;
        	border-color: #0000ff;
        }
        hr:nth-child(1) {
        	margin-top: 70px;
        }
        span {
        	position: relative;
        	top: -20px;
        	left: calc(50% + 100px);
        	color: #00f;
        }
        #span {
        	top: -70px;
        }
        .candle_wrapper {
        	position: absolute;
        	top: 8px;
        	left: 50%;
        	transform: translatex(-50%);
        	width: 100px;
        	height: 435px;
        	overflow: hidden;
        }
        #wick {
        	position: absolute;
        	top: 58px;
        	left: 50%;
        	transform: translatex(-50%);
        	width: 2px;
        	height: 7px;
        	background-image: linear-gradient(#000, #888, #fcfcfc);
        	border: 1px solid #000;
        	transition-duration: 1s;
        	z-index: 2;
        }
        #flame {
        	position: absolute;
        	top: 23px;
        	left: 50%;
        	transform: skew(0deg);
        	display: none;
        	width: 100px;
        	text-align: center;
        	z.........完整代码请登录后点击上方下载按钮下载查看