CSS 实现一个动态水形波浪蒙版层
需求的最终实现效果，如下图，在盒子表面，绘制一个波浪形状的蒙版层（动态的）。
先定义一个，主体盒子块，等会儿的蒙版图层会覆盖到它的上面。
<div></div>
图层采用，SVG进行绘制，首先定义 SVG 的图层结构。但是这时候，图层虽然出来了，但还是静态的。
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28"preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /></defs><g class="parallax"><use xlink:href="#gentle-wave" x="48" y="0" /><use xlink:href="#gentle-wave" x="48" y="3" /><use xlink:href="#gentle-wave" x="48" y="5" /><use xlink:href="#gentle-wave" x="48" y="7" /></g></svg>
配置 CSS 样式，定义动画，让图层能够循环的动起来。动画配置完成后，再通过定位，将动起来的图层，覆盖到想要放置的地方。
//定位放置到想要的位置
.waves { position: absolute;width: 100%;height: 50%;bottom: 0;left: 0;border-radius: 10px;
}@mixin fill_backgroundcolor($backcoler) {fill: $backcoler;
}//设置波峰的颜色
.parallax>use {animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;@include fill_backgroundcolor(rgb(179, 238, 220));opacity: 0.8;
}// 为每一个波峰，分别设置，运动节奏，达到波浪参差不齐的运动表现。.parallax>use:nth-child(1) { animation-delay: -2s;animation-duration: 7s;
}.parallax>use:nth-child(2) {animation-delay: -3s;animation-duration: 10s;
}.parallax>use:nth-child(3) {animation-delay: -4s;animation-duration: 13s;
}.parallax>use:nth-child(4) {animation-delay: -5s;animation-duration: 20s;
}@keyframes move-forever { //定义过度动画0% {transform: translate3d(-90px, 0, 0);}100% {transform: translate3d(85px, 0, 0);}
}
CSS 实现一个动态水形波浪蒙版层相关推荐
- [css] 请使用CSS画一个带锯齿形边框圆圈
[css] 请使用CSS画一个带锯齿形边框圆圈 @import 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题
- CSS实现一个动态横向时间轴
CSS实现一个动态横向时间轴 先看效果 html <template><x-view class="stepFlex"><x-viewv-for=&q ...
- 用HTML+css制作一个动态的天气图标
前言 本文讲解用HTML+css制作一个动态的天气图标,如果觉得对你有帮助请关注小编,你的支持就是我更新的动力! 成品展示: 本程序是一个动态的 一.HTML部分 <!DOCTYPE html& ...
- 用html和css写一个动态的圣诞节贺卡
好的,首先,你需要在 HTML 中创建一个 div 元素来表示你的圣诞节贺卡.你可以在 div 元素中添加一些文本.图片和其他内容来表示你的贺卡. 然后,你可以使用 CSS 来设置贺卡的样式.你可以使 ...
- css画圆, 如何用纯css实现一个动态画圆环效果
最终的效果是:用纯css实现动态画圆的动画效果 html结构如下: <div class="wrap"> <div class="circle" ...
- html div添加天气,web前端入门到实战：纯CSS写一个动态太阳的天气图标
效果 效果图如下 实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构 用两个嵌套的div容器,父容器来控制 ...
- css3绘制环形_css画圆，如何用纯css实现一个动态画圆环效
展开全部 给你一62616964757a686964616fe78988e69d8331333365653761个例子:html> css动画 *, *:before, *:after { bo ...
- 【输出一个静态“心形”图案、一个跳动的“心”——使用C++、C语言来实现】
阅读目录 题目 代码(1)---静态"心形"(C++) 运行(1) 代码(2)---动态"心形"(C语言) 运行(2) 题目 使用C++.C语言来打印一个静态& ...
- 如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形 第一步 画一个长方形 (Draw a rectangle) 这个长 ...
最新文章
- 单层神经网络-Logistics回归中误差曲线
- 处理程序“ExtensionlessUrlHandler-Integrated-4.0”在其模块列表
- java nio长连接实现_kio: kio是基于jdk 1.6 nio实现的TCP长连接即时通讯框架。
- 买服务器带操作系统,买服务器带操作系统
- stm32f7网口_STM32F7串口通信问题
- 【Flink】kafka FlinkKafkaException send data to Kafka old epoch newer producer same transactionalId
- 英雄联盟壁纸，你可以喜欢？
- Linux之watch命令
- checkbox全选
- 理解unittest（六）
- keil如何下载STM32芯片F1/F4固件库
- idea将项目上传到SVN
- 大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之1.Hadoop简介及Apache Hadoop完全分布式集群搭建
- 练习-Java类和对象之包的定义
- php html block,html blockquote怎么用?blockquote标签的用法介绍
- 练习题58：接口练习1：用接口、多态、方法来实现：麻雀会飞 鹦鹉会飞 鸵鸟不会飞 企鹅不会飞 直升飞机会飞
- 《蜗居：心理健康枕边书》摘录
- XFP与SFP+光模块的区别是什么？能相互连接吗？
- 一文读懂Elephant Swap的LaaS方案的优势之处
- Emacs-206-Windows上实现org-pomodoro的声音提示播放
热门文章