css3滑鼠點擊出現波浪動態效果案例現場

阿新 • • 發佈：2018-10-31

css3滑鼠點擊出現波浪動態效果案例現場
話不多說先上圖：
這裡寫圖片描述
程式碼：（有es6語法注意相容問題，推薦Chrome開啟）

<html>
    <body>
        <div class="g-container">
        </div>
    </body>
</html>
<script src="jquery.js"></script>
<script>
    (function() {
            let x, y;
            let 
 index = 0;
            let screenSizeWidth = $('body').width();
            let screenSizeHeight = $('body').height();
            let halfvmin = (screenSizeWidth > screenSizeHeight ? screenSizeHeight / 2 : screenSizeWidth / 2) * 0.8;
            $(document).on("click", function(e) {
                x = e.pageX;
                y = e.pageY;
                waveMove(x, y, index++);
            });
            function 
 waveMove(x, y, z) {
                $(".g-container").append(`
                    <div class="g-position g-position${z}" style="top:${y - halfvmin}px; left:${x - halfvmin}px; z-index:${z}">
                        <div class="g-center">
                            <div class="wave g-wave1" 
></div>
                            <div class="wave g-wave2"></div>
                            <div class="wave g-wave3"></div>
                            <div class="wave g-wave4"></div>
                        </div>
                    </div>
                `);
                setTimeout(function() {
                    $(`.g-position${z}`).remove();
                }, 3000);
            }
        })();
</script>
<style lang="">
body,
html {
    width: 100%;
    height: 100%;
}
.g-container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=');
    background-attachment: fixed;
    background-position: center center; 
    background-size: auto 100%;
    overflow: hidden;
    cursor: pointer;
}
.g-position {
    position:absolute;
    width: 80vmin;
    height: 80vmin;
}
.g-center {
    position: relative;
    width: 100%;
    height: 100%;
}
.wave {
    position: absolute;
    top: calc((100% - 20vmin)/2);
    left: calc((100% - 20vmin)/2);
    width: 20vmin;
    height: 20vmin;
    border-radius: 50%;
    background-image: url(https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=);
    background-attachment: fixed;
    background-position: center center;
    transform: translate3d(0, 0, 0);
    opacity: 0;
    transition: all .2s;
}
.g-wave1 {
    background-size: auto 106%;
    animation: wave 1s ease-out .1s;
    animation-fill-mode: forwards;
    z-index: 10;
}

.g-wave2 {
    background-size: auto 102%;
    animation: wave 1s ease-out .15s;
    animation-fill-mode: forwards;
    z-index: 20;
}
.g-wave3 {
    background-size: auto 104%;
    animation: wave 1s ease-out .25s;
    animation-fill-mode: forwards;
    z-index: 30;
}
.g-wave4 {
    background-size: auto 100%;
    animation: wave 1s ease-out .4s;
    animation-fill-mode: forwards;
    z-index: 40;
}
@keyframes wave {
    0% {
        top: calc((100% - 20vmin)/2);
        left: calc((100% - 20vmin)/2);
        width: 20vmin;
        height: 20vmin;
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        top: calc((100% - 80vmin)/2);
        left: calc((100% - 80vmin)/2);
        width: 80vmin;
        height: 80vmin;
        opacity: 0;
    }
}
</style>

css3滑鼠點擊出現波浪動態效果案例現場

css3滑鼠點擊出現波浪動態效果案例現場話不多說先上圖：程式碼：（有es6語法注意相容問題，推薦Chrome開啟） <html> <body> <div class="g-container"> &l

滑鼠點擊出現愛心特效

//滑鼠點擊出現愛心特效 (function(window,document,undefined){ var hearts = []; window.requestAnimationFrame = (function(){

CSS屬性選擇器_滑鼠點擊出現列表

效果圖：程式碼實現：  <!DOCTYPE html> <html> <head>

左側豎條導航欄點擊出現效果的實現

導航欄大部分的網站導航欄都是在網頁的頂端，這類導航欄看起來非常一般，而有些在左側豎著顯示的導航欄就比較好看一些了，但是今天為大家介紹的是左側豎條導航欄實現點擊出現的效果，也就是剛開始只顯示導航，不顯示分類欄，而點擊導航就可以顯示分類欄了，下面一起來看下源代碼的實現吧。<!DOCTYPE html>

JS實例之選項卡效果，實現點擊對應的顯示效果

http body auto 100% itl elements lis style char 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

在自定義的tabbar 中間按鈕點擊出現一個view 再點擊view返回

show 小問題 log 出現 alt bsp 兩個 bar logs 入職第三天遇到一個小問題記下來問題是自定義的tabbar 中間一個加號按鈕點擊從下彈出一個view，再點擊 view返回首先再tabbar的view .h添加一個代理方法在.m中

點擊出現蒙層，然後點擊空白地方蒙層消失(阻止冒泡)

ppr 冒泡 return .com 如果 ati log png images 要做一個這樣的蒙層很簡單。要實現點擊空白地方蒙層消失的時候要註意 $(觸發蒙層對象).click(function(e){ 　　e.stopPropagation();

TextView SpannableString 使用之實現可點擊超鏈接效果

實現 ont 下劃線其中 fff string -s 控件顯示文字 TextView SpannableString 使用之實現可點擊超鏈接效果如果看到這裏說明你對 TextView 已經有了一定的了解，至少已經使用過該控件顯示文字過。現在來實現一些復雜一點的效果。

jQuery第四課點擊 _選項卡效果一

一起大於 his 開發經驗職業素質 show class 隨著未來 //鼠標移到上面是顯示手型cursor:pointerjquery 的函數:siblings //兄弟節點，同胞元素:eq()選擇器選取帶有指定 index 值的元素。index 值從 0 開始，所有

AndroidStudio連續點擊出現兩次介面。

安卓在點選按鈕跳轉一個新的Acticity時，若連續點選過快，有可能會出現跳出兩層介面。這時候我們只需要寫一個工具類來禁用二次點選失效。點選第一次是傳入當前時間，再點選再傳入當前時間。若時間差再某一個範圍內則第二次點選不能跳轉 public class Utils {

layui使用button按鈕點擊出現子彈層彈層中載入表單，並傳遞引數給父彈出層

在父層中增加button按鈕和隱藏域接收子彈出層傳遞的值 <button id="btnMenuTree" type="button" class="layui-btn layui-btn-radius layui-btn-normal layui-btn-xs">選擇</bu

JQuery應用例項學習 —— 28 處理json返回值，點擊出現後臺返回資料

27.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

點擊出現閃爍

（移動端上）有事件監聽的元素被點選的時候會被高亮顯示，比如我的android上表現為一個藍框加上半透明的背景，這有時候會和我本來的樣式格格不入，就要想辦法去掉。然後我就baidu啊、bing啊、sogou啊、google啊（為什麼要把google放到最後呢？因為連不上。。。），加上看了下簡書的原始

Android 實現點擊出現選擇框，或者長按顯示選擇介面,PopupMenu的簡單使用。

這篇文章是我學習過程中遇到的一個比較簡單的，但是卻經常用到的知識點，例如ListView Item長按的選擇功能，或者是點選一個按鈕彈出一個小型的功能選擇介面。其實呢，這個是通過一個PopupMenu來實現,來現在我們先看看程式碼，首先我們需要在 r

頁面點擊出現愛心

!function (e, t, a) {function r() {for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--

關於easyui的datagrid detailview的初次點擊出現的重疊錯位問題

先上問題的效果圖由上圖可以知道，當點選按鈕的時候，會出現詳情頁將下面的資料擠出到別的位置，正確的效果圖，應該是這樣子的：我們來看程式碼是怎麼寫的： view: detailview, detail

點擊頁面出現愛心效果

cit lba position rand and logs animation out event 偶然在網上瀏覽頁面時發現了這個小特效，感覺很不錯，就找到了源碼分享給大家 (function(window,document,undefined){

UWP：使用Behavior實現Button點擊動態效果

gif info 並且特效原因還記得 pac 成功 col 原文:UWP：使用Behavior實現Button點擊動態效果廢話不多說，先上效果沒有做成安卓那種圓形的原因是...人家真的不會嘛... 好了下面是正文：首先在工程中引入Behavior的庫，我

CSS3和SVG炫酷滑鼠點選按鈕效果

這是一組效果非常炫酷的HTML5 SVG和CSS3滑鼠點選按鈕特效。這組滑鼠點選按鈕特效共有22種效果，大多數是在偽元素上使用CSS3 animations來製作動畫效果。非常適合於移動手機APP上的按鈕觸控特效。

滑鼠點選反饋效果(基於css3動畫)

網上多是基於js-setTimeout及setInterval實現的動畫效果，此篇基於css3-transition實現。浮出符號效果： <!DOCTYPE html> <html> <head> <meta http-eq

css3滑鼠點擊出現波浪動態效果案例現場

相關推薦