Digg StumbleUpon LinkedIn YouTube Flickr Facebook Twitter RSS Reset

纯通过CSS创建一个图标

.iconContainer
	{
		background: @primary;
		margin: 20px auto;
		border-radius: 100%;
		display: block;
		padding: 10px;
		width: 200px;
		-webkit-transition: all .2s linear;
	}
.iconContainer:hover
	{
		background: desaturate(@primary,50%);
		-webkit-transform: rotate(-15deg);
	}
.icon
	{
		background: #FFF;
		width: 160px;
		height: 150px;
		border-radius: 100%;
		margin: 10px auto;
		display: block;
		padding: 15px 10px;
	}
.handlebar
	{
		display: block;
		margin: 20px auto 0;
		padding: 5px 0;
		background: #FFF;
		width: 60px;
		border: 10px solid #777;
		border-bottom: none;
		box-sizing: border-box;
		-moz-box-sizing: padding-box;
	}
.suitcase
	{
		background: #777;
		width: 120px;
		margin: 0 auto;
		height: 80px;
	}

No comments yet.

Leave a Comment

You must be logged in to post a comment.