前端水波紋往外展開1_ZenDei技術網路在線

前端水波紋往外展開1

-Advertisement-

來自：https://blog.csdn.net/qq_38658877/article/details/78092649 侵刪 Document ...

來自：https://blog.csdn.net/qq_38658877/article/details/78092649 侵刪
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    html {
        font-size: 20px;
    }
    
    body {
        background: #444;
    }
    
    .animate .w2 {
        -webkit-animation-delay: 1s;
    }
    
    .animate .w3 {
        -webkit-animation-delay: 2s;
    }
    
    .animate .w4 {
        -webkit-animation-delay: 3s;
    }
    
    .wave {
        width: 22.7rem;
        height: 22.7rem;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    
    .wave * {
        border: 1px solid #fff;
        position: absolute;
        border-radius: 50%;
        -webkit-animation: opac 4s infinite;
    }
    
    @-webkit-keyframes opac {
        from {
            opacity: 1;
            width: 0;
            height: 0;
            top: 50%;
            left: 50%;
        }
        to {
            opacity: 0;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
    }
    </style>
</head>

<body>
    <div class="animate wave">
        <div class="w1"></div>
        <div class="w2"></div>
        <div class="w3"></div>
        <div class="w4"></div>
    </div>
</body>

</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

按鈕浮動效果和絕對路徑的有關問題

一、定義一個文本框，一個按鈕和一個盒子 id分別設為text，btn,warp,定義的變數名分別為otext,obtn,owarp 註：定義變數 var var obtn=document.getElementById(" "); 二、調用一個function（）函數為obtn加一個點擊事件onc ...
px妙轉rem

px：像素，相對長度單位，相對於顯示器屏幕的解析度而言（其實我個人認為可以理解為固定單位）； rem：這是個web前端中的新成員，是CSS3中新增的一個相對單位。相對的只是html根元素； 1、設定兩個盒子（舉例） 2、簡單設定樣式（px形式） 3、簡單設定樣式（px轉rem形式） 4、兩種形式顯示 ...
node vue 開發環境部署時，外部訪問頁面出現： Invalid Host header 伺服器功能變數名稱訪問出現的問題

這是新版本 webpack-dev-server 出於安全考慮，預設檢查 hostname，如果hostname不是配置內的，將中斷訪問。顧僅存在於開發環境： npm run dev，打包之後不會。在 build/webpack.base.conf.js 的配置： ...
吐血bug-- 多個input框接連blur事件導致alert接連彈出

本來今天想記錄一下Flow在vue源碼中的應用，結果臨時觸發了個bug。。。 bug描述： elementUi + Vue 技術需求：一個表格中有至少兩條數據，每條數據都有input框，在失去焦點後需要一個彈框給出提示信息。觸發：在點擊一個input框後接著點擊另一個input框，使第一個inp ...
vue中axios的使用與封裝

分享下我自己的axios封裝axios是個很好用的插件，都是一些params對象，所以很方便做一些統一處理當然首先是npm安裝axios 很簡單$ npm install axios --save在src下新建文件夾 service / index.js接著上代碼以上請求之前的一些處理就完成了下 ...
一個C#程式員學習微信小程式的筆記

客戶端打開小程式的時候，就將代碼包下載到本地進行解析，首先找到了根目錄的 app.json ，知道了小程式的所有頁面。在這個Index頁面就是我們的首頁，客戶端在啟動的時候，將首頁的代碼裝載進來，通過微信的機制，就渲染出來了頁面。小程式在啟動的時候，首先通過 App() 定義的 App() 實例 ...
阿裡巴巴矢量圖標庫（Iconfont）-利於UI和前端的搭配

前端時間，做一個小網站的時候，需要用到很多小圖標，UI設計好之後不知道如何使用，如果使用圖片那會很麻煩，相信一些前端更喜歡iconfont這樣的標簽直接調用，這樣包括顏色和大小以及使用都更方便快捷，於是我們經過交流之後決定使用阿裡巴巴適量圖標庫，這是我們第一次使用，也順便把經驗分享給大家，希望可以對 ...
前端水波紋往外展開4

來自：https://blog.csdn.net/qq_38658877/article/details/78092649 侵刪 Document ...