史上最详细 纯CSS打造3D文本滚动
昨天看见了一篇文章关于用纯CSS实现文本滚动,在这里跟大家分享一下。
首先把效果图贴给大家
根据效果图我们很容易发现肯定是要用到3D转换的,如果对这个还不是很了解的可以先看看下面的文章
http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/comment-page-1/
http://www.w3cplus.com/blog/tags/95.html
那么首先我们就要把这个折角的效果做出来
HTML代码:
<div id="container"><div><span>用来装文字</span></div><div><span>用来装文字</span></div></div>
既然是3D效果,那么就要把创建一个3D环境,我们跟id=container的div加一个perspective:500px。然后跟底下的子div加上基本样式
CSS代码:
#container{perspective: 500px;/*font-size: 0;*/}#container div{font-size: 1rem;width: 30rem;height: 10rem;background: #c40000;display: inline-block;}
效果图:
我们可以看到中间产生了空隙,为了解决这个问题我们可以将id=container的div设置font-size:0;更多可以见下面这篇文章
http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements
解决上述问题后,就要产生折角了,主要是通过transform:rotateY 来实现。
#container div:first-of-type{transform: rotateY(-40deg);transform-origin: top right;background: #E5233E;}#container div:last-of-type{transform: rotateY(40deg);transform-origin: top left;background: #B31E31;}
为了实现更为逼真的效果,凸显出明暗,我们将两个子div的背景颜色设置成不同的值( #E5233E和#B31E31),这样就会有背光和向光的区别,同时在#container div中加入如下基本设置代码
color: #fff; line-height: 10rem;
看效果吧
怎么样,基本雏形已经有了,那么接下来就是要让文字滚动起来,这时我们就需要用到transform:translateX 这个位移特性了。
现在我们把代码变成下面这个样子
#container div{font-size: 6rem;width: 30rem;height: 10rem;display: inline-block;color: #fff;line-height: 10rem;position: relative;}#container div:first-of-type{transform: rotateY(-40deg);transform-origin: top right;background: #E5233E;}#container div:last-of-type{transform: rotateY(60deg);transform-origin: top left;background: #B31E31;}#container div span{position: absolute;}#container div:first-of-type span{transform: translateX(60rem);/*这里值要设置成2倍div的宽度(实际上是div的宽度+下面的translateX的值)*/
} #container div:last-of-type span{ transform: translateX(30rem);/*这里的30rem要设置成刚好和div的宽度相同*/ }
在这里主要说一下这两个translateX的怎么设置,首先看第二个div也就是右边这个,如果要文字从最右边移动过来,首先我们就需要把文字全部移到div的后面去,也就是上图蓝色部分;那么左边那个div的translateX的值就必须是上图中X+Y的值,如果说的不是很清楚,可以自己下来实验自行体会。哎,这个图画的貌似有点丑,将就一下啰。
那么接下来就要运动动画来改变translateX的值使文字动起来了
#container div:first-of-type span{transform: translateX(60rem);animation: left_div 14s linear infinite;text-shadow: 20px 0px 4px rgba(0,0,0,0.3);/*为了效果更逼真我们在向光的div加上文字阴影*/}#container div:last-of-type span{transform: translateX(30rem);animation: right_div 14s linear infinite ;}@keyframes right_div{to{transform: translateX(-130rem);}}@keyframes left_div{to{transform: translateX(-100rem);}}
这里我们用到了关键帧,实现动画特效,这里需要注意的是 |(-130)-30| 和|(-100)-60|这两个的绝对值必须相等,这样你才可能,保证速度一直(简单点就是在所用的时间都相同的话,要想速度相同并排跑,那么跑的距离也应该是相同的)。在这里究竟要位移多少(如代码中的-130rem和-100rem)这个取决于你的文字长度,文字越长,这个位移的距离肯定要越长。
怎么样还是比较逼真吧!我们在这里跟子div都加了一个overflow:hidden,来隐藏已经溢出的文字,不然会见到下图
当然这里还有一个问题,那就是如果文字过长,那么在div里面就会换行得到的就是下面的效果
这种显然不是我们想要的,所以要在#container div中加入 white-space:nowrap;这样就正常了。
最后一步就是要实现响应式,因为当屏幕较小时,则会出现下面的效果
所以我们加上如下代码
@media all and (max-width: 993px) {#container {perspective: none;}#container div:last-of-type { opacity: 0; height: 0;}#container div:first-of-type {width: 80%;}}
当屏幕较小是,会显示如下效果
好了,大功告成,各位拿去尽情装逼吧!最后附上完整代码
HTML
<div id="container"><div><span>DJL箫氏,三月七日,白桦林里,热爱前端,性别男,爱好女</span></div><div><span>DJL箫氏,三月七日,白桦林里,热爱前端,性别男,爱好女</span></div></div>
CSS
#container{perspective: 500px;font-size: 0;}#container div{font-size: 6rem;width: 30rem;height: 10rem;display: inline-block;color: #fff;line-height: 10rem;position: relative;overflow: hidden;white-space: nowrap;}#container div:first-of-type{transform: rotateY(-40deg);transform-origin: top right;background: #E5233E;}#container div:last-of-type{transform: rotateY(60deg);transform-origin: top left;background: #B31E31;}#container div span{position: absolute;width: 400%; }#container div:first-of-type span{transform: translateX(60rem);animation: left_div 14s linear infinite;text-shadow: 20px 0px 4px rgba(0,0,0,0.3);}#container div:last-of-type span{transform: translateX(30rem);animation: right_div 14s linear infinite ;}@keyframes right_div{to{transform: translateX(-130rem);}}@keyframes left_div{to{transform: translateX(-100rem);}}@media all and (max-width: 993px) {#container {perspective: none;}#container div:last-of-type { opacity: 0; height: 0;}#container div:first-of-type {width: 80%;}}
参考链接:
http://www.w3cplus.com/animation/wrapping-animated-3D-marquee-text-with-pure-CSS.html
http://thenewcode.com/1096/Wrapping-Animated-3D-Marquee-Text-with-Pure-CSS
转载于:https://www.cnblogs.com/djlxs/p/5598120.html
史上最详细 纯CSS打造3D文本滚动相关推荐
- php立方体相册源码,纯CSS实现3D的代码(正方体、动态立体图片册、平面的星空)...
本篇文章所说的内容是纯CSS实现3D的代码(正方体.动态立体图片册.平面的星空),代码都非常详细,有需要的朋友可以看一下. 一.正方体 我认为正方体可以算是3D图像的基础吧,首先正方体是由六个相同的面 ...
- 纯CSS打造的Family tree(族谱)
Family tree(族谱),也称家谱,用来记录家族世系繁衍辈份关系.本文结合实例,不借助任何js脚本,使用纯CSS打造一个漂亮的Family tree(族谱),也可以应用的企业组织架构图中. 查看 ...
- IPV4与IPV6的区别(史上最详细)
IPV4与IPV6的区别(史上最详细) 描述 IPv4 IPv6 地址 长度为 32 位(4 个字节).地址由网络和主机部分组成,这取决于地址类.根据地址的前几位,可定义各种地址类:A.B.C.D 或 ...
- html银白色,纯CSS打造银色MacBookAir(二)_html/css_WEB-ITnose
上一篇:<纯CSS打造银色MacBook Air(一)> 写在前面 上一篇我们谈了<纯CSS打造银色MacBook Air(一)>,今天我们接着谈. First注:如果图片过大 ...
- 史上最详细唇语识别数据集综述
更新:VIPL官网网页格式更改,导致旧的LRW1000链接无法访问,现已更新LRW1000数据集链接,内部包含申请需要的文件 推荐一个大佬的综述,关于实现唇语识别的多种途径. 说明:本文包括经常用语唇 ...
- 纯CSS实现3D正方体动画效果
目录 前言 正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化 总结 前言 纯CSS实现3D正方体动画效果,此方法是通过transf ...
- Php开源h5相册系统,HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
- 史上最详细的DOM事件之拖动事件
史上最详细的DOM事件之拖动事件 上篇博客讲了DOM的剪贴板事件,这篇博客我们来讲一讲DOM的拖动(DragEvent)事件. HTMl代码: <img src="../../CSS/ ...
- 速卖通php,史上最详细的速卖通选品技巧
好的产品是基础,所以卖家要重视速卖通选品,想要做好速卖通选品就要学会一些速卖通选品技巧,这一次小编对速卖通选品技巧进行了大整理,最后整理出了史上最详细的速卖通选品技巧,一起看看吧! 速卖通选品技巧一: ...
最新文章
- 你还在用Swagger?试试这个神器!
- 如何在 Linux下进行文件切割操作?
- 私人定制---打造属于自己的linux小系统
- Python创建删除文件(或文件夹)
- Linux Shell实例精讲学习笔记
- LInux--进程间通信
- springMVC的url重写
- Mysql Error:1205错误诊断
- Clover 引导 Windows 及 Linux 双系统
- 使用 HTML 和 CSS 创建响应式猫猫图片库
- android经典动态壁纸,Android动态壁纸解析
- win11用虚拟机win10安装docker
- 数据库“新增字段、删除字段、修改字段“
- Android - 控件android:ems属性
- html图片垂直居中的方法,CSS图片垂直居中实现方法详解
- 企业承担社会责任的必要性
- 搜索网络中的计算机名,怎样搜索一个局域网里全部机器的名字和IP地址
- 51单片机的指令系统(一)
- 在OpenJWeb平台中实现主动扫码(商家主动出示支付二维码)
- Java用正则表达式判断学号,利用正则表达式验证学号_利用正则表达式开发动态网页...
热门文章
- Guest权限突破8法(整理)
- hive中建立“按天分区“的外表+存储为ORC文件+指定元数据
- flink网页端提交pr-修改文档报错
- cannot resolve symbol spark
- ubuntu下面安装Keil uvision4与入门实例
- cannot find or load main class org.apache.flink.api.scala.FlinkShell
- package org.apache.hadoop.conf does not exist解决
- ZooKeeper available but no active master location found
- colab长时间处于正在连接
- 修改win7编码为utf-8