css实现不同季节的温度计温度指示动画切换效果代码-html代码-BFW代码库

css实现不同季节的温度计温度指示动画切换效果代码

代码语言：html

所属分类：其他

代码描述：css实现不同季节的温度计温度指示动画切换效果代码，点击不同的天气图标切换不同的温度。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.0.css">


    <style>
        html {
        	width: 100vw;
        	height: 100vh;
        }
        
        h1 {
        	font-size: 22px;
        	font-family: sans-serif;
        	text-align: center;
        	margin-bottom: 5px;
        }
        
        .thermometer {
        	width: 200px;
        	margin: 0 auto;
        	position: relative;
        }
        
        .thermometer-base,
        .thermometer-body {
        	background-color: #ededfa;
        	border: 15px solid #d8d9e8;
        	margin: 0 auto;
        }
        
        .thermometer-base,
        .thermometer-base-fill {
        	margin: 0 auto;
        	border-radius: 50%;
        	z-index: 0;
        }
        
        .thermometer-base {
        	height: 120px;
        	width: 120px;
        }
        
        .thermometer-base::before {
        	content: "";
        	background-color: #db1d1d;
        	height: 15px;
        	width: 40px;
        	position: absolute;
        	left: 80px;
        	z-index: 1;
        }
        
        .thermometer-base-fill {
        	background-color: #db1d1d;
        	height: 98px;
        	width: 98px;
        	position: relative;
        	top: 11px;
        	transition: top 0.5s cubic-bezier(0.33, 1, 0.68, 1);
        }
        
        .thermometer-body,
        .thermometer-body-fill {
        	margin: 0 auto;
        	border-radius: 50px 50px 0 0;
        	z-index: 1;
        }
        
        .thermometer-body {
        	height: 325px;
        	width: 60px;
        	border-bottom: 0;
        	position: relative;
        	bottom: -23px;
        	overflow: hidden;
        }
        
        .thermometer-body-fill {
        	background-color: #db1d1d;
        	height: 320px;
        	width: 40px;
        	position: relative;
        	top: 160px; /* lowest value is 11px - highest value is 300px */
        	transition: top 0.5s linear;
        }
        
        .controls {
        	text-align: center;
        	position: absolute;
        	top: 38px;
        	right: -40px;
        	overflow: visible;
        }
        
        .btn {
        	color: #2d2930;
        	background-color: #dbdbdb;
        	padding: 5px;
        	height: 45px;
        	width: 45px;
        	margin-bottom: 30px;
        	border-radius: 50%;
        	border: none;
        	filter: drop-shadow(3px 3px 4px #333333);
        	box-shadow: inset 3px 3px 5px #fff;
        	position: relative;
        	display: block;
        	cursor: pointer;
        	transition: transform 0.2s linear;
        }
        
        .btn:hover {
        	transform: scale(1.15);
        }
        
        i {
        	pointer-events: none;
        }
        
        .very-hot-bg {
        	background: rgb(232, 154, 30);
        	background: linear-gradient(
        		0deg,
        		rgba(232, 154, 30, 1) 0%,
        		rgba(232, 141, 30, 1) 35%,
        		rgba(232, 50, 30, 1) 100%
        	);
        }
        
        .hot-bg {
        	background: rgb(229, 232, 30);
        	background: linear-gradient(
        		0deg,
        		rgba(229, 232, 30, 1) 0%,
        		rgba(232, 211, 30, 1) .........完整代码请登录后点击上方下载按钮下载查看