井井客

搜索

css3制作鼠标移上去放大的效果

现在大部分童鞋都能用CSS3做鼠标移上去放大的,写上来只是方面下次可以快速查到transition、transform、animation、keyframes这几个属性。

css3制作鼠标移上去放大的效果

虽然代码整不难,但是感觉这个小例子在使用CSS3动画方面的知识面还挺广的,基本上动画效果也就是上面的四点了。

贴一下代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css3制作鼠标移上去放大的效果</title>
		<style>
			body { padding: 200px; background: #eee;}
			/*内圈初始值*/
			.link {
				display: block;
				width:50px; height: 50px; line-height:50px;
				font-size: 50px; color: #fff; background: blue;
				border-radius: 30px; border: 6px solid #fff;
				text-align: center; text-decoration: none;
				position:relative;
				cursor: pointer;
				transition:all 0.2s; /* 动画  */
			}
			/*定义外圈初始值*/
			.link:after {
				display: block;
				position: absolute; top: 0; left: 0;
				content: '';
				width: 50px; height: 50px; border-radius: 25px;
				background: red; opacity: 0;
			}
			
			/*定义鼠标移上去时内圈的变化*/
			.link:hover {
				background:red; transform:scale(1.3);
			}
			/*定义鼠标移上去时的外圈不间断的动画效果*/
			.link:hover:after {
        		animation:scaleDG 1s infinite linear;
			}
			
			/*定义的动画过渡效果--用于animation*/
			@keyframes scaleDG{
				0%{ transform:scale(0.2); opacity: 1; }
				20%{ transform:scale(1); opacity: 0.4;}
				70%{ transform:scale(2); opacity: 0.2;}
				100%{ transform:scale(2.5); opacity: 0;}
			}
			
		</style>
	</head>
	<body>
		<a class="link">+</a>
	</body>
</html>

有点注释,很好理解的~

文章TAG:css3

作者:井井客原创来源:原创
本文标题:css3制作鼠标移上去放大的效果
本文链接:/c/09186.html

上一篇:正则匹配英文句子
下一篇:scss中为需要前缀的属性定义个@mixin

文章分类

相关阅读

随便看看