每天一个CSS

CSS.box{高度：自动；背景颜色：蓝色；}.box-text{颜色：白色；背景：-ms-gradient(linear,lefttop,righttop,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),色标(1,#4d4d4d));背景：-webkit-渐变（线性，左上角，右上角，颜色停止（0，#4d4d4d），颜色停止（.4，#4d4d4d），颜色停止（.5，#fff），颜色停止(.6,#4d4d4d),色标(1,#4d4d4d));背景剪辑：文本；-webkit-text-fill-color：透明；动画：滑动解锁3秒无限；-webkit-animation:slidetounlock3sinfinite;}@-webkit-keyframesslidetounlock{0%{background-position:-200px0}100%{background-position:200px0}}实现原理1.动画效果@-webkit-keyframes定义一组动画。在这个动画中，背景的位置发生了变化（注意文字的位置）2.为什么选择文字而不是整个背景作为背景？背景剪辑：文本；功能：指定绘图区的背景除了text，还包括：border-box|padding-box|content-box；三属性3.如何实现小改效果？Gradient()函数：渐变从实际效果来看，白色部分是灰色的，越接近白色越白-ms-gradient(linear,lefttop,righttop,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));说明：渐变类型，线性gradient(z=x*y)toleft：设置渐变为从右到左。相当于：270degtoright：设置从左到右的渐变。相当于：90degtotop：设置从下到上的渐变。相当于：0degtobottom：设置从上到下的渐变。相当于：180deg。这是默认值，相当于留空。这样就实现了渐变字体部分——webkit-text-fill-color:transparent;fontfillcolor：继承和background，所以字体颜色是设置box-text的背景色，不是box的背景色。随便加个动画，转圈圈，就实现了。PS：欢迎一起学习。服务器审核通过后，所有案例都会发布在服务器上。演示地址：天天