前端實現水波圖動態效果_ZenDei技術網路在線

前端實現水波圖動態效果

-Advertisement-

來自：https://blog.csdn.net/sheng_li/article/details/84347987 侵刪<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont ...

來自：https://blog.csdn.net/sheng_li/article/details/84347987 侵刪
<!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>
    body,
    div,
    h1,
    h2,
    h3,
    html,
    li,
    p,
    ul {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    .boll {
        height: 174px;
        width: 174px;
        border-radius: 50%;
        border: 2px solid #fe810c;
        float: left;
        position: relative;
        font-size: 14px;
        overflow: hidden;
    }
    
    .text {
        text-align: center;
        margin-top: 40px;
        color: #fe810c;
    }
    
    .num {
        font-size: 30px;
    }
    
    .water {
        height: 50%;
        background: url(img/20181122201631427.png) repeat-x;
        position: absolute;
        width: 100%;
        -webkit-animation: move_wave 4s linear infinite;
        animation: move_wave 4s linear infinite;
    }
    
    .w1 {
        opacity: .5;
        background-position: 120px 0;
        -webkit-animation: move_wave 10s linear infinite;
        animation: move_wave 10s linear infinite;
    }
    
    .w2 {
        opacity: .3;
        background-position: 60px 0;
        -webkit-animation: move_wave 8s linear infinite;
        animation: move_wave 8s linear infinite;
    }
    
    @-webkit-keyframes move_wave {
        0% {
            background-position: 0 0
        }
        to {
            background-position: 532px 0
        }
    }
    
    @keyframes move_wave {
        0% {
            background-position: 0 0
        }
        to {
            background-position: 532px 0
        }
    }
    </style>
</head>

<body>
    <div class="boll">
        <div class="text">
            <p class="num">6542.3214</p>
            <p>BTC</p>
        </div>
        <div class="water w1"></div>
        <div class="water w2"></div>
        <div class="water"></div>
    </div>
</body>

</html>

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

-Advertisement-

更多相關文章

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 ...
前端水波紋往外展開1

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