zoukankan      html  css  js  c++  java
  • css3渐变色字体

    彩色渐变字体

       也就是所谓的c3动画,用 @keyframes 定义一个动画效果,然后添加到字体上,从0%开始定义状态到100%,规定动画时间,改变速度跟无限循环;背景颜色如下:

        
              background: -webkit-linear-gradient(left,#ffffff,#ff0000,#ff7d00,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,
                #ffff00,#ff0000,#ff7d00,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ffff00
              );

       调用如下:animation: computer 7s linear infinite;

       把他的背景尺寸设置成background-size:200%;然后利用背景色的定位,使其实现滚动效果;

             @keyframes  computer {0% {background-position: 0 0;}100% {background-position: -100% 0; }}

       需要注意的是:background-clip这个属性,他用来设置裁剪背景的区域,我们需要设置成text文本;text-fill-color这个属性用来设置填充色,如果设置了color,color将被覆盖;
        以下是我自己的理解:
        如果我们去掉background-cliptext;这个属性的话就会看到,背景其实变成了一条色带;通过背景裁剪”background-clip这个属性,把文本字体轮廓保留;然后去设置背景的样式变化;只有字体那个地方是存在且空白的,其他的地方全部被隐藏了,字体固定了位置保持不变,然后背景在下面匀速滚动,我们就看到了这种样式的字体;
       当然,也可以设置成背景图片,用background-size属性设置背景图片尺寸;然后你会发现,图片运行到最后,你会发现“跳图”;把最后的background-position设置成:
    -200% 0;正好完美衔接;
       刚接触前端没多久,平常喜欢逛逛博客园。我看到了博主妖色调的博客,很炫的效果,就去研究了一下。他的页面有很多好玩的东西,也发表了很多文章,大家可以去看看。

         

     大哥博客:

    妖色调

     

  • 相关阅读:
    ReactiveCocoa -函数式编程和响应式编程
    关于即时通讯功能开发技术选型
    cordova 打包的项目里加入微信支付功能编译问题。
    OC和swift互相调用。
    有关 -all_load和-ObjC
    在一个项目中同时使用Swift和Objective-C代码混合编程的方法
    iOS开发中Static和Const关键字的的作用
    开发所有插件必须要这个插件
    phonegap 二维码扫描插件使用
    大数据基础---Kafka深入理解分区副本机制
  • 原文地址:https://www.cnblogs.com/supermanYU/p/13635236.html
Copyright © 2011-2022 走看看