html css animate,Animate.css

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

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

HTML Markup

test

你要有效果,首先应该确认在哪个元素上有动画效果,应该我们就需要一个元素,因此先创建一个简单的测试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;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值