纯html+css打造一款的电台图标

这篇文字主要分享的是一款国外大佬用纯html+css打造的一款电台图标,小编有努力翻看代码确确实实就是纯html+css没有一丁点的图片。

效果如下:

代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}

		body {
			background-color: #E5C657;
		}

		.radio {
			display: block;
			width: 540px;
			height: 330px;
			margin: 150px auto 0 auto;
			margin: calc(50vh - 160px) auto 0 auto;
			border-radius: 30px;
			background-image: linear-gradient(135deg, #C0BDAE, #B8B9B3, #E5E1E0);
			box-shadow: 0 0 0 8px #DCE3E0 inset, 0px 80px 60px -70px #384140;
			position: relative;
		}

		.speaker {
			display: block;
			width: 495px;
			height: 290px;
			position: absolute;
			left: 0;
			right: 0;
			margin-left: auto;
			margin-right: auto;
			top: 20px;
			border-radius: 4px 4px 12px 12px;
			background-image: radial-gradient(transparent 30%, #F1E9E6 40%), linear-gradient(#EAE7E7, transparent), linear-gradient(90deg, #EAE7E7, transparent), radial-gradient(#141912 50%, transparent 50%), linear-gradient(135deg, #A8A39D, #9CA19A);
			background-size: 13px 13px, 100% 2px, 2px 100%, 290px 290px, 100% 100%;
			background-repeat: repeat, repeat, repeat, no-repeat, no-repeat;
			background-position: 0 0, 20px 0, 0 0;
			box-shadow: 0 0 0.5px 0.75px #222C21;
		}

		.button {
			display: block;
			width: 45px;
			height: 45px;
			border-radius: 30px;
			position: absolute;
			bottom: 15px;
			background-color: blue;
			background-image: radial-gradient(#EFF0F4 58%, transparent 62%), radial-gradient(#E0E2DF 20%, #CDC8CB 50%);
			background-size: 100% 100%, 300% 300%;
			background-repeat: no-repeat;
			background-position: 3px 2px, -80px -50px;
		}

		.button.right {
			right: 50px;
			box-shadow: 15px 10px 20px -8px #717168, 0 0 1.5px -0.5px #717168;
		}

		.button.left {
			right: 145px;
			box-shadow: 15px 15px 24px -8px #717168, 0 0 1.5px -0.5px #717168;
		}

		.selector {
			display: block;
			width: 200px;
			height: 200px;
			border-radius: 100px;
			background-color: black;
			position: absolute;
			top: 15px;
			right: 25px;
			background-image: radial-gradient(#7D7E84 64%, transparent 65%), radial-gradient(#9CA9A8 20%, #7E828D 60%, #888B92);
			background-repeat: no-repeat;
			background-position: 2px 2px, -175px -175px;
			background-size: 100% 100%, 200% 200%;
		}

		.info {
			display: block;
			width: 165px;
			height: 165px;
			border-radius: 100px;
			position: absolute;
			right: 15px;
			bottom: 15px;
			background-image: radial-gradient(#E2EBED 23%, transparent 24%), radial-gradient(black 0%, transparent 70%), linear-gradient(transparent, transparent), linear-gradient(-45deg, transparent 49%, #BB2B39 50% 52%, transparent 53%), linear-gradient(#AFB5B3 50%, #999795 50%);
			background-image: radial-gradient(#E2EBED 23%, transparent 24%), radial-gradient(black 0%, transparent 70%), conic-gradient(transparent 0% 14%, rgba(245, 254, 254, 0.3) 16% 19%, rgba(255, 255, 255, 0.6) 25% 30%, rgba(245, 254, 254, 0.2) 32% 35%, transparent 40% 65%, rgba(245, 254, 254, 0.4) 68% 73%, rgba(255, 255, 255, 0.6) 76% 80%, rgba(245, 254, 254, 0.2) 83% 85%, transparent 89% 100%), linear-gradient(-45deg, transparent 49%, #BB2B39 50% 52%, transparent 53%), linear-gradient(#AFB5B3 50%, #999795 50%);
			background-size: 100% 100%, 60px 60px, 100% 100%, 50% 50%, 100% 100%;
			background-repeat: no-repeat;
			background-position: 0 0, 58px 57px, 0 0, 100% 0, 0 0;
			box-shadow: -6px 0px 1px #7E828D inset, 4px 4px 8px -3px #191418 inset, 5px 5px 20px -10px #384140 inset;
		}
	</style>
</head>
<body>
	<div class="radio" aria-label="Braun radio illustration">
		<div class="speaker">
			<div class="selector">
				<div class="info"></div>
			</div>
			<div class="button right"></div>
			<div class="button left"></div>
		</div>
	</div>
</body>
</html>

实现及原理

经过小编一番研究,此强大的代码中貌似是使用了css的函数radial-gradient() ,因为小编不是专业的前端大牛,就不带大家一一剖析了,要想仔细了解这个函数的可以点击下面的地址:

CSS radial-gradient() 函数
原项目地址

人已赞赏
实用片段

css悬停特效

2020-4-25 17:37:39

实用片段

渐变文字+鼠标悬停效果

2020-4-25 18:07:36

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索