【推荐】使用CSS动画制作仿flash效果banner动态广告

原创已于 2024-06-28 01:05:09 修改 · 648 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

前端笔记

于 2024-06-27 20:00:00 首次发布

#创作灵感# 自己做网站的时候，想着要做个banner广告位，但是又不确定自己什么时候需要什么内容和文字的广告。如此懒的我就开始琢磨，有什么替代制作图片的方法，灵机一动，就想到了用css来模拟广告图片，做个可以随时修改文字和动画样式的广告，不用改图，岂不快哉！？

来来，先发个图尝尝鲜：

怎么样？有点意思吗？接下来，介绍一下它的优点：

用html+css代码的方式，模拟flash或gif动态广告，表现力不变，但没有使用图片，更小，更快，更方便；
宽度自适应，不用受图片大小因素影响表现；
文字，颜色，乃至动画样式都可以随时按需要修改，不用美工就可以搞定，更灵活，更方便；
需要背景图片时，只需要在img标签里增加图片路径，通过css调整蒙版层颜色和透明度，就可实现改变图片颜色滤镜和图片文字结合的广告形式；

好了，缺点不是没有，那是我不说。哈哈。

接下来就看看怎么实现的就好了。老规矩，发页面布局代码：

<a href="##">
      <div class="ads-banner"> 
             <span class="ads_tip">广告</span> 
             <div class="ads-userset"> 
                  <span class="ads-title">专业网站设计&nbsp;&middot;&nbsp;WordPress建站&nbsp;&middot;&nbsp;主题定制服务</span> 
                  <span class="ads-title-info">抠图P图&nbsp;&middot;&nbsp;UI&VI设计&nbsp;&middot;&nbsp;广告图设计&nbsp;&middot;&nbsp;产品包装设计</span>
             </div> 
        <span class="link">咨询详情</span>
        <div class="ads-banner-mask"></div><!-- 蒙版层，用来给广告增加了一个颜色渐变的滤镜 -->
        <img src=""><!-- 需要加入图片时，在这里增加图片路径，调整上面蒙版层透明度即可 -->    
      </div> 
</a>

怎么样，代码真的好简单吧？以后修改也很方便。如果你不想每次打开页面源文件修改，那就在后台添加几个字段，把字段值调出来，在网站后台就可以随时改广告了，爽！

接下来看看css实现：

.ads-banner { /* 实际使用中，请修改这个类，它用来控制外框的宽，高，位置 */
        position: relative;
        background: #fff;
        overflow: hidden;            
        display: flex;
        width: 60%;
        border-radius: 15px;
        height: 200px;  
        left: 50%; 
        top: 30%;
        transform: translate(-50%, -50%);  
}
.ads_tip{
        z-index: 5;
        position: absolute;
        right: 10px;
        top: 10px;
        width: auto;
        line-height: 15px;
        padding: 3px 8px;
        background: #fff;
        color: #999;
        font-weight: 700;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        -khtml-border-radius: 10px;
}
.ads-banner-mask { /* 蒙版层，用于增加颜色渐变的滤镜，通过调整透明度和颜色，可以起到改变整体视觉风格的效果 */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        background: rgba(208,238,255,0.4);
        background-size: 300% 300%;
        z-index: 1;
        animation: bgloops 8s linear infinite;           
}
@keyframes bgloops { /* 蒙版层背景色滚动 */
    0% {
        opacity: 0.9;
        background: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);        
    }
    40% {
        opacity: 1;
        background: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);            
    }
    60% {
        opacity: 0.9;
        background: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);        
    }
    100% {
        opacity: 1;
        background: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);        
    }
}

.ads-banner img {  
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100%;
        transform: translate(-50%,-50%);
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        -khtml-border-radius: 10px;
}

.ads-userset {
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%,-50%);
        width: 90%;
        height: 100%;
        z-index: 2;
        display: flex;
        align-items: center; /* 垂直居中居中 */    
        justify-content: center; /* 如果你也想水平居中 */    
}

.ads-title,
.ads-title-info {    
        position: absolute;
        width: 90%;
        display: block;
        font-size: 2.8rem;
        font-weight: bold;
        text-align: center;
        color: #fff;    
        color: transparent;  
        text-transform: uppercase;  
        text-shadow:0 0 0px #fff;    
}

.ads-title{    
        animation: wordLoops 8s linear infinite;      /* 第一行文字动画循环时间 */     
}

@keyframes wordLoops {   /* 第一行文字动画效果 */
    0% {
        text-shadow:0 0 0px #fff;
        letter-spacing:0px; 
    }
    40% {
        text-shadow:0 0px 100px #fff;
        letter-spacing:1px;
    }
    60% {
        text-shadow:0 0 0px #fff; 
        letter-spacing:0px;
    }
    100% {
        text-shadow:0 0 0px #fff; 
        letter-spacing:0px;
    }
}


.ads-title-info{
        animation: wordLoop 8s linear infinite;    /* 第二行文字动画循环时间 */
}
@keyframes wordLoop {  /* 第二行文字动画效果 */
    0% {
        opacity: 0;        
    }
    40% {
        opacity: 0.9;            
    }
    60% {
        opacity: 0.2;        
    }
    100% {
        opacity: 0;        
    }
}


.ads-banner .link { /* 广告按钮样式 */
        position: absolute;
        right: 40px;
        bottom:30px;
        padding: 15px 40px;
        background-size: 300% 300%;
        background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);
        -moz-border-radius: 40px;
        -webkit-border-radius: 40px;
        border-radius: 40px;
        -khtml-border-radius: 40px;
        font-size: 1.3rem;
        line-height: 1.3rem;
        font-weight: 700;
        color: #fff;
        z-index: 9;
        text-decoration: none;
}

.ads-banner .link:hover { /* 广告按钮浮光掠影 */
        box-shadow: 0 0 5px 0px rgba(229, 66, 10, 0.35);
        background-position: 100% 0;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
}

这个就没有js了，其实真的挺简单的，但效果真还不错。希望您满意，更希望没有耽误您的工作和学习时间。我把《使用CSS动画制作仿flash效果banner动态广告》源码放在这里，需要可以下载（0积分）。最后，请给我一个免费的赞！谢谢！

标签

#css #前端