css3的一个:hover效果

今天无意看到这么个效果,自己尝试css3写了一下.

点我看栗子->>

css


     p a{cursor: pointer;
		position:
		relative;
	 	width:100px;
	 	height:100px;
	 	border-radius: 50%;
	 	display:inline-block;
	 	line-height: 90px;
	 	text-align:center;
	 	margin:20px;
	 	border:4px #fff solid;
	 	color:#fff;
	}
	p .c1{background:red}
	p .c2{background:green}
	p .c3{background:orange}
	
	
	p .c1:after{box-shadow: 0 0 0 4px red;}
	p .c2:after{box-shadow: 0 0 0 4px green;}
	p .c3:after{box-shadow: 0 0 0 4px orange;}
	
	

	p .icon:hover:after {
		-webkit-transform: scale(1);
		opacity: 1;
		}
		
	p .icon:after{ 
		padding:7px; 
		content: " "; 
		width:100px;
		height:100px;
		position: absolute;
		top:-7px;left:-7px;
		border-radius:50%;
		-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
		-webkit-transform: scale(.8);
		opacity: 0;
	  }

总结一下,主要就是
1.:after伪元素的应用,
2.CSS3 Transition动画效果
3.css3 scale缩放;

发表评论

电子邮件地址不会被公开。 必填项已用*标注