前端实现水波图动态效果

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

摘要：来自侵删

来自：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>

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

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

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

【带着canvas去流浪（7）】绘制水球图

摘要：球形剪裁区域水波的范围是不能流出球形的外轮廓的，此处的做法是在绘制水波之前，先使用方法将水波的可见绘图区域控制在水球之内即可，如果还有水球外的图形需要绘制，记得在每一帧绘制完水波后调用取消掉之前的剪裁。 showImg(https://segmentfault.com/img/bVbtnTv?w=700&h=256); 示例代码托管在：http://www.github.com/das...

yuanzhanghu 2019-08-05 17:23 评论0 收藏0
基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控

摘要：预览地址基于的楼宇自控可视化监控界面简介及效果预览界面通过图纸叠加在场景上来实现界面与场景的融合，界面通过自动布局的机制实现了手机端与电脑端的响应式呈现。前言智慧楼宇和人们的生活息息相关，楼宇智能化程度的提高，会极大程度的改善人们的生活品质，在当前工业互联网大背景下受到很大关注。目前智慧楼宇可视化监控的主要优点包括: 智慧化 -- 智慧楼宇是一个生态系统，像人一样拥有感知能力、自...

Faremax 2019-08-05 16:09 评论0 收藏0
使用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
Python 计算机视觉（十五）—— 图像特效处理

摘要：话不多说，先是本系列文章的经典操作之读取图像信息得到的图像信息如下毛玻璃特效毛玻璃特效的原理是在当前的像素点的邻域内随机取一个像素点来代替它，从而达到一个毛玻璃的模糊的效果。参考的一些文章以及论文我都会给大家分享出来 —— 链接就贴在原文，论文我上传到资源中去，大家可以免费下载学习，如...

LeexMuller 2021-11-22 09:34 评论0 收藏0