聊代码（第六十集）css样式（之三十） 请朋友们不要用看音画的眼光审视下图，因为我不是作音画，虽然它也是个音画，但我是在聊代码，更明白点说，我是介绍在css中的变色文字平移和立体文字旋转，这属于文字动画。
《花一样的女人》，歌很好听，我把它搬来了。背景图是在北京植物园应求给游园美女拍的照片，我把它制成了gif动图。其实，背景图和歌曲在这里都是附加物，是陪衬，我们主要看文字如何变色平移，文字如何立体旋转。
美 丽 女 人
送给女同胞的迟来礼物
代码：
＜style type="text/css"＞.背景图{
width:650px;height:430px; 背景图宽高
position:relative;left:8px;top:0px; 背景图定位
border:10px maroon double; 边框线的厚度、颜色及样式
border-radius:50%; 椭圆
background:url(http://www.oldkids.cn/upload/2019/03/11/blog_
20190311225226694.gif); } 背景图片
h1{ text-align:center; font-size: 8vh; color:purple; cursive; text-shadow:1px 1px 10px #ff0,0 0 20px #fff,0 0 30px #fff,0 0 40px #ff0,0 0 50px #ff00de,0 0 60px #ff00de; transform-style:preserve-3d; 旋转字字影
animation:run ease-in-out 9s infinite; 旋转字转速及循环旋转
position: absolute; left: 500px; top: 1500px; 旋转文字定位
}
@keyframes run {
0% { transform:rotateX(-5deg) rotateY(0); }
50% { transform:rotateX(0) rotateY(180deg); }
100% { transform:rotateX(5deg) rotateY(360deg); } } 旋转字在时间轴上的字影变化
＜/style＞
＜div class="背景图"＞ ＜/div＞
＜h1＞美 丽 女 人＜/h1＞
＜style type="text/css"＞.scroll-area {
position: relative; 相对定位
height: 40px; 跑马灯高度范围
border: 5px dotted #ffc20e; 跑马灯边框线的厚度、样式、颜色
width: 670px; 跑马灯宽度范围
font-size: 30px; 跑马灯字号
color: red; 跑马灯字色
}
.scroll {
position: absolute; 绝对定位
line-height: 40px; 定位文字，确定文字的纵向位置
left: 50%; 定位文字，使之在水平中间范围
white-space: nowrap; 文本不换行，无论多少文字，都保持单行排列
animation: todayScroll 10s linear infinite; 设定移动速度和旋环移动
}
.today-scroll-content {
margin-right: 3em;
}
@keyframes todayScroll {
0% {
transform: translate(-5%);
}
25% {
transform: translate(-25%);color: white; 时间轴上变色
}
50% {
transform: translate(-50%);color: yellow; 时间轴上变色
}
75% {
transform: translate(-75%);color: lime; 时间轴上变色
}
100% {
transform: translate (-100%);color: blue; 时间轴上变色
}
}
＜/style＞
＜div class="scroll-area"＞
＜div class="scroll"＞＜span class="today-scroll-content"＞送给女同胞的迟来礼物 ＜/span＞＜/div＞
＜/div＞
代码解析：
当文本内容很长，文字很多时，文字跑马灯要求文字单行排列，不能自动换行而成多行并行，这就需要代码 white-space: nowrap;了，它可以保证无论有多少文字，都坚持单行而不会换行，除非人为添加了换行代码 ＜br/＞ 。如果文字不多，不会有自动换行的情况发生，white-space: nowrap; 可略去不用。
其它有关内容在代码中已作注释，不另赘述。
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
