html css字幕滚动代码,纯CSS实现滚动3D字幕
一直以来我都想做一个滚动文本的效果,虽然有几种方法实现,其中还有使用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;和文本颜色,那么初始的效果将是这样的:
两个文本都要有动画效果的。开始左边的文本需要一个延迟移动的时间,而这个时间刚好是右边文本到达转角处的时间。
@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动效:
有趣的事,使用display:none;隐藏元素,其动画将完全停止,这个时候当元素重新显示时会重新启动。正因为这个原因,可以采用另外一种技术来隐藏元素。即,给第二个div设置opacity和height的值为0。这样一来,如果窗口缩小或放大,动画都会一直在播放。
总结
总的来说,效果还是让我自己很满意的。当然更期待使用CSS其他的技术做出更有意思的效果。就这篇文章的效果来说,有些地方还是可以改进的,尤其是那些重复的文本内容。为了解决这样的困扰,使用JavaScript复制元素的和文本节点,可以很轻松的做到。比如文章开头的示例,我们里面就有一个输入文本的改变显示内容的效果。
常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。
html css字幕滚动代码,纯CSS实现滚动3D字幕相关推荐
- 手机页面漂浮广告 html,网站底部漂浮广告电脑手机自适应代码纯CSS
网站底部漂浮广告电脑手机自适应代码纯CSS;废话少说直接上干货: HTML部分: 说明文字 点击按钮 CSS样式部分: .margingT { margin-bottom: 80px; } .bott ...
- html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标
CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...
- css动画怎么暂停,纯CSS方式实现CSS动画的暂停与播放!
使用纯 CSS 的方法,能否暂停.播放 CSS 动画?看起来不可能,至少很麻烦. 我们知道,在 CSS3 animation 中,有这样一个属性可以暂停.播放动画: { animation-play- ...
- [css] 能不能使用纯css使你的浏览器卡死?怎么实现?
[css] 能不能使用纯css使你的浏览器卡死?怎么实现? 可以,用计算属性calc,变量 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与 ...
- CSS 魔法系列:纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- jq文字无缝滚动代码(鼠标悬停停止滚动)
jq实现文字无缝滚动代码(鼠标悬停停止滚动) 效果图 直接copy就能运行 <!DOCTYPE html> <html lang="en"> <hea ...
- python tqdm 不换行_python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
默认的tqdm的滚动条的宽度很大,所以会使得总长度超过窗口一行所能显示的量,所以发生上下滚动 解决方法:初始化tqdm时,初始化行数参数ncols=10,这个值可以自己调:尽量大到不能引起上下滚动,同 ...
- html5霓虹效果代码,纯CSS实现酷炫的霓虹灯效果(附demo)
最近关注了油管上的 CSS Animation Effects Tutorial 系列,里面介绍了非常多有意思的 CSS 动效.其中第一个就是很酷炫的霓虹灯效果,这里就实现思路做一个简单的记录和分享. ...
- html 点击加号展开代码,纯css实现加号一个的效果(代码示例)
本篇文章给大家带来的内容是关于纯css实现加号一个的效果(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现下图的加号效果: 若想实现这个效果, 只需一个p元素即可搞定. ...
最新文章
- C语言 数据结构与算法 一
- hexo博客常用插件及教程
- DCMTK:DcmElement :: calcElementLength的测试程序
- win7计算机中丢失mfc120,mfc120.dll 64位
- 前端学习(2031)vue之电商管理系统电商系统之创建新分支
- 记:Ubuntu 14.04 安装32位库支持库失败
- 2020年中国网络安全市场全景图
- linux bc安装的代码,BCLinux安装教程新篇
- 【BZOJ 2306】 2306: [Ctsc2011]幸福路径 (倍增floyd)
- 读书笔记 effective c++ Item 26 尽量推迟变量的定义
- 软考论文写作的时间分配
- 瑞星杀毒软件爆出高危漏洞 可被利用为“抓鸡工具”
- PDF资源:Windows程序设计、Python3网络爬虫开发实战
- etl调度工具 Taskctl 变量概述
- 客户端程序员的工具们
- zebra扫码枪复位_条码扫描枪设置使用说明详解
- DVWA Insecure CAPTCHA(不安全的验证码)全等级
- 实现 EC20 4G模块PPP拨号上网
- 地球形状与重力场模型
- pta mysql训练题集(241-260)