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-index: 2;
        	animation: flicker 2.5s linear infinite;
        }
        #flame:after {
        	content: "🔥";
        	font-size: 28px;
        	transition-duration: 1s;
        }
        @keyframes flicker {
        	0% {
        		left: 50%;
        		transform: translatex(-50%) skew(0deg);
        		opacity: 1;
        		text-align: center;
        	}
        	10% {
        		left: 50%;
        		transform: translatex(-50%) skew(10deg);
        		opacity: 0.5;
        		text-align: center;
        	}
        	15% {
        		left: 50%;
        		transform: translatex(-50%) skew(0deg);
        		opacity: 0.8;
        		text-align: center;
        	}
        	25% {
        		left: 50%;
        		transform: translatex(-50%) skew(-10deg);
        		opacity: 0.7;
        		text-align: center;
        	}
        	30% {
        		left: 50%;
        		transform: translatex(-50%) skew(5deg);
        		opacity: 1;
        		text-align: center;
        	}
        	40% {
        		left: 50%;
        		transform: translatex(-50%) skew(-5deg);
        		opacity: 0.8;
        		text-align: center;
        	}
        	45% {
        		left: 50%;
        		transform: translatex(-50%) skew(0deg);
        		opacity: 0.5;
        		text-align: center;
        	}
        	55% {
        		left: 50%;
        		transform: translatex(-50%) skew(10deg);
        		opacity: 0.7;
        		text-align: center;
        	}
        	70% {
        		left: 50%;
        		transform: translatex(-50%) skew(-10deg);
        		opacity: 1;
        		text-align: center;
        	}
        	80% {
        		left: 50%;
        		transform: translatex(-50%) skew(-11deg);
        		opacity: 0.8;
        		text-align: center;
        	}
        	90% {
        		left: 50%;
        		transform: translatex(-50%) skew(-11deg);
        		opacity: 0.6;
        		text-align: center;
        	}
        	100% {
        		left: 50%;
        		transform: translatex(-50%) skew(0deg);
        		opacity: 1;
        		text-align: center;
        	}
        }
        #wax_left {
        	position: absolute;
        	top: 57px;
        	left: 50%;
        	transform: translatex(-30px) rotatey(180deg);
        	font-size: 20px;
        	transition-duration: 1s;
        }
        #wax_right {
        	position: absolute;
        	top: 57px;
        	left: 50%;
        	transform: translatex(6px);
        	font-size: 20px;
        	transition-duration: 1s;
        }
        .candle_bottom {
        	position: absolute;
        	top: 455px;
        	left: 50%;
        	transform: translatex(-50%);
        	width: 50px;
        	height: 20px;
        	background-image: linear-gradient(
        		to right,
        		#fff,
        		#eee,
        		#eee,
        	.........完整代码请登录后点击上方下载按钮下载查看