zoukankan      html  css  js  c++  java
  • Html

    这种效果稍加改造非常优雅、并且可以准确的实验触摸聚焦点。缺点是非常消耗内存。娱乐为主吧

    js

    //╠═╬═╬═╬═╬═╬═╬═╬═╬═╬═╣  涟漪特效 ╠═╬═╬═╬═╬═╬═╬═╬═╬═╬═╣
    涟漪特效 = function()
    {
        $('body').on('tap', function (e) 
        {  
            
            
                var left = e.detail.center.x;
                var top = e.detail.center.y;
                  
                $("body").append('<div class="dot" style="top:' + top + 'px;left:' + left + 'px;"></div>')
                setTimeout(function () {
                    $('.dot:first').remove();
                }, 1500);              
        });  
    }

    css

    /* 涟漪特效 */ 
    
    .dot {
      display: block;
      height: 20px;
      width: 20px;  
      background: transparent;
      border-radius: 100%;  
      position: absolute;
      animation: sploosh 1.25s cubic-bezier(0.165, 0.84, 0.44, 1);
      -webkit-animation:sploosh 1.25s cubic-bezier(0.165, 0.84, 0.44, 1);  
      -ms-animation:sploosh 1.25s cubic-bezier(0.165, 0.84, 0.44, 1);
      -moz-animation:sploosh 1.25s cubic-bezier(0.165, 0.84, 0.44, 1); 
       background: transparent;   
      z-index:9999;    
      
    } 
    
    
    @keyframes sploosh
    {
      0% {
        box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);
        background: rgba(66, 166, 223, 0.7); 
      }
      100% {
        box-shadow: 0 0 0 300px rgba(66, 166, 223, 0);
        background: rgba(66, 166, 223, 0);
      }
    } 
    
    @-webkit-keyframes sploosh
    {
      0% { 
        -webkit-box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);
        -webkit-background: rgba(66, 166, 223, 0.7);
      }
      100% {
        -webkit-box-shadow: 0 0 0 300px rgba(66, 166, 223, 0);
        -webkit-background: rgba(66, 166, 223, 0);
      }
    }
    
    
    @-ms-keyframes sploosh
    {
      0% {  
        -ms-box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);
        background: rgba(66, 166, 223, 0.7);
      }
      100% {
        -ms-box-shadow: 0 0 0 300px rgba(66, 166, 223, 0);
        background: rgba(66, 166, 223, 0);
      }
    }
    
    
    @-moz-keyframes sploosh
    {  
      0% { 
        box-shadow: 0 0 0 0px rgba(66, 166, 223, 0.7);
        background: rgba(66, 166, 223, 0.7);
      }
      100% {
        box-shadow: 0 0 0 300px rgba(66, 166, 223, 0);
        background: rgba(66, 166, 223, 0);
      }
    }
  • 相关阅读:
    Java中如何设置表格处于不可编辑状态
    Android界面实现不成功(无报错)
    Eclipse网页报错
    【蓝桥杯】基础练习 十六进制转八进制 Java语言
    分析算法的复杂度
    Android Studio安装错误及解决办法
    Android程序报错以及解决办法
    Genymotion安装使用(配合Android Studio)
    Eclipse导入本地项目并运行
    蓝桥杯Java——安装软件Eclipse以及JDK
  • 原文地址:https://www.cnblogs.com/CyLee/p/5362145.html
Copyright © 2011-2022 走看看