css實現波紋回彈

阿新 • • 發佈：2018-12-03

css實現波紋回彈

比如直接點選一個盒子，讓他的背景像波紋一樣

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滑鼠點選按鈕呈現水波擴散效果</title>

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

.coupon {
    position: relative;
}
.coupon canvas {
    opacity 
: 0.25;
    position: absolute;
    top: 0;
    left: 0;
}
</style>
</head>
<body>

    <li  class="coupon" data-color="#ee5600" onclick="lionclick()" tapmode="activeon">不論白天黑夜，在風馳電掣的旅客列車。</li>

<script type="text/javascript" >
var canvas = {},
    centerX = 0,
    centerY = 0 
,
    color = '',
    containers = document.getElementsByClassName('coupon')
    context = {},
    element = {},
    radius = 0,

    requestAnimFrame = function () {
      return (
        window.requestAnimationFrame       || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     || 
        function 
 (callback) {
          window.setTimeout(callback, 1000 / 60);
        }
      );
    } (),

    init = function () {
      containers = Array.prototype.slice.call(containers);
      for (var i = 0; i < containers.length; i += 1) {
        canvas = document.createElement('canvas');
        canvas.addEventListener('click', press, false);
        containers[i].appendChild(canvas);
        canvas.style.width ='100%';
        canvas.style.height='100%';
        canvas.width  = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
      }
    },

    press = function (event) {
      color = event.toElement.parentElement.dataset.color;
      element = event.toElement;
      context = element.getContext('2d');
      radius = 0;
      centerX = event.offsetX;
      centerY = event.offsetY;
      context.clearRect(0, 0, element.width, element.height);
      draw();
    },

    draw = function () {
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = color;
      context.fill();
      radius += 8;
      if (radius < element.width) {
        requestAnimFrame(draw);
      }
    };

init();
</script>
</body>
</html>

css實現波紋回彈

css實現波紋回彈比如直接點選一個盒子，讓他的背景像波紋一樣 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滑鼠點選按鈕呈現水波擴散效果</t

ScrollView實現阻尼回彈效果！

今天跟大夥簡紹個ScrollView的阻尼回彈！下拉到一定程度，可以回撥進行重新整理和進行操作等！直接上程式碼了！ package com.***.fb**.widget; import android.content.Context; import

div+css實現簡單的彈出窗（背景變灰色）

自己做了一個網站，需要用到彈出框的功能，以前沒做過這個，就去網上查了下資料，然後試著寫了一個最簡單的彈出框效果。需求：點選彈出框按鈕，在原頁面基礎上彈出一個彈出框，並且背景要變成灰色，原頁面不能被編

下拉ScrollView伸縮頭佈局，實現ScrollView回彈效果

專案中用到了商品詳情展示效果，所以立馬想到借鑑天貓商品詳情介面，看了天貓的詳情頁面想到了兩套解決方案。1，使用LitView 新增header監聽listView 的滑動然後根據listView 的滑動距離計算 header應該滑動的距離和改變header的

通過純JS和css實現自定義彈出對話方塊

需求：實現通過一個彈出對話方塊來選擇下拉列表中對應值進行引數設定操作，及彈出對話方塊中需要有一個下拉列表輸入和一個確定按鈕即可，要求彈出對話方塊後，背部介面不能夠操作或者被遮蔽灰掉。思路： 1.開始以為so so much simple，毫不猶豫考慮prompt彈出對話

jqury+css實現可彈出伸縮層

頁面布局 csdn 之前 div html jsb ava nts tex 1、使用可彈出伸縮窗調整了之前的頁面布局，使用這樣的布局使整個界面看起來更加清爽也更簡潔2、以上圖左側面板為例，實現比較簡單，僅僅需了解html和css布局就大致差點兒相同了html代碼：CSS：

彈性ScrollView,和下啦刷新的效果相似實現下拉彈回和上拉彈回

調用 delta nes mode schema lin del enter class 今天做了一個彈性ScrollView,和下啦刷新的效果類似，我想這個非常多需求都用的這樣的效果事實上這是一個自己定義的scrollView,上代碼。這是我寫在一個公共的組件包裏的

自定義ScrollView 實現上拉下拉的回彈效果--並且子控件中有Viewpager的情況

是否 AS abs pri tar utils lda animation ted onInterceptTouchEvent就是對子控件中Viewpager的處理：左右滑動應該讓viewpager消費 1 public class MyScrollView ext

iOS Swift 實現圖片點擊縮放回彈動畫

obj mean awake art 簡單 onf 點擊縮放 fork sde 效果就是下面這個樣子：思路借鑒的是MZTimerLabel，有想過做一個自定義的ImageView,但那樣的話之前view用必須要改代碼，索性就按照MZTimerLabel這個方式實現，簡

CSS實現tost彈窗效果

html: <div class="black-and-white-b"> <div class="hintBox"></div> </div> css: .bla

html與css實現彈窗效果

彈窗由html、css組成，通過js控制彈窗 html程式碼： <div class="btn_select">//刪除儲存按鈕 <ul> <li>

使用CSS實現按鈕點選波紋效果

有的網站會為按鈕新增點選波紋效果提升網站效果，我們可以簡單實現一下：主要藉助::after偽類及CSS3中的transform和transition屬性： html:<div class="container text-center"> &l

CSS實現按鈕點選的水波紋特效

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style>

webapp在ios中簡單實現滑動，回彈，加速等效果

-webkit-overflow-scrolling來自safari原生控制元件的實現，工作原理是：在有這個屬性的容器上，系統會建立了一個uiscrollview，應用於該元素並將之作為渲染物件，從而為我們實現體驗流暢的觸屏滑動在Ios上的表現結果令人十分滿意，並且網

Android重寫ScrollView實現上拉下拉回彈，下拉頭部放大功能

效果圖：自定義ScrollView： public class MyScrollView extends ScrollView { //----頭部收縮屬性-------- // 記錄首次按下位置 private float mFirstPositi

js+css實現點選按鈕水波紋

.ripple-effect { position: relative; overflow: hidden; } .btn { width: 150px; height: 40px;

實現ViewPager的回彈效果

為了能夠在ViewPager的第一頁和最後一頁左右滑動時候不顯得那麼生硬，通過重寫ViewPager類實現回彈效果。程式碼很簡單，主要重寫onTouchEvent方法。程式碼如下： public class BounceBackViewPager

CSS實現彈出導航選單

完整程式碼，儲存在html檔案開啟也可看到效果： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g

webView 之 webapp在ios中簡單實現滑動，回彈，加速等效果

webkit-overflow-scrolling來自safari原生控制元件的實現，工作原理是：在有這個屬性的容器上，系統會建立了一個uiscrollview，應用於該元素並將之作為渲染物件，從而為我們實現體驗流暢的觸屏滑動在Ios上的表現結果令人十分滿意，並且網頁

網頁在Safari快速滾動和回彈的原理： -webkit-overflow-scrolling : touch;的實現

現在很多for Mobile的HTML5網頁內都有快速滾動和回彈的效果，看上去和原生app的效率都有得一拼。要實現這個效果很簡單，只需要加一行css程式碼即可： -webkit-overflow-scrolling : touch;可用以下網頁測試： <!DO

css實現波紋回彈

css實現波紋回彈

相關推薦