css3制作广告栏效果的疑问？

2019年9月14日 129次阅读 来源: whhlu

本人新手，国庆苦逼加无用班，那是我在夕阳下的奔跑吗？闲来无聊整理以前学习的资料，关于广告栏的效果制作，详情观看这里。其中用了一个作者自己写的move.js插件也就是移动动画完成（重点就是定时器setinterval如果有人有代码欢迎送上）；另一个就是用jq完成，下面主要说说jquery的实现方法吧。
jquery实现的重点就是animate方法，这是官网。

定义和用法
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
语法 1
$(selector).animate(styles,speed,easing,callback)

废话少说，下面是详细代码：

dom结构：

<div class="dbmove" id="dbmove"></div>
<a href="javascript:void(0)" class="dbhide" id="dbhide"></a>
<a href="javascript:void(0)" class="dbshow" id="dbshow"></a>

css：（dbshow，dohide类似）

.dbmove {
        background: url("db.png") no-repeat 0 0;
        width: 0px;
        height: 33px;
        float: left;
    }

jquery:

$(document).ready(function () {
    $('#dbshow').click(function () {
        $(this).hide();
        $('#dbmove').animate({width: 150}, 500, function () {
            $('#dbhide').show();
        })
    })

    $('#dbhide').click(function () {
        $(this).hide();
        $('#dbmove').animate({width: 0}, 500, function () {
            $('#dbshow').show();
        })
    })
})

《css3制作广告栏效果的疑问？》这个是图片资源大家意淫一下效果吧，点击展开，点击收起。

下面进入重点：CSS3动画的实现？
写完了想用css实现一个这样的功能，之后进行了简单的百度和尝试，代码如下：

@-webkit-keyframes fadeInRight {
    0% {
        width: 0;
    }
    100% {
        width: 150px;
    }

}
.dbmove {
    background: url("db.png") no-repeat 0 0;
    width: 0px;
    height: 33px;
    float: left;
    animation-name:fadeInRight;/*动画属性名，也就是我们前面keyframes定义的动画名*/
    animation-duration: 2s;/*动画持续时间*/
    animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
    animation-delay:1s;/*动画延迟时间*/
    animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/
    animation-direction: normal;/*定义动画方式*/
}

第一个想到的自然是keyframes动画，以前也就听过，并没有写过这样的代码。经过一段尝试最终失败，现在的效果是默认动画执行一次但是不知道怎么用JS通过点击控制，并且最终动画会还原，不符合预想。希望有人看到来继续完成吧，随记！

最后附上：JS动画比CSS3动画性能谁更好？
CSS3 动画

    原文作者：whhlu
    原文地址: https://segmentfault.com/a/1190000007087701
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞