css-doodle液态透明水球动画特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

10 37 13



特效描述:液态透明 水球动画。css-doodle基于svg绘制深蓝色背景和透明的液态水球反光动画特效。ps:请用Google浏览器打开演示。

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src='js/css-doodle.min.js'></script>
<script src="js/script.js"></script>

3. HTML代码

<style>
  css-doodle {
    --rule: (
      :doodle {
        @grid: 80x1 / 100vw 100vh; 
        @min-size: 100px;
        filter: url(#filter); 
        will-change: transform;
        animation: r 23s linear infinite;
      }
      @size: 100% 50%;
      position: absolute;
      top: 25%;
      transform: rotate(@r(360deg));
      perspective: 130px; 
      :after {
        content: '';
        position: absolute;
        @size: @r(10px);
        will-change: transform;
        animation: cycle @r(2s, 8s) linear infinite;
        animation-delay: [email protected](100s);
        background: #fff8;
        box-shadow: @m3(0 0 calc(.5vmin + 5px) #fff);
        --trans: scaleX(@r(.1, 5)) translateZ(105px);
        transform: rotateY(0) @var(--trans);
      }
      @keyframes cycle {
        to {
          transform: rotateY(@p(-1turn, 1turn)) @var(--trans);
        }
      }
      @keyframes r {
        to { transform: rotate(@p(-1turn, 1turn)) }
      }
    ) 
  }
</style>
<css-doodle click-to-update></css-doodle>
<svg style="width: 0; height:0">
  <filter id="filter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
    <feBlend in="SourceGraphic" in2="goo" />
  </filter>
</svg>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: html5动画导航菜单 html5图片动画 html5文字动画 html5表情动画 html5线条动画 html5飘落动画 html5光标动画 html5悬停动画 加载动画 html5弹窗动画 html5动画h5动画 html5按钮动画

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到