【聊代码】第六十集 css样式（之三十）文字立体旋转和文字渐

聊代码（第六十集）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; 可略去不用。        其它有关内容在代码中已作注释，不另赘述。