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);
      }
    }
  • 相关阅读:
    python 中文乱码问题
    PHP读取CSV文件把数据插入到数据库,本地没有问题,阿里云测试服务器不行
    UTF-8 Unicode ANSI网页编码的区别
    php 读取csv 乱码
    zend studio(Eclipse)和PyDev搭建Python开发环境
    php 如何解决“您访问的域名有误或网页不存在”
    mysql数据去除重复及相关优化(转)
    Git的简单使用教程
    PHP mysql基础操作
    PHP两个文件的相对路径
  • 原文地址:https://www.cnblogs.com/CyLee/p/5362145.html
Copyright © 2011-2022 走看看