js动画效果（二）

最新推荐文章于 2024-08-20 02:18:10 发布

lavendersue

最新推荐文章于 2024-08-20 02:18:10 发布

阅读量1.3k

点赞数

分类专栏： js&jq 文章标签： js 动效转盘抽奖公告栏轮播

本文链接：https://blog.csdn.net/lavendersue/article/details/81040929

版权

如今，越来愈多的页面动效都依赖于动效插件，插件的封装和使用，大大减少了前端人员实现动效的时间和经历，提高了效率。如今，页面中使用到的大多都是常见的动效，有些动效，由于不常用，只有在特定的页面才会使用到，比如抽奖效果等。因此，在此和大家分享两个动效，第一个是向上的轮播，只是，这一个轮播和图片轮播不同，是类似公告栏的轮播。这样的轮播，当每一行的背景颜色相同时的实现很容易，但如果是隔行变色的布局，会由于视觉差的原因导致效果不能达到预想的效果，故而，为大家提供了两种js书写方式，第一种的可通用的，另一种是仅仅针对于同色的情况。另一个动效则是转盘抽奖动效。
纯css+marginTop仿通知向上滚动动画效果：
css:

*{
    padding:0;
    margin:0;
}
ul li{
    list-style:none;
}
.main{
    width:500px;
    height:100px;
    border:1px solid blue;
    overflow:hidden;
}
.main>ul{
    width:100%;
    height:auto;
}
.main>ul>li{
    width:100%;
    height:30px;
    line-height:30px;
    background:yellow;
}
.main>ul>li:nth-child(2n+1){
    background:skyblue;
    color:#fff;
}

html:

<div class="main" id="main">
    <ul>
        <li><p>1111111111111</p><li>
        <li><p>2222222222222</p><li>
        <li><p>3333333333333</p><li>
        <li><p>4444444444444</p><li>
        <li><p>5555555555555</p><li>
        <li><p>6666666666666</p><li>