CSS3动画按钮

CSS 2014年11月12日 ,

今天给枫竹梦给大家介绍一下基于CSS3动画的简单应用。现在针对Web开发,对于CSS的钟爱程度达到了能用CSS实现的效果绝对不用javascript,即使代码量更大。

CSS动画按钮

先看效果,再说代码。(IE10及以上)

将鼠标移动到下面试试看。

CSS实现

下面是HTML结构。其中backtext中的内容可以任意更改。

<div class="fcontainer">
	<div class="backtext"><b>FURZOOM</b><br />专注于wordpress<br />主题和插件开发</div>
	<div class="front">Click Me</div>
</div>

下面css代码。实现的要点在于

  1. 设定父容器的overflow: hidden;
  2. animation指定动画、动画时间等参数。
  3. transform对内容进行变换。transform-origin指定变换中心。
  4. keyframes设置要执行的动画的效果。
.fcontainer{
		font-family: Verdana;
		font-size: 12px;
		color:#222;
		width:150px;
		height:150px;
		background: transparent url(logo3-200.png) center center no-repeat;
		cursor: pointer;
		position:relative;
		overflow:hidden;
	}
	.backtext{
		position:absolute;
		bottom: 10px;
		right: 10px;
		text-align:right;
	}
	.front{
		opacity:0;
	}
	.fcontainer:hover .front{
		width: 150px;
		height: 150px;
		position: absolute;
		line-height: 150px;
		font-size: 30px;
		color: #eee;
		text-align:center;
		z-index: 1;
		opacity: 1;
		background-color: rgba(0,0,0,0.6);
		-webkit-animation: ani 0.4s ease-in;
		-webkit-transform-origin: 0% 100%;
		-moz-animation: ani 0.4s ease-in;
		-moz-transform-origin: 0% 100%;
		-ms-animation: ani 0.4s ease-in;
		-ms-transform-origin: 0% 100%;
		animation: ani 0.4s ease-in;
		transform-origin: 0% 100%;
	}
	@-webkit-keyframes ani{
		0% {opacity: 0; -webkit-transform: rotate(-45deg);}
		100% {opacity: 1; -webkit-transform: rotate(0deg); }
	}
	@-moz-keyframes ani{
		0% {opacity: 0; -moz-transform: rotate(-45deg);}
		100% {opacity: 1; -moz-transform: rotate(0deg); }
	}
	@-ms-keyframes ani{
		0% {opacity: 0; -ms-transform: rotate(-45deg);}
		100% {opacity: 1; -ms-transform: rotate(0deg); }
	}
	@keyframes ani{
		0% {opacity: 0; transform: rotate(-45deg);}
		100% {opacity: 1; transform: rotate(0deg); }
	}

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
日志标题:《CSS3动画按钮》
日志链接:http://furzoom.com/css3-animation/
博客名称:枫竹梦

【上一篇】
【下一篇】

1 篇回应 (访客:1 篇, 博主:0 篇)

  1. LIGHTTP 2015-29-05

    我喜欢这种动画按钮!

    #-49楼

插入图片

NOTICE1:请申请gravatar头像,没有头像的评论可能不会被回复!

回到顶部