css绘制温度计图标效果代码-html代码-BFW代码库

css绘制温度计图标效果代码

代码语言：html

代码描述：css绘制温度计图标效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
:root {
	--size: 1.25vmin;
	--bgr-color: #00000080;
	--ico-color: #b5161d;
}

html {
	height: 100vh;
}

body {
	height: 100vh;
	overflow: hidden;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

body:before {
	content: "";
	position: absolute;
	left: -1px;
	width: 50%;
	height: 100%;
	background: linear-gradient(315deg, #ff7777 0%, #e50914 74%);
	border-right: 2px solid #0006;
}

body:after {
	content: "";
	position: absolute;
	right: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(315deg, #8cdbff 0%, #00a4e4 74%);
	z-index: -1;
}

.icon-temp {
	width: calc(var(--size) * 20);
	height: calc(var(--size) * 20);
	border: 0;
	border-radius: 100%;
	outline: none;
	cursor: pointer;
	/*background: var(--bgr-color);*/
	position: relative;
	background: linear-gradient(145deg, #d41e26, #fb232d);
	box-shadow: 12px 12px 24px #ba1a21, -12px -12px 24px #ff2833;
}

.icon-temp:before {
	width: calc(var(--size) * 5.5);
	height: calc(var(--size) * 10.2);
	position: absolute;
	content: "";
	border-radius: calc(var(--size) * 3) calc(var(--size) * 3) 0 0;
	top: calc(var(--size) * 2.6);
	left: calc(var(--size) * 7.25);
	background: 
		conic-gradient(from 90deg at 65% 50%, var(--ico-color) 0 25%, #fff0 0 100%), 
		conic-gradient(from 90deg at 78% 15%, var(--ico-color) 0 25%, #fff0 0 100%), 
		conic-gradient(from 0deg at 75% 25%, var(--ico-color) 0 25%, #fff0 0 100%), 
		conic-gradient(from 90deg at 75% 75%, var(--ico-color) 0 25%, #fff0 0 100%), 
		radial-gradient(circle at 50% 60%, #fff0 0 65%, var(--ico-color) calc(65% + 1px)), 
		linear-gradient(90deg, var(--ico-color) 0 30%, #fff0 0 100%), 
		repeating-linear-grad.........完整代码请登录后点击上方下载按钮下载查看