ITPub博客

首页 > IT职业 > IT生活 > 一篇文章带你了解CSS3图片边框

一篇文章带你了解CSS3图片边框

IT生活 作者:25minutes 时间:2021-09-09 08:51:08 0 删除 编辑

走马灯效果其实就是利用标签进行图片和文字滚动,设置的样式不一样,滚动的效果就不一样,实现“走马观花”的效果。

一、滚动方式

1. 普通滚动





Document
这里是您要填的内容

图片描述

1.1 文字碰到左边就会停止

这里是您要填的内容

图片描述

1.2 文字碰到右边就会停止

这里是您要填的内容

图片描述

2.图片滚动

2.1 预设滚动

图片滚动到右边界,自动再从左边滚动。

图片描述

图片描述

2.2 来回滚动

图片描述

图片描述

2.3 滚动的方向

向左滚动

图片描述

向右滚动

图片描述

向下滚动

图片描述

向上滚动

图片描述

图片描述

二、参数

1. 设定滚动次数(可自行更改参数)

这里是您要填的内容

2. 设定背景颜色 (16进位颜色或文字输入)

这里是您要填的内容

3. 设定滚动宽度

为了方便辨别,这里加上bgcolor属性。




    

Document

初始化

这里是您要填的内容

设置高度

这里是您要填的内容

图片描述

4. 设定滚动高度




    

Document

初始化

这里是您要填的内容

设置高度

这里是您要填的内容

图片描述

5. 设定滚动速度 (可自行更改参数)

这里是您要填的内容

图片描述

三、总结

本文以html为基础,主要介绍了常见的效果(跑马灯)的滚动原理,详细介绍了三种常见的滚动以及其相关属性,以及对设置参数时遇到的难题一一解答,希望能够帮助你学习。

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/4328/viewspace-2797266/ ,如需转载,请注明出处,否则将追究法律责任。

下一篇: Golang init() 函数
请登录后发表评论 登录
全部评论

注册时间:2019-07-17

  • 博文量
    336
  • 访问量
    14896