纯CSS实现的三种通知栏滚动效果_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

前言

通知栏组件是一个比较常见的组件了,基本上每个站点都会有怎么个组件,主要就是通告站点的一些变化或者是告知一些中奖名单等作用。
最近在复习CSS3动画部分内容,想着平时通知栏组件大部分还是用JS来实现,正好拿这块组件来当复习,下面写了三个小例子在此分享,欢迎大家观看,如有疑问,欢迎留言评论哈。

第一种

HTML部分

<div class="notice">
    <div class="notice__inner">
        <div class="notice__box">
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">橙某人</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">小密圈圈</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">Cooke_</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">爱音乐网站</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">青年之声</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">仙人</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">三十万人编号</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">Maboroshii</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">陈亚明</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">老娘终于发达了</span>&nbsp;中奖</div>
        </div>
        <div class="notice__box">
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">橙某人</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">小密圈圈</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">Cooke_</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">爱音乐网站</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">青年之声</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">仙人</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">三十万人编号</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">Maboroshii</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">陈亚明</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">老娘终于发达了</span>&nbsp;中奖</div>
        </div>
    </div>
</div>

CSS部分

.notice{
    width: 300px;
    height: 300px;
    border-radius: 8px;
    border: 1px solid #eee;
    margin: 100px auto;
}
.notice__inner{
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 14px;
    color: #666;
}
.notice__box{
    animation: roll 10s linear infinite;
}
.notice__item{
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    white-space: nowrap;
}
@keyframes roll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-300px);
    }
}

视口容器高度需要固定,超出视口容器隐藏内容; 为了营造出无缝滚动回来,内容需要准备两份,彼此紧随; 通过移动内层translateY实现滚动效果; 在第一份内容完全滚出视口容器的一瞬间,立刻将内容位置进行复原; 通过infinite来循环此过程;

第二种

HTML部分

<div class="notice">
    <div class="notice__inner">
        <div class="notice__item">HTTP升级HTTPS全过程,Nginx配置平滑升级</div>
        <div class="notice__item">一台电脑存在多个版本的Vuecli,方便快速初始化不同版本的Vue项目</div>
        <div class="notice__item">前端模块化规范定义-不同规范下的导入导出</div>
        <div class="notice__item">快速、简洁讲明Vue中v-for循环key的作用</div>
        <div class="notice__item">Call与Apply函数的分析及手写实现</div>
        <div class="notice__item">普通切图仔的一年 | 掘金年度征文</div>
        <div class="notice__item">前端需要了解的浏览器缓存(即HTTP缓存)| 🏆 技术专题第八期征文</div>
    </div>
</div>

CSS部分

.notice{
    width: 600px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #eee;
    margin: 100px auto;
    overflow: hidden;
}
.notice__inner{
    animation: roll 36s linear infinite;
    margin-top: 0
}
.notice__item{
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    white-space: nowrap;
    text-decoration: underline;
}
@keyframes roll {
    0% {
        margin-top: 0;
    }
    4% {
        margin-top: 0;
    }
    8% {
        margin-top: 0;
    }
    12% {
        margin-top: -40px;
    }
    16% {
        margin-top: -40px;
    }
    20% {
        margin-top: -80px;
    }
    24% {
        margin-top: -80px;
    }
    28% {
        margin-top: -120px;
    }
    32% {
        margin-top: -120px;
    }
    36% {
        margin-top: -160px;
    }
    40% {
        margin-top: -160px;
    }
    44% {
        margin-top: -200px;
    }
    48% {
        margin-top: -200px;
    }
    52% {
        margin-top: -240px;
    }
    56% {
        margin-top: -240px;
    }
    60% {
        margin-top: -200px;
    }
    64% {
        margin-top: -200px;
    }
    68% {
        margin-top: -160px;
    }
    72% {
        margin-top: -160px;
    }
    76% {
        margin-top: -120px;
    }
    80% {
        margin-top: -120px;
    }
    84% {
        margin-top: -80px;
    }
    88% {
        margin-top: -80px;
    }
    92% {
        margin-top: -40px;
    }
    96% {
        margin-top: -40px;
    }
    100% {
        margin-top: 0;
    }
}

(gif录制可能稍微短了一点,建议动手试试看哦)

这种轮播的形式是比较常见的一种,也是比较实用完善简单的一种,随便提一句在微信小程序上用swiper组件去实现比较简单快捷(不要问我怎么知道的-.-)。

视口容器高度需要固定,超出视口容器隐藏内容; 通过移动内层margin-top实现滚动效果(用translateY也一样,全部替换一下就行); 需要注意的是,从上面HTML部分知道我有七个通知内容,所以在@keyframes中的margin-top是移动七次而已,之后就回走,如果添加了第八个通知内容,我们要对应调整其中的数值;

第三种

HTML部分

<div class="notice">
    <div class="notice__inner">
        <span class="notice__item notice__item-first">Vue是一个渐进式的 JavaScript 框架</span>
        <span class="notice__item notice__item-second">Vue是一个渐进式的 JavaScript 框架</span>
    </div>
</div>

CSS部分

.notice{
    width: 600px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #eee;
    margin: 100px auto;
    overflow: hidden;
}
.notice__inner{
    height: 100%;
    font-size: 14px;
    color: #333;
    line-height: 40px;
    white-space: nowrap;
    position: relative;
}
.notice__item{
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
}
.notice__item-first{
    padding-right: 70%;
    animation: rollFirst 25s linear infinite;
}
.notice__item-second{
    padding-right: 53%;
    animation: rollSecond 25s linear 12s infinite;
}
@keyframes rollFirst {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200%);
    }
}
@keyframes rollSecond {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200%);
    }
}

这种滚动通知栏也是比较常见的一种,它比较麻烦的一点就是那个空白间隔不好控制,特别在多个通知内容的时候,当然用JS还是比较好实现的,现在也有很插件可以直接开箱就用啦。

这种视口容器高度就不需要固定了,它并不依赖,超出视口容器隐藏内容; 利用padding-right来制造空白间隔,以百分比为单位; 内容需要准备两份,通过animation-delay来延时第二份内容的出现,这里也有另一个思路就是直接来移动内层容器的translateX,与第一种是一样的道理;

小结

看到这里,跃跃欲试了吗? 没有? 行吧。

单纯的HTML+CSS肯定是没有JS那么灵活,但以上例子还是很适合一些固定好文案的场景,也适合在开发阶段快速做出交互效果。

到此这篇关于纯CSS实现的三种通知栏滚动效果的文章就介绍到这了,更多相关CSS通知栏内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!


  • 本文相关:
  • css3 实现滚动条美化效果的实例代码
  • 使用纯 css 实现滚动阴影效果
  • 纯css3实现横向无限滚动的示例代码
  • css3制作圆形滚动进度条动画的示例
  • css3实现无缝滚动防抖
  • css实现隐藏滚动条并可以滚动内容效果(三种方式)
  • 通过css动画实现一个表格滚动轮播效果
  • css设置overflow实现隐藏滚动条的同时又可以滚动
  • css实现5种滚动吸顶实现方式的比较(性能升级版)
  • css 给div添加滚动并隐藏滚动条
  • 如何用纯css制作动态网页效果?
  • 用DIV+CSS布局,怎么做滚动的公告栏?
  • 纯html和css实现图片滚动
  • 如何用css实现网页的动态效果
  • 怎么用css样式搞平滑滚动的效果
  • 如何用htHTML+CSS+JS实现如下图效果,即图片循环滚...
  • js或css实现滚动广告的几种方案
  • 纯CSS实现的图片滚动,见过吗
  • div+css布局的网站如何实现 html的框架效果,刷新...
  • 简单的网页效果问题(div css),这样的网页效果要...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程css通知栏使用纯 css 实现滚动阴影效果css3制作圆形滚动进度条动画的示例css3实现无缝滚动防抖通过css动画实现一个表格滚动轮播效果css实现5种滚动吸顶实现方式的比较(性能升级版)css 给div添加滚动并隐藏滚动条 css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字css实现tiktok文字抖动效果示例一文教你玩转css border(边框)css 实现各种 loading 效果附带解析过程如何通过 display:olck/none 完成一个菜单栏300 多行css代码搞定微信 8.0 的炸裂特效css之粘性sticky布局实现题头定位在顶部的方法有趣的css实现隐藏元素的7种思路css实现快速炫酷抖动动画效果css弹性盒flex-grow、flex-shrink、flex-basis详解子元素margin-top导致父元素移动的问题解决
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved