zoukankan      html  css  js  c++  java
  • 失败的催眠图

    尝鲜mask属性

    本来想就着做一个催眠图

    胃受不了,下面是半成品,留待有缘人。

    <style>

    .box{
       200px;
      height: 200px;
      -webkit-mask-image: repeating-radial-gradient(rgba(0,0,0,0) 4px, rgba(0,0,0,1) 10px, rgba(0,0,0,1) 12px);//径向渐变遮罩,属性和background类似
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size:50% 50%;
      -webkit-mask-position:center;
      -webkit-animation: move 1s linear infinite alternate;
    }
    .cd{
       100%;
      height: 100%;
      background: -webkit-linear-gradient(top,red,blue);//基佬背景色

    }
    @-webkit-keyframes move{
      from{
        -webkit-mask-size:50% 50%;
      }
      to{
         -webkit-mask-size:100% 100%;
      }
    }

    </style>

      <div class="box">
        <div class="cd"></div>
      </div>

    https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks  //mask学习传送门

  • 相关阅读:
    树莓派_GPIO
    Python_PyQt_基本使用
    python_静态,组合,继承
    Linux_操作
    Pyqt5+eric6安装教程
    树莓派操作
    python_爬虫_requests
    HTML的基本操作
    python_pandas_numpy_json
    python_模块_sys_time_random_os
  • 原文地址:https://www.cnblogs.com/92xcd/p/9814986.html
Copyright © 2011-2022 走看看