H5图标

最新推荐文章于 2022-04-15 11:48:31 发布

拂柳小清风

最新推荐文章于 2022-04-15 11:48:31 发布

阅读量792

点赞数

本文链接：https://blog.youkuaiyun.com/Great_Wow/article/details/108562533

版权

这篇博客探讨了H5图标的设计，特别是那些带有放射状线条背景的图标。通过实例展示，解释了如何实现这样的视觉效果，并提供了相关的实例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实例:

该图标背后有放射状线条

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML5 logo</title>
	<!-- <link rel="stylesheet" type="text/css" href="logo.css"> -->
	<style type="text/css">
		body{
			margin: 0px;
			padding: 0px;
		}
		div{
			position: absolute;
		}
		.bg{
			width: 800px;
			height: 600px;
			background: #f2f2f2;
			overflow: hidden;
		}
		.beam{
			width: 1600px;
			height: 20px;
			background: #fff;
			top:290px;
			left: -400px;
		}
		.d_shield1,.d_shield2,.d_shield3,.d_shield4,.d_shield5,.d_shield6,.d_shield7{
			background: #e15016;
		}
		.d_shield1{
			left: 32px;
			width: 140px;
			height: