导图社区滚动字幕

滚动字幕

“滚动字幕”是一种流行的字效，是流光字中的一种。人们一直使用滚字放在博客和空间上做装饰，也会用于广告牌、信息栏、提示牌字幕等。展示了HTML文档的基本组成，从<html>标签开始，包含了<head>和<body>两大主要部分。<head>部分包含了文档的元数据，如<meta>标签，这些标签为浏览器提供了关于文档的重要信息，如文档作者姓名、搜索引擎关键词等。特别地，<meta charset="utf-8">标签指定了文档使用UTF-8字符集进行编码，这是为了确保文档能在各种浏览器上正确显示，特别是当文档包含国际字符时。<title>标签则定义了浏览器窗口标题栏中显示的文档标题。

编辑于2022-12-18 15:46:37

网站开发
滚动字幕

破立

他的近期作品查看更多>>

滚动字幕

社区模板帮助中心，点此进入>>

破立

他的近期作品查看更多>>

相似推荐
大纲

互联网9大思维
- 34.4k
- 938
- 2.4k
- 395
MindMaster
产品立项报告
- 8.0k
- 915
- 343
- 8
江边朝阳
产品经理如何做好项目管理
- 7.0k
- 48
- 209
- 10
issen
经验分享：产品经理必懂的产品思维
- 4.9k
- 406
- 233
- 12
(*^▽^*)
产品诞生过程
- 3.6k
- 217
- 274
- 16
(*^▽^*)
产品周期图
- 4.0k
- 496
- 237
- 6
(*^▽^*)
开门红的思考
- 2.0k
- 2
- 86
- 1
wuyan
招创智搜
- 694
- 0
- 10
- 0
零点
网易星球
- 507
- 1
- 10
- 3
Risky
教学教务系统
- 1.4k
- 8
- 65
- 6
18993898710

滚动字幕

代码解析

<html>

超文开始

超文本头

<head>

头内容

请在文档中使用该标签，以便多数浏览器能正确地解释代码，特别是在想获得更多国际流量的情况下。

charset="utf-8"指定文档由包含所有 Unicode 字符的UTF-8字符集进行编码。

<title>无标题文档</title>

文档标题的起始标签

</head>

超文本体

<body>

体内容

标签1

<div> 可定义文档中的分区或节（division/section）。

内联样式定义：style=“样式定义1；样式定义2；"

"width: 100%;height: 100%;"标签的宽高

子标签1

;font-size: 60px;字体大小

color:red;颜色

display:flex 意思是弹性布局，它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

justify-content 属性用来设置项目在主轴方向上的对齐方式

align-items中的items指的是flex 中的子项，因此align-items指的就是flex子项们相对于flex容器在垂直方向上的对齐方式。

overflow:hidden作用是当元素内的内容溢出的时候使它隐藏溢出的部分，即超出部分隐藏。

孙标签

class是一个类别，在css中对应“.类名”

</div>

</body>

样式

<style>

样式体

body

{

margin: 0;

{margin:0;padding:0;}主要用于重置浏览器默认样式。

}

@keyframes donghua

{

函数体

{

transform: translateX(0);

transform 创建一个单次播放的动画

translateX(0)元素移动到x轴的（0）点

}

50%

{

transform: translateX(-110%);

}

50.001%

{

transform: translateX(110%);

}

100%

{

transform: translateX(0%);

}

说明

@keyframes定义一个循环播放的动画，并定义具体的动画效果，比如是放大还是位移等等。

格式

@keyframes animationname {keyframes-selector {css-styles;}}

animationname 动画名（自定义）

keyframes-selector 内部动作名称（自定义）

css-styles 一个或多个合法的css属性

.yidong

{

animation: donghua 12s infinite linear;

animation: 调用自定义的动画

donghua 由@keyframes定义的动画名

letter-spacing: 60px;

letter-spacing 属性增加或减少字符间的空白（字符间距）

}

</style>

</html>

超文结束

原代码

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <div style="width: 100%;height: 100%;"> <div style="width: 100%;height: 200px;font-size: 60px;color:red;display: flex;justify-content: center;align-items: center;overflow: hidden;"> <div class="yidong">信息部</div> </div> </div> </body> <style> body{ margin: 0; } @keyframes donghua { 0%{ transform: translateX(0); } 50%{ transform: translateX(-110%); } 50.001%{ transform: translateX(110%); } 100%{ transform: translateX(0%); } } .yidong{ animation: donghua 12s infinite linear; letter-spacing: 60px; } </style> </html>

动画

@keyframes动画

定义一个动画，并定义具体的动画效果，比如是放大还是位移等等。

不直接执行，需要借助animation来运转。

以百分比来规定改变发生的时间

百分比后面的花括号写：在动画执行过程中的某时间点要完成的变化。

百分比是指动画完成一遍的时间长度的的百分比

0% 是动画的开始时间

50%是动画完成一半的时间

100% 动画的结束时间

关键词 “from” 和 “to”，等价于 0% 和 100%。

加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。

语法

@keyframes animationname {keyframes-selector {css-styles;}}

例1

@keyframes donghua

{

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100%

{

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

定义函数

.load-border

{

width: 120px;

height: 120px;

background: url(../images/loading_icon.png) no-repeat center center;

-webkit-animation: gif 1.4s infinite linear;

animation: donghua 1.4s infinite linear;

}

例2

@keyframes mymove

{

0% {top:0px;}

25% {top:200px;}

50% {top:100px;}

75% {top:200px;}

100% {top:0px;}

}

.img

{

width: 120px;

height: 120px;

background: url(../images/icon.png) no-repeat center center;

-webkit-animation: gif 1.4s infinite linear;

animation: mymove 1s infinite linear;

}

animation

含义

执行动画

组成

css动画的配置

animation-name ：xx （设置关键帧的名称为xx）

animation-duration：5s （动画持续时间为5s）

animation-timing-function： linear （动画时间曲线也叫做运行速度为匀速）

取值：

linear 匀速

ease （默认）低速开始—>加速—>结束前减速

ease-in 以低速开始

ease-out 以低速结束

ease-in-out 以低速开始和结束。

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay:5s (动画等待5后开始)

animatiom-iteration-count：1 （动画播放次数为1次）

取值：xx数字，定义应该播放xx次动画、 infinite-无限次执行

animation-direction： alternate（设置动画为反向播放）

取值：

nomal（默认）-执行完一次之后回到起点继续执行下一次

alternate-往返动画，执行完一次之后往回执行下一次

reverse-反向执行

animation-fill-mode：（动画结束的最后一帧）

取值：

none-不做任何改变

forwards-让元素结束状态保持动画最后一帧的样式

backwards-让元素等待状态的时候显示动画第一帧的样式

both-等待状态显示第一帧，结束状态保持最后一帧

animation-play-state：（设置动画是否暂停）

取值：

running-执行动画

paused-暂停动画

keyframes（用来描述动画的开始、过程、结束状态）

animation 简写

animation：动画名称动画时长动画运动速度延迟时间执行次数往返动画

animation：动画名称动画时长（有这两个即可以完成动画，其它未设置，有默认值）

例

<!DOCTYPE html>

<head>

<style>

div

{

width: 100px;

height: 100px;

background-color: red;

/*动画配置 */

/* 1、设置动画名称 */

animation-name: LeftToRight;

/* 2、动画持续时间 */

animation-duration: 2s;

/* 3、动画执行速度 */

animation-timing-function: linear;

/* 4、等待时长 */

/* animation-delay: 2s; */

/* 5、设置动画播放次数 */

animation-iteration-count: infinite;

/* 6、设置动画是否反向播放 */

animation-direction: alternate;

/* 7、动画结束时应用最后一帧 */

animation-fill-mode: forwards;

/*8、简写

/* animation: name duration timing-function delay iteration-count direction fill-mode; */

}

/* 动画关键帧 */

div:hover

{

/* 设置动画是否暂停*/

animation-play-state: paused;

}

@keyframes LeftToRight

{

margin-left: 0px;

}

25%

{

margin-left: 200px;

}

50%

{

margin-left: 300px;

}

75%

{

margin-left: 500px;

}

100%

{

margin-left: 1000px;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>