Home > Article > Web Front-end > css3 small icon prompt effect

css3 small icon prompt effect

高洛峰Original: 2017-02-20 12:48:321575browse

Hurry up and give an example

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/normalize.css" />/*normalize这个css框架呢，可以去搜搜，挺好用的*/
	<link rel="stylesheet" href="css/font-awesome.min.css" />/*这个呢，是小图标css框架，用法和bootstrap差不多*/
	<style>
		*,*:before,*:after{
			-ms-box-sizing:border-box;
			-o-box-sizing:border-box;
			-moz-box-sizing:border-box;
			-webkit-box-sizing:border-box;
			
			box-sizing:border-box;/*这里主要是想真正的widdth就是width，不要把什么padding啊，border啊等加进来，这才真正的符合人的视角*/
		}
		html,body{
			width: 100%;
			height: 100%;
			background: rgba(95, 234, 234, 0.8);
			font-size: 24px;
			font-weight: 600;
			font-family: "arial black";
		}
		ul,li{
			list-style: none;
			display: inline-block;
		}
		a{
			display: block;
			text-decoration: none;
			color:rgba(0,0,0,0.3);
		}
		li{
			padding: 20px 0;
			margin: 0 10px;
		}
		.da{
			width: 700px;
			margin-top: 200px;

			margin-left: 50%;
			-webkit-transform:translateX(-50%);/*这两行代码也是居中的技巧*/

		}
		.da li{
			width: 100px;
			height: 100px;
			
			text-align: center;
			position: relative;
			z-index: 999;/*一定位就要想到z-index，不管有没有用*/
		}
		.da span{
			position: absolute;
			bottom:100%;/*我归之为“巧用100%”，先什么left,top 啊，都不加，光是position看看，因为%是相对于他的父类，如果他的上边贴紧父类的上边框，这就是不是可以考虑用100%了呢？*/
                        left: 60%;
			margin-left: -50%;
                        z-index: 9998;
			width: 80px;
			height: 80px;
			background: #fff;
			border-radius: 50%;/*圆角*/
			color:rgba(12, 130, 130, 0.8);

			opacity: 0;
			transition:opacity 0.3;/*css3很重要的标签，过渡。4个值，标签名（对象是谁）时间（多久）方式（匀速啊，变速啊，先怎么后怎么样啊）延迟时间（等多久开始）我这里只用到前两个*/
		}
		.da span:after{/*做完今天这个，我感觉伪类就是来修修补补，或者拼接用的，当然，他还有一个很好用的东东，就是清除浮动{content:“”;display:block;clear:both,核心这个}*/
			content: "";
			width: 40px;
			height: 40px;
			background: url(imges/tip.svg) no-repeat;/*avg格式的图片，不会因为变大而失真*/
			position: absolute;
			top:100%;
			left:80%;
			margin-left: -50%;
			margin-top: -8px;
			
		}
		.da i{
			position: absolute;
			left:85%;
			margin-left:-50%;
			margin-top:30px;
			margin-bottom: 20px;	
		}
                /*-----------------------接下来就是核心代码，前边是在搭框架-----------------------------------------------------------------*/
		span{
			transition:transform 0.3s;
			-webkit-transition:transform 0.3s;
		}
		span i{
			transition:transform 0.1s;
			-webkit-transition:transform 0.1s;
		}
		li:hover span{
			transform:rotate3d(0,0,0,0deg) translate3d(0,0,0) scale3d(1,1,1);
			-webkit-transform:rotate3d(0,0,0,0deg) translate3d(0,0,0) scale3d(1,1,1);
			opacity: 1;
		}
		li:hover span i{
			transform:scale3d(1,1,1) translate3d(0,0,0);
			-webkit-transform:scale3d(1,1,1) translate3d(0,0,0);
		}/*这里每个类吧相同的都提出来了，相同的是什么？就是最终的状态是一样的*/

                /*接下来就是每个分部分，rotatwd旋转角度 scale缩放 translate平移 其中加了3d就是让他进行3d变换，当然还有一个2d。  */

		span.content1{
			transform-origin: center bottom;
			-webkit-transform-origin: center bottom;
			transform:rotate3d(1,1,1,60deg);
			-webkit-transform:rotate3d(1,1,1,60deg);
		}
		span.content1 i{
			transform:scale3d(0.01,0.01,1);
			-webkit-transform:scale3d(0.01,0.01,1);
		}
		span.content2{
			transform-origin: center bottom;
			-webkit-transform-origin: center bottom;
			transform:translate3d(0,20px,0);
			-webkit-transform:translate3d(0,20px,0);
		}
		span.content2 i{
			transform:translate3d(0,10px,0);
			-webkit-transform:translate3d(0,10px,0);
		}
		span.content3{
			transform-origin: center bottom;
			-webkit-transform-origin: center bottom;
			transform:rotate3d(0,1,0,90deg) translate3d(0,8px,0);
			-webkit-transform:rotate3d(0,1,0,90deg) translate3d(0,8px,0);
		}
		span.content3 i{
			transform:translate3d(0,-2px,0);
			-webkit-transform:translate3d(0,-2px,0);
		}
		span.content4{
			transform:translate3d(0,-12px,0);
			-webkit-transform:translate3d(0,-12px,0);
		}
		span.content4 i{
			transform:translate3d(0,12px,0);
			-webkit-transform:translate3d(0,12px,0);
		}
		span.content5{
			transform:scale(0.01) translate3d(0,10px,0);/*最重要的，就是scale如果你把它缩成0，可能会发生效果不发出现的情况，不行你可以去试，所以尽可能把他弄成0,01*/
			-webkit-transform:scale(0.01) translate3d(0,10px,0);
		}
		span.content5 i{
			transform:translate3d(0,20px,0);
			-webkit-transform:translate3d(0,20px,0);
		}
	</style>
	</head>
	<body>
	<p class="da">
		<ul>
			<li>
				<a href="#">nomalse<span class="content1"><i class="fa fa-camera"></i></span></a>
			</li>
			<li>
				<a href="#">palse<span class="content2" ><i class="fa fa-bicycle"></i></span></a>
			</li>
			<li>
				<a href="#">mate<span class="content3" ><i class="fa fa-bus"></i></span></a>
			</li>
			<li>
				<a href="#">script<span class="content4"><i class="fa fa-ship"></i></span></a>
			</li>
			<li>
				<a href="#">css3<span class="content5"><i class="fa fa-plane"></i></span></a>
			</li>
		</ul>
	</p>
	</body>

</html>

For more css3 small icon prompt effects and related articles, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Things about color in css (legal color values)Next article：Things about color in css (legal color values)

See more

css3 small icon prompt effect

Related articles