Animate.css

特别声明:开通VIP通道,年费价格为 ¥199.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

Animate.css是由Dan EdenDaniel Eden使用CSS3animation制作的动画效果的CSS集合。换句话说:Animate.css就是一大堆的很酷,很有趣,而且很炫又能跨浏览器的动画效果样式集锦,你可以直接使用到您的项目中。

要在你的项目中使用,简单的很,就是三步完成:

HTML Markup

		<div id="test">test</div>
	

你要有效果,首先应该确认在哪个元素上有动画效果,应该我们就需要一个元素,因此先创建一个简单的测试HTML。

1、创建动画效果:

利用keyframes来定制作动画效果,比如说下面我们制作的一个简单的“bounce”动画效果。这个效果很简单,就是在不同的的位置改变元素的在Y轴的位置,从而达到一种上下移动的效果:

		@-webkit-keyframes bounce {
			0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
			40% {-webkit-transform: translateY(-30px);}
			60% {-webkit-transform: translateY(-15px);}
		}

		@-moz-keyframes bounce {
			0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
			40% {-moz-transform: translateY(-30px);}
			60% {-moz-transform: translateY(-15px);}
		}

		@-ms-keyframes bounce {
			0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);}
			40% {-ms-transform: translateY(-30px);}
			60% {-ms-transform: translateY(-15px);}
		}

		@keyframes bounce {
			0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
			40% {transform: translateY(-30px);}
			60% {transform: translateY(-15px);}
		}
	

2、设置元素的基本样式

为了让其更好看一点,给元素加上一些基本样式

		#test {
			text-align: center;
			background: #39c;
			padding: 10px;
			width: 180px;
			color: #fff;
			margin: 0 auto;
			text-shadow: 0 1px 0 rgba(0,0,0,.3);
			background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%);
			background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%);
			background-image: linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%);
			border-radius: 5px;
			border: 1px solid #17a;
			box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
			font-weight: bold;
			
			-webkit-backface-visibility: hidden;
			
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css3/animate-css

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部