css3制作广告栏效果的疑问?
【整理】原文:https://segmentfault.com/a/1190000007087701
本人新手,国庆苦逼加无用班,那是我在夕阳下的奔跑吗?闲来无聊整理以前学习的资料,关于广告栏的效果制作,详情观看[这里][1]。其中用了一个作者自己写的move.js插件也就是移动动画完成(重点就是定时器setinterval如果有人有代码欢迎送上);另一个就是用jq完成,下面主要说说jquery的实现方法吧。
jquery实现的重点就是animate方法,这是[官网][2]。
> **定义和用法**
> animate() 方法执行 CSS 属性集的自定义动画。
> 该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
> **语法 1**
> `$(selector).animate(styles,speed,easing,callback)`
废话少说,下面是详细代码:
dom结构:
1 <div class="dbmove" id="dbmove"></div> 2 <a href="javascript:void(0)" class="dbhide" id="dbhide"></a> 3 <a href="javascript:void(0)" class="dbshow" id="dbshow"></a> 4 css:(dbshow,dohide类似) 5 .dbmove { 6 background: url("db.png") no-repeat 0 0; 7 width: 0px; 8 height: 33px; 9 float: left; 10 } 11 jquery: 12 $(document).ready(function () { 13 $('#dbshow').click(function () { 14 $(this).hide(); 15 $('#dbmove').animate({width: 150}, 500, function () { 16 $('#dbhide').show(); 17 }) 18 }) 19 20 $('#dbhide').click(function () { 21 $(this).hide(); 22 $('#dbmove').animate({width: 0}, 500, function () { 23 $('#dbshow').show(); 24 }) 25 }) 26 })
![图片描述][3]这个是图片资源大家意淫一下效果吧,点击展开,点击收起。
**下面进入重点:CSS3动画的实现?**
写完了想用css实现一个这样的功能,之后进行了简单的百度和尝试,代码如下:
1 @-webkit-keyframes fadeInRight { 2 0% { 3 width: 0; 4 } 5 100% { 6 width: 150px; 7 } 8 9 } 10 .dbmove { 11 background: url("db.png") no-repeat 0 0; 12 width: 0px; 13 height: 33px; 14 float: left; 15 animation-name:fadeInRight;/*动画属性名,也就是我们前面keyframes定义的动画名*/ 16 animation-duration: 2s;/*动画持续时间*/ 17 animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/ 18 animation-delay:1s;/*动画延迟时间*/ 19 animation-iteration-count: 1;/*定义循环资料,infinite为无限次*/ 20 animation-direction: normal;/*定义动画方式*/ 21 }
第一个想到的自然是keyframes动画,以前也就听过,并没有写过这样的代码。经过一段尝试最终失败,现在的效果是默认动画执行一次但是不知道怎么用JS通过点击控制,并且最终动画会还原,不符合预想。希望有人看到来继续完成吧,随记!
最后附上:[JS动画比CSS3动画性能谁更好?][4]
[CSS3 动画][5]
[1]: http://www.imooc.com/learn/22
[2]: http://api.jquery.com/animate/
[3]: /img/bVDTYJ
[4]: https://www.zhihu.com/question/33686030
[5]: http://www.w3school.com.cn/css3/css3_animation.asp