精华内容
下载资源
问答
  • CSS字幕滚动 !!!

    2021-08-04 09:02:16
    而且它自己可以实现鼠标悬停的效果,下面解释一下各参数的含义:align:是设定活动字幕的位置,除了居左、居中、居右三种位置外,又增加靠上(top)和靠下(bottom)两种位置。Bgcolor:用于设定活动字幕的背景颜色,...

    marquee的基本语法: … ,与大多数HTML语法元素一样,它也是成双出现的,被修饰对象就放在起始符和终止符之间。而且它自己可以实现鼠标悬停的效果,下面解释一下各参数的含义:

    align:是设定活动字幕的位置,除了居左、居中、居右三种位置外,又增加靠上(top)和靠下(bottom)两种位置。

    Bgcolor:用于设定活动字幕的背景颜色,可以使用英文的单词也可以是十六进制数的。

    Direction:用于设定活动字幕的滚动方向是向左(left)、向右(right)、向上(up)、向下(down)。

    Behavior:用于设定滚动的方式,主要由三种方式:

    behavior=”scroll”表示由一端滚动到另一端;

    behavior=”slide”:表示由一端快速滑动到另一端,且不再重复;

    behavior=”alternate”表示在两端之间来回滚动。

    Height:用于设定滚动字幕的高度。

    Width:则设定滚动字幕的宽度。

    Hspace和vspace:分别用于设定滚动字幕的左右边框和上下边框的宽度。

    Scrollamount:用于设定活动字幕的滚动距离。数值越小,滚动的速度就越快。

    scrolldelay:用于设定滚动两次之间的延迟时间,数值越小,间隔就越小。

    Loop:用于设定滚动的次数,当loop=-1表示一直滚动下去,直到页面更新。其中默认情况是向左滚动无限次,字幕高度是文本高度;滚动范围:水平滚动的宽度是当前位置的宽度;垂直滚动的高度是当前位置的高度。

    onmouseover: 用于设定鼠标移动到marquee块上执行的操作。

    onmouseout: 用于设定鼠标从marquee块上移出后执行的操作。

    闲话不说,举个例子:

    啦啦啦,真的会动耶!

    啦啦啦,真的会动耶!

    瞧,简单吧?不过,以上例子只是使用了marquee的默认用法。我们加入相应的参数,它的移动方法就有所不同了。

    参数一:direction

    direction的英文意思就是方向。这个参数的取值有四个:left(左)、right(右)、up(上)、down(下)。

    例:向上移动

    向上移动

    参数二:behavior

    移动方式。值:scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。

    例:哈哈,我来回走!

    哈哈,我来回走!

    累!我只走一次!

    vior=slide>累!我只走一次!

    参数三:loop

    循环。若未指定则循环不止(infinite),其值取数值。例:

    我只走三次哦

    我只走三次哦

    参数四:scrollamount

    移动速度。值取正整数。数值越大,速度越快。例:

    看,我走多快!

    看,我走多快!

    参数五:scrolldelay

    延时。数值。例:

    我走一走,停一停

    我走一走,停一停

    参数六:bgcolor

    底色。例:看到了吧?有底色!

    看到了吧?有底色!

    参数七:width和height

    就是移动的宽度与高度了。例:

    这个面积不够我移动!

    这个面积不够我移动!

    其他参数:

    空白(Margins)

    对齐方式(Align)

    最后在介绍一个鼠标悬停的效果

    CSS 实现滚动进度条效果

    参考:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言:细化总结.参考的文章作者已经写的很详细了.这里在从初学者 ...

    html中的字幕滚动marquee属性

    该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果,该标签是个容器标签. 语法:

    HTML+CSS页面滚动效果处理

    HTML+CSS代码如下:

    ...

    touch-action css属性 滚动和缩放手势

    CSS 属性 touch-action 用于指定某个给定的区域是否允许用户操作,以及如何响应用户操作(比如浏览器自带的划动,缩放等) 默认情况下,平移(滚动) 和 缩放手势由浏览器专门处理.该属性用于 ...

    使用纯 CSS 实现滚动阴影效果

    开门见山,有这样一种非常常见的情况,对于一些可滚动的元素而言.通常在滚动的时候会给垂直于滚动的一侧添加一个阴影,用于表明当前有元素被滚动给该滚出了可视区域,类似这样: 可以看到,在滚动的过程中,会出现 ...

    css 上下滚动效果

    展开全文
  • CSS实现滚动3D字幕

    2021-06-09 12:51:40
    一直以来我都想做一个滚动文本的效果,虽然有几种方法实现,其中还有使用WebGL的方法。...前几天在CodePen看到有位大神使用纯CSS制作了一个3D的滚动文本效果,仔细看了一会,没想到thenewcode.com/就...

    一直以来我都想做一个滚动文本的效果,虽然有几种方法实现,其中还有使用WebGL的方法。但我还是想使用HTML和CSS来实现这样的效果。

    很多年以前,在Web上实现滚动文本的动画效果一般是采用marquee标签来实现,当然也有很多同学采用JavaScript来实现类似的效果。

    前几天在CodePen看到有位大神使用纯CSS制作了一个3D的滚动文本效果,仔细看了一会,没想到thenewcode.com/就有介绍这个案例的文章,今天将篇文章翻译出来和大家一起分享。在继续阅读下面的内容之前,先来看一下需要完成的动画效果:

    译文内容从这里开始。

    锐角(Acute Angles)

    使用到的HTML很简单,在一个div的容器里,放置了两个div元素,而且这两个元素里放置的内容是一样的,如下所示:

    ONE LOVE ONE HEART

    ONE LOVE ONE HEART

    第二个元素是第一个元素的副本,而且在第二个div元素上设置一个aria-hidden="true"隐藏元素,所以在效果中你只能看到一个文本。

    在div#marquee内部的div元素使用了3D旋转为其设置一个合适的角度,并且在其父元素中设置perspective的值为0。同时将父元素的font-size也设置为0,主要是为了保证内部的inline-block元素不会产生任何的间距。

    #marquee {

    perspective: 500px;

    font-size: 0;

    }

    #marquee div {

    display: inline-block;

    height: 12rem;

    width: 30rem;

    position: relative;

    }

    如果您是第一次接触3D相关的知识,你可以点击这里了解相关方面的知识点。另外有关于如何清除inline-block元素之间的间距,可以阅读早先分享的一篇文章《如何解决inline-block元素的空白间距》。

    同时使用transform-origin给内部元素设置稍微不同的角度,让元素变得弯曲,并且通过不同的背景颜色和文本颜色,模拟出一个光照的效果。

    #marquee div:first-of-type {

    background: #e5233e;

    transform-origin: top right;

    transform: rotateY(-40deg);

    color: #fff;

    }

    #marquee div:last-of-type {

    background: #b31e31;

    transform-origin: top left;

    transform: rotateY(45deg);

    color: #f8c9d9;

    }

    加上一些基本样式的美化,你将看到下面这样的一个效果:

    文本内容放在span标签中,为了让容器在规则的宽度范围内能容纳一个合理数量的文本,我们需要在div的元素上设置overflow的值为hidden,让溢出的文本能被隐藏起来。

    #marquee div {

    font-size: 8rem;

    overflow: hidden;

    }

    #marquee div span {

    position: absolute;

    width: 400%;

    line-height: 1.4;

    }

    这时看到的效果是这样的:

    文本滚动(Forward Crawl)

    span元素根据他们自己身不同的位置设置不同的位移:右边的文本向右移30rem(即:div元素可视区域宽度),左边的文本移动的距离是div可视区域的两倍(即,内部div的宽度)。为了让效果更好一些,使用text-shadow给文本添加一点阴影效果。

    #marquee div:first-of-type span {

    transform: translateX(60rem);

    animation: leftcrawl 14s linear infinite;

    text-shadow: 4px 0px 4px rgba(0,0,0,0.3);

    }

    #marquee div:last-of-type span {

    transform: translateX(30rem);

    animation: rightcrawl 14s linear infinite;

    }

    如果父元素div没有设置overflow:hidden;和文本颜色,那么初始的效果将是这样的:

    be7b13e5538010f6a87c7aa784bf63a4.png

    两个文本都要有动画效果的。开始左边的文本需要一个延迟移动的时间,而这个时间刚好是右边文本到达转角处的时间。

    @keyframes leftcrawl {

    to { transform: translateX(-100rem); }

    }

    @keyframes rightcrawl {

    to { transform: translateX(-130rem); }

    }

    为了让文本运动是一个匀速运动效果,这里采用了linear的animation-timing-function。此时你看到效果如下:

    响应式效果

    当浏览器的屏幕变窄时,上面的代码做出来的效果就不太好:文本和角度变得越来越小,这样使用字幕越来越难阅读。所以当屏幕宽度小于993px时,将上面的3D效果换成2D效果,也就是只显示一个div元素:

    @media all and (max-width: 993px) {

    #marquee {

    perspective: none;

    }

    #marquee div:last-of-type {

    opacity: 0;

    height: 0;

    }

    #marquee div:first-of-type {

    width: 80%;

    }

    }

    效果如下:

    你可以尝试将屏幕变窄,你将看到的效果类似下面的Gif动效:

    bd12c20730d657af6323522abdd484db.gif

    有趣的事,使用display:none;隐藏元素,其动画将完全停止,这个时候当元素重新显示时会重新启动。正因为这个原因,可以采用另外一种技术来隐藏元素。即,给第二个div设置opacity和height的值为0。这样一来,如果窗口缩小或放大,动画都会一直在播放。

    总结

    总的来说,效果还是让我自己很满意的。当然更期待使用CSS其他的技术做出更有意思的效果。就这篇文章的效果来说,有些地方还是可以改进的,尤其是那些重复的文本内容。为了解决这样的困扰,使用JavaScript复制元素的和文本节点,可以很轻松的做到。比如文章开头的示例,我们里面就有一个输入文本的改变显示内容的效果。

    8b555b46c6d95b49f226e7c33d8b94bf.png

    常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

    展开全文
  • 主要为大家详细介绍了小程序实现左右来回滚动字幕效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 使用纯CSS实现的滚动字幕(跑马灯),使用了 animation 和 transform 结合,移动端和PC端都可使用
  • 这是一条滚动字幕这是一条滚动字幕这是一条滚动字幕这是一条滚动字幕这是一条滚动字幕 </view> </view> css代码如下: .notable-container { width: 100%; } .notable-container .words ...

    wxml代码如下:

    <view class='notable-container'>
    	<view class="words">
    		这是一条滚动的字幕这是一条滚动的字幕这是一条滚动的字幕这是一条滚动的字幕这是一条滚动的字幕
    	</view>
    </view>
    

    css代码如下:

    .notable-container {
        width: 100%;
    }
    .notable-container .words {
        font-size: 10pt;
        margin-left: 20rpx;
        position: absolute;
        top: 0rpx;
        color:#FFA500;
        white-space: nowrap;
        animation: notableAnimation 16s linear infinite;
    }
    
    @keyframes notableAnimation {
        0% {
            left: 100%;
        }
    
        100% {
            transform: translateX(-100%);
            left: 0;
        }
    }
    

    最终效果如图所示:
    在这里插入图片描述

    展开全文
  • html5 css3实现字幕滚动的效果

    万次阅读 2017-11-29 15:28:17
    html5中marquee逐渐被取代,要实现字幕滚动可以再js中实现: html5 body { margin: 0px; font-size: 12px; color: #938C43; line-height: 150%; text-align:center; } a:link{color: #9D943A;...

    html5中marquee逐渐被取代,要实现字幕的滚动可以再js中实现:

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>html5</title> 
    <style>
    body { 
        margin: 0px; 
        font-size: 12px; 
        color: #938C43; 
        line-height: 150%; 
        text-align:center; 
    } 
    a:link{color: #9D943A;font-size:12px;} 
    a:hover{color: #FF3300;font-size:12px;} 
    a:visited{color: #9D943A;font-size:12px;} 
    a.red:link{color: #ff0000;font-size:12px;} 
    a.red:hover{color: #ff0000;font-size:12px;} 
    a.red:visited{color: #ff0000;font-size:12px;} 
    #marqueeBox{background:#f7f7f7;border:1px solid silver;padding:1px;text-align:center;margin:0 auto;} 
    --> 
    </style> 
    </head> 
     
    <body> 
    <h4>滚动新闻</h4> 
    <script language="JavaScript" type="text/javascript"> 
    var marqueeContent=new Array(); 
    marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用快速取回帐号密码</a>"; 
    marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a>"; 
    marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a>"; 
    marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下载</a>"; 
    var marqueeInterval=new Array(); 
    var marqueeId=0; 
    var marqueeDelay=2000; 
    var marqueeHeight=20; 
    function initMarquee() { 
        var str=marqueeContent[0]; 
        document.write('<div id="marqueeBox" style="overflow:hidden;width:250px;height:'+marqueeHeight+'px" οnmοuseοver="clearInterval(marqueeInterval[0])" οnmοuseοut="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>'); 
        marqueeId++; 
        marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay); 
    } 
    function startMarquee() { 
        var str=marqueeContent[marqueeId]; 
        marqueeId++; 
        if(marqueeId>=marqueeContent.length) marqueeId=0; 
        if(document.getElementById("marqueeBox").childNodes.length==1) { 
        var nextLine=document.createElement('DIV'); 
        nextLine.innerHTML=str; 
        document.getElementById("marqueeBox").appendChild(nextLine); 
        } 
        else { 
            document.getElementById("marqueeBox").childNodes[0].innerHTML=str; 
            document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]); 
            document.getElementById("marqueeBox").scrollTop=0; 
        } 
        clearInterval(marqueeInterval[1]); 
        marqueeInterval[1]=setInterval("scrollMarquee()",20); 
    } 
    function scrollMarquee() { 
        document.getElementById("marqueeBox").scrollTop++; 
        if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){ 
        clearInterval(marqueeInterval[1]); 
        } 
    } 
    initMarquee(); 
    </script> 
     
    </body>
    </html>

    也可以用css3实现:

     

     <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    @keyframes move
    {
        0%
        {
            transform:translateY(0px);
        }
    	50%
        {
            transform:translateY(-200px);
        }
        100%
        {
            transform:translateY(0px);
        }
    }
    .picTab{height:500px;border:2px solid #000; margin:50px auto;overflow:hidden;}
    .picTab .topDiv{width:1000px;height:500px; animation:move 5s linear infinite;text-align:center;}
    .picTab div {margin:5px;color:black;  }
    
    
    </style>
    </head>
    <body>
    <DIV class="picTab">
    	<div  class="topDiv">
    				<div>"控制洗衣机"</div>
    				<div>"控制冰箱"</div>
    				<div>"开启洗衣机"</div>
    				<div>"开始洗衣"</div>
    				<div>"关闭洗衣机"</div>
    				<div>"棉麻洗"</div>
    				<div>"洗涤时间设为20分钟"</div>
    				<div>"漂洗2次"</div>
    				<div>"脱水6分钟"</div>
    				<div>"冰箱设为速冷模式"</div>
    				<div>"冷藏室温度设为5度"</div>
    				<div>"天气"</div>
    			
    		</div>
    	
    
    
    
    
    </DIV>
    </body>
    </html>
    复制代码


    展开全文
  • css+js滚动字幕

    2017-04-17 12:51:21
    html css+纯js实现无缝连接循环的滚动字幕,内有注释
  • 网页css样式滚动字幕

    千次阅读 2019-03-02 15:12:23
    一、代码 .verticalText{ position: absolute; z-index:10; top: 0; left: 0;bottom:0;right:0;... background: -webkit-linear-gradient(top,#f6f8fa 10%, rgba(0,0,0,0) 30%,rgba(0,0,0,0) 80%,#f6f8fa 95...
  • css + js实现简单无缝滚动字幕

    千次阅读 2017-04-17 13:12:28
    css + js实现无缝滚动字幕 利用js和css就可以很方便的实现一个无缝滚动字幕,使得列表在一个方框里不停滚动 目录 [toc]实现思路 定义两个滚动块,内容一模一样,从下往上两个紧挨着滚动,当第一个滚动滚动出...
  • css如何做滚动字幕效果?下面本篇文章给大家介绍一下使用CSS滚动字幕效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。在CSS中,可以利用animation属性和@keyframes规则,配合top...
  • css实现无缝滚动

    2018-09-03 10:23:31
    消息列表向上滚动,不使用js操作,纯css3实现向上无缝滚动
  • marquee的基本语法: … ,与大多数HTML语法元素一样,它也是成双出现的,被修饰对象就放在起始符和终止符之间...Direction:用于设定活动字幕滚动方向是向左(left)、向右(right)、向上(up)、向下(down)。 Beh
  • 网页前端之字幕滚动实现

    千次阅读 2020-06-30 14:03:32
    基于HTML的marquee标签实现字幕滚动,文字播放,聚义介绍了marquee标签的属性及其使用。并用实例演示
  • css:动画实现文字无缝滚动详解

    千次阅读 2020-10-08 16:05:46
    代码比较简单,不多赘述 HTML 部分 <div id="marquee"> <div> <p>1</p> <p>2</p> <p>3</p> <p>4</p>...CSS 部分 #marquee{ hei
  • css 字幕水平滚动

    2020-04-18 09:27:19
    1、html {{item.remark}} 2、css /*滚动字幕*/ .marquee{ width: 100%; height: 24px; line-height: 26px; color: #888888; border: none; display: block; margin: 3px auto 0; overflow: hidden; white-space: ...
  • css实现文字循环滚动效果

    万次阅读 多人点赞 2018-05-23 11:12:22
    css实现文字循环滚动效果 <style type="text/css"> * { margin: 0; padding: 0; } .box { width: 300px; margin: 0 auto; border: 1px solid #ff6700; overflow: hidden; } .animate { padding-...
  • css、js实现字幕横向滚动

    万次阅读 2018-06-05 14:45:07
    最近,在写电子房价牌页面时,关于电子房价的提示,需要用到横向滚动字幕的效果,本文用的是jquery.js的方法来实现的。在网上查阅资料的时候,发现以前会使用&lt;marque&gt;的html标签来处理,但是,最新的...
  • CSS语言:CSSSCSS确定@import url(http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);@import url(http://fonts.googleapis.com/css?family=Lato:400,300,900);body {background-color: #0096...
  • 考虑到项目中经常使用Vue,已经很少操作DOM了,所以考虑最好通过CSS来实现,可以通过Vue给模板元素动态绑定class来实现相同的功能,如果需要考虑css3兼容性的话,可以去使用JavaScript去完成。 ...
  • div> <div class="con"> 从前有个庙,庙里有个老和尚给小和尚讲故事,讲的故事是p> 从前有个庙,庙里有个老和尚给小和尚讲故事,讲的故事是p> div> div> body> html> 以下是css页面的代码: * { margin: 0;...
  • vue 实现滚动字幕

    2021-07-08 09:58:24
    <div id="demo" ref="demo" class="out"> <div class="qimo"> <div id="demo1" ref="demo1"> <ul> <li v-for="(item, index) in list"> <a href="">.../u.
  • css js html 实现滚动字幕

    千次阅读 2018-01-22 16:15:50
     字幕滚动啦~字幕滚动啦~字幕滚动啦~字幕滚动啦~字幕滚动啦~字幕滚动啦~字幕滚动啦~字幕滚动啦~字幕滚动啦~字幕滚动啦~字幕滚动啦~字幕滚动啦~字幕滚动啦~字幕滚动啦~字幕滚动啦~ ...
  • 思路就是 1,把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto。 2,把thead的tr设置成display:block。... } 本文由职坐标整理发布,更多相关内容,请关注职坐标WEB前端HTML/CSS频道!
  • 现在很多项目中都用到了滚动条,而且在有的时候,用到的是模拟滚动条,很多大型邮箱都是利用css样式来设置的,那么CSS如何设置滚动条宽度呢?css中可以使用::-webkit-scrollbar伪类选择器设置滚动条样式,在此伪类...
  • css如何实现滚动文字,实现滚动文字的代码发布时间:2020-05-09 10:35:36来源:亿速云阅读:228作者:小新这篇文章主要为大家详细介绍了css如何实现滚动文字,实现滚动文字的代码,文中示例代码介绍的非常详细,具有...
  • html文字滚动代码滚动文字滚动文字滚动文字marquee 参数:BGColor:滚动文本框的背景颜色。Direction:滚动方向设置,可选择Left、Right、up和down。scrolldelay:每轮滚动之间的延迟时间,越大越慢。scrollamount:...
  • 使用CSS3动画实现文字滚动

    千次阅读 2019-06-21 11:19:56
    以前实现文字滚动经常使用marquee标签,现在随着H5的兴起,鉴于该标签糟糕的体验,这个标签已经被W3C标准废弃了,尽管现在浏览器还支持这个标签,但是寻找文字滚动的新方式才是未来的选择。也有很多人会使用js脚本来...
  • CSS3文字滚动通知动画特效是一款简单创意的css3文字广告语动画特效。
  • 原生js实现字幕滚动

    千次阅读 2018-11-20 17:05:19
    使用css和原生js实现的字幕滚动效果,无缝衔接 效果 原理 容器设置固定宽度,超出部分隐藏,滚动部分绝对定位并通过定时器改变位置 实现 html部分 &lt;div class="scroll"&gt; &lt;span&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,776
精华内容 1,110
关键字:

css字幕滚动