每天一个CSS

BetaRabbit 发布于2019-08-29 16:44 / 1934人阅读

摘要：每天坚持一个滚动文字效果图图片描述箭头指向部分，以白色为背景，从左向右滚动。说明渐变类型，线性渐变设置渐变为从右到左。

每天坚持一个CSS-------滚动文字 效果图

图片描述：箭头指向部分，以白色为背景，从左向右滚动。（不适用于IE）

代码 html

   
例子：

滚动的文字，我是滚动的文字

CSS

.box {
    height: auto;
    background-color: blue;
}

.box-text{
    color: white;
    background: -ms-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
    background: -webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: slidetounlock 3s infinite;
    -webkit-animation: slidetounlock 3s infinite;
}

@-webkit-keyframes slidetounlock{
    0%  {
        background-position:-200px 0
    }
    
    100% {
        background-position:200px 0
    }
}

实现原理

1、动画效果

@-webkit-keyframes

定义一组动画，在本动画中，将背景的位置进行了改变（注意是文本的位置）

2、背景为何选择到文本而不是整块背景？

background-clip: text;

作用：指定绘图区的背景
除了text外，还包括 ：border-box|padding-box|content-box;三个属性

3、怎么实现一小段的变化效果的呢？

gradient()

作用：渐变
从实际效果中看到，白色部分之外都是灰色，越是靠近白色，就越白。

-ms-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
说明：渐变类型，线性渐变（z=x*y）
to left：
设置渐变为从右到左。相当于: 270deg
to right：
设置渐变从左到右。相当于: 90deg
to top：
设置渐变从下到上。相当于: 0deg
to bottom：
设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。

这样就实现了渐变字体部分

-webkit-text-fill-color: transparent;

字体填充颜色：继承与背景，所以字体颜色为设置的box-text的background ,而非box的背景颜色。

就这样加上一个动画，循环移动，就是实现了。

PS:欢迎一起学习，等服务器备案通过，会将所有案例发布至服务器上。

demo地址： everyDay

GPU云服务器云服务器每天一个linux命令允许每天后台授权每天每天php

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113942.html

每天坚持一个CSS——社会人

摘要：每天一个社会人实现效果想法之前看到一篇博客，使用绘制出了小猪佩奇，所以自己想试一试，采用纯绘制出低配版的小猪佩奇。在布局上，没有坚持嵌套，导致缩放时位置错位，如果想实行缩放一致，可采用小猪的头部嵌套布局实现。每天一个CSS-社会人实现效果 showImg(https://segmentfault.com/img/remote/1460000016461611?w=667&h=620...

Eidesen 2019-08-30 15:54 评论0 收藏0
撩课-Web大前端每天5道面试题-Day1

摘要：的变量提升的底层原理是什么引擎的工作方式是先解析代码，获取所有被声明的变量然后在运行。引用计数这种方式常常会引起内存泄漏，低版本的使用这种方式。1. var的变量提升的底层原理是什么? JS引擎的工作方式是: 1) 先解析代码，获取所有被声明的变量； 2)然后在运行。也就是说分为预处理和执行两个阶段。变量提升：所有变量的声明语句都会被提升到代码头部。但是变量提升只对var命令声明的变...

番茄西红柿 2019-04-23 13:09 评论0 收藏0
前端面试每日 3+1 —— 第133天

摘要：学习不打烊，充电加油只为遇到更好的自己，天无节假日，每天早上点纯手工发布面试题死磕自己。希望大家在这浮夸的前端圈里，保持冷静，坚持每天花分钟来学习与思考。今天的知识点 (2019.08.27) —— 第133天 [html] canvas默认画布的尺寸是多大？怎样设置才能不会变形？ [css] 如何使用css3实现一个div设置多张背景图片？ [js] 写一个方法，将字符串中的...

ivydom 2019-08-30 15:44 评论0 收藏0
每天打开页面，只弹一次提示框。

摘要：手机推出新功能邻里互撩让沟通无障碍群组模式让群聊嗨起来前往当前时间戳当前日期当日凌晨的时间戳减去一毫秒是为了防止后续得到的时间不会达到的状态当日已经过去的时间毫秒当日剩余时间创建为想要取到的键值的键名 html: e手机App推出新功能邻里互撩,让沟通无障碍! 群组模式,让群聊嗨起来! 前往eApp js:$(function(){ f...

stackvoid 2019-08-22 14:53 评论0 收藏0
前端面试每日3+1（周汇总2019.08.25）

摘要：前端面试每日题，以面试题来驱动学习，每天进步一点让努力成为一种习惯，让奋斗成为一种享受相信坚持的力量项目地址前端面试每日推荐欢迎跟一起折腾前端，系统整理前端知识，目前正在折腾，打算打通算法与数据结构的任督二脉。《论语》，曾子曰：吾日三省吾身（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！相信坚持的力量...

Java3y 2019-08-30 15:44 评论0 收藏0