利用scale来实现图标的缩放

GAVINVSwithCAILE

已于 2022-08-01 00:27:25 修改

阅读量134

点赞数

分类专栏： HTML5 文章标签： css html

于 2022-08-01 00:25:18 首次发布

本文链接：https://blog.csdn.net/GAVINVSwithCAILE/article/details/126090405

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

前言
一、图标的放大
总结

前言

下面是安踏的品牌介绍页面的部分模块编写

一、图标的放大

在这里插入图片描述

<div class="culture-tabs">
					<a href="#" class="culture-tab">
						<span class="story tab-icon"></span>
						<span class="tab-name">品牌故事</span>
					</a>
					<a href="#" class="culture-tab">
						<span class="culture tab-icon"></span>
						<span class="tab-name">企业文化</span>
					</a>
					<a href="#" class="culture-tab">
						<span class="history tab-icon"></span>
						<span class="tab-name">大事记</span>
					</a>
					<a href="#" class="culture-tab">
						<span class="logo tab-icon"></span>
						<span class="tab-name">标识的含义</span>
					</a>
					<a href="#" class="culture-tab">
						<span class="signed tab-icon"></span>
						<span class="tab-name">签约资源</span>
					</a>
					<a href="#" class="culture-tab">
						<span class="responsibility tab-icon"></span>
						<span class="tab-name">社会责任</span>
					</a>
					<a href="#" class="culture-tab">
						<span class="sendword tab-icon"></span>
						<span class="tab-name">领导人寄语</span>
					</a>
				</div>

.culture-tabs{
	height: 210px;
	width: 100%;
	padding-left: 50px;
}
.culture-tab{
	    float: left;
	    width: 135px;
	    margin: 0 9px 9px;
	    height: 200px;
	    border-radius: 10px;
	    background: #fff;
	    text-align: center;
		
		border: 1px gainsboro solid;
}
.culture-tab .tab-icon{
	display: block;
	    height: 60px;
	    width: 60px;
	    margin: 10px auto;
	    border-radius: 50%;
	    overflow: hidden;
	    background-repeat: no-repeat;
	    background-size: 100%;
	    background-position: center center;
		margin-top: 45px;
}
.tab-name{
	    color: #000;
	    font-weight: 600;
	    font-size: 16px;
		display: block;
		height: 40px;
		width: 100%;
		text-align: center;
		line-height: 40px;
}

.culture-tabs a:hover{ 
	transform: scale(1.3);
}
.culture-tab .story{
	background-image: url(	https://img.fishfay.com/theme/images/antacom/culture/icon-story-r.svg);
}
.culture-tab .culture{
	background-image: url(	https://img.fishfay.com/theme/images/antacom/culture/icon-culture-r.svg);
}
.culture-tab .history{
	background-image: url(	https://img.fishfay.com/theme/images/antacom/culture/icon-history-r.svg);
}
.culture-tab .logo{
	background-image: url(	https://img.fishfay.com/theme/images/antacom/culture/icon-logo-r.svg);
}
.culture-tab .signed{
	background-image: url(	https://img.fishfay.com/theme/images/antacom/culture/icon-signed-r.svg);
}
.culture-tab .responsibility{
	background-image: url(	https://img.fishfay.com/theme/images/antacom/culture/icon-responsibility-r.svg);
}
.culture-tab .sendword{
	background-image: url(	https://img.fishfay.com/theme/images/antacom/culture/icon-sendword-r.svg);
}