css3 icon导航

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

css3 icon导航

本实例主要应用了border-radius,transition,font-face。先设置一个宽度并设置overflow为hidden,然后鼠标滑过用transition来改变其宽度,以显示文字信息部分。至于三个icon,前面两个为font-face做的,后面一个为图片。至于三个icon,前面两个为font-face做的,后面一个为图片。

demodownload

css主要代码:

.appstorebutton {
	height: 80px;
	width: 80px;
	margin: 50px;
	position: relative;
	overflow: hidden;
	float: left;

	-webkit-border-radius: 40px;
	   -moz-border-radius: 40px;
			border-radius: 40px;

	-webkit-transition: width 1s ease;
	   -moz-transition: width 1s ease;
		 -o-transition: width 1s ease;
		-ms-transition: width 1s ease;
			transition: width 1s ease;
}

.appstorebutton:hover {
	width: 275px;
}

.appstorebutton a {
	color: white;
	text-decoration: none;
}

/*Paragraph*/
.appstorebutton p {
	font: 30px/1 Helvetica, Arial, sans-serif;
	text-align: center;
	color: white;
	margin: 4px 0 0 65px;
	width: 180px;
}

.appstorebutton p small {
	font-size: 15px;
}

.iphone small:before {
	content: "O";
	position: absolute;
	font: 70px/1 'ModernPictogramsNormal', Helvetica, sans-serif;
	top: 10px;
	left: 20px;
}

.ipad small:before {
	content: "Q";
	position: absolute;
	font: 70px/1 'ModernPictogramsNormal', Helvetica, sans-serif;
	top: 10px;
	left: 13px;
}

.mac small:before {
	content: url(imac.png);
	position: absolute;
	top: 22px;
	left: 18px;
}


/*Button Colors*/
.iphone {
	background: #7b7a7f;
}

.ipad {
	background: #2ea9dc;
}

.mac {
	background: #dc2e2e;
}

/*Font-Face*/
@font-face {
	font-family: 'ModernPictogramsNormal';
	src: url('modernpics-webfont.eot');
	src: url('modernpics-webfont.eot?#iefix') format('embedded-opentype'),
		 url('modernpics-webfont.woff') format('woff'),
		 url('modernpics-webfont.ttf') format('truetype'),
		 url('modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
	font-weight: normal;
	font-style: normal;
}

demodownload

查看更多:http://designshack.net/articles/css/appstorebuttons/

 

Air Max 95 Stussy

如需转载,烦请注明出处:https://www.w3cplus.com/demo/426.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部