前端实现水波图动态效果

yiliang 发布于2019-04-23 11:47 / 1028人阅读

摘要：来自侵删

来自：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>Documenttitle>
    <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.3214p>
            <p>BTCp>
        div>
        <div class="water w1">div>
        <div class="water w2">div>
        <div class="water">div>
    div>
body>

html>

GPU云服务器云服务器 js水波背景效果前端效果 html歌词动态效果 html加载动态效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1168.html

使用CSS实现逼真的水波纹点击效果

这篇文章特别介绍如何使用CSS来完成水波纹的效果。 div的层层叠叠虽然webkit具有遮罩的能力（webkit mask），不过webkit虽然强大，但在跨浏览器上总是它的罩门，况且在性能上也是往往会造成困扰（这也是为什么chrome要这么吃资源了），因此撇开webkit不谈，我们该用什么方法，才可以做出水波纹的效果呢？答案就是用叠的方式，这个水波纹效果的原理其实就是用六个div叠在一起，接着...

Tony_Zby 2019-08-02 16:16 评论0 收藏0
使用CSS实现逼真的水波纹点击效果

这篇文章特别介绍如何使用CSS来完成水波纹的效果。 div的层层叠叠虽然webkit具有遮罩的能力（webkit mask），不过webkit虽然强大，但在跨浏览器上总是它的罩门，况且在性能上也是往往会造成困扰（这也是为什么chrome要这么吃资源了），因此撇开webkit不谈，我们该用什么方法，才可以做出水波纹的效果呢？答案就是用叠的方式，这个水波纹效果的原理其实就是用六个div叠在一起，接着...

Cciradih 2019-08-30 10:52 评论0 收藏0