logo图案的切换

最新推荐文章于 2022-02-28 10:47:03 发布

輝年

最新推荐文章于 2022-02-28 10:47:03 发布

阅读量415

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_52908348/article/details/122150797

版权

<body>
	<div class="box">
		<a href="#"></a>
		
	</div>
</body>

先写好主体

* {
			padding: 0;
			margin: 0;
}
		
.box {
			
			width: 55px;
			height: 55px;
			background-color: tomato;
			margin: 100px auto;
			
}

写上取消内外边距

给盒子大小，以及颜色，并居中

a {

            
			display:black;
			width: 110px;
			height: 55px;
			
        }

给a 大小

a::before {
			position: absolute;
			content:'';
			top: 0;
			left: 0;
			width: 55px;
			height: 55px;
			color: #fff;
			font-size: 20px;
			line-height: 55px;
			text-align: center;
			
		}
a::after {
			position: absolute;
			content: '';
			top:0 ;
			right: 0;
			width: 55px;
			height: 55px;
			color: #FFFDEF;
			font-size: 20px;
			line-height: 55px;
			text-align: center;
		}

用伪元素添加图标，并且定位

.box {
			position: relative;
			width: 55px;
			height: 55px;
			background-color: tomato;
			margin: 100px auto;
			overflow: hidden;
		}
 a {
			display: inline-block;
            font-family: 'icomoon';
			position: absolute;
			top:0;
			left: 0;
			width: 110px;
			height: 55px;
			
        }

子绝父相

a:hover {
			left: -55px;
		}
a {
			display: inline-block;
            font-family: 'icomoon';
			position: absolute;
			top:0;
			left: 0;
			width: 110px;
			height: 55px;
			transition: all .5s;
        }

给logo添加图标切换，transition 使切换更为丝滑。

content:'';
这个可以保留空值
转用url()的方法也可以
但是 content:''; 加载的图标，是具有字体属性，调试更为方便
url(), 加载的图标仅是图片属性。

全程序图

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>小米logo</title>
	
	<style type="text/css">
//这是图标加载必须要写 ， 用url()不写
 @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?lmfbsv');
            src: url('fonts/icomoon.eot?lmfbsv#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?lmfbsv') format('truetype'),
                url('fonts/icomoon.woff?lmfbsv') format('woff'),
                url('fonts/icomoon.svg?lmfbsv#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        a {
			display: inline-block;
            font-family: 'icomoon';
			position: absolute;
			top:0;
			left: 0;
			width: 110px;
			height: 55px;
			transition: all .5s;
        }


		* {
			padding: 0;
			margin: 0;
		}
		
		.box {
			position: relative;
			width: 55px;
			height: 55px;
			background-color: tomato;
			margin: 100px auto;
			overflow: hidden;
		}
		a::before {
			position: absolute;
			content:'';
			top: 0;
			left: 0;
			width: 55px;
			height: 55px;
			color: #fff;
			font-size: 20px;
			line-height: 55px;
			text-align: center;
			
		}
		a::after {
			position: absolute;
			content: '';
			top:0 ;
			right: 0;
			width: 55px;
			height: 55px;
			color: #FFFDEF;
			font-size: 20px;
			line-height: 55px;
			text-align: center;
		}
		a:hover {
			left: -55px;
		}
	</style>
</head>
<body>
	<div class="box">
		<a href="#"></a>
		
	</div>
</body>
</html>

輝年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
logo图案的切换

<body> <div class="box"> <a href="#"></a> </div></body>先写好主体* { padding: 0; margin: 0;} .box { width: 55px; height: 55px; background-color: tomato; margin: 100px auto; }写上取消内.
复制链接

扫一扫