SVG滤镜波浪动画效果

今天给大家分享一个用SVG实现的滤镜波浪动画效果，效果如下：

以下是代码实现，欢迎大家复制粘贴和收藏。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>SVG滤镜波浪动画效果</title><style>* {font-family: '微软雅黑', sans-serif;box-sizing: border-box;}body {display: flex;align-items: center;justify-content: center;background: #000;min-height: 100vh;}.container {position: relative;display: flex;justify-content: center;align-items: center;}.container .box {position: relative;width: 300px;height: 400px;color: #fff;display: flex;align-items: center;justify-content: center;-webkit-box-reflect: below 15px linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.2));margin: 0 30px;}.container .box:hover {color: #000;}.container .box::before {content: '';position: absolute;left: -10px;top: -10px;width: 100%;height: 100%;border: 4px solid #fff;background: #000;filter: url(#wavy);}.container .box:hover:before {background: #fff;transition: 0.5s;}.container .box::after {content: '';position: absolute;left: -10px;top: -10px;width: 50%;height: 100%;border: 4px solid #fff;border-right: none;background: rgba(255, 255, 255, 0.1);filter: url(#wavy);}.container .box .content {position: absolute;padding: 20px;text-align: center;transition: 0.5s;}p{text-align: justify;}svg {width: 0;height: 0;}</style>
</head><body><div class="container"><div class="box"><div class="content"><h2>Water Wave Text</h2><p>挫折之花，绽放于与命运的抗衡。司马迁因秉笔直书，“不溢美，不隐恶”，而遭受腐刑，然而他在狱中却坚强的与命运作斗争，面对挫折，他选择了勇敢；面对挫折，他选择了发愤；面对挫折，他选择了秉笔直书。终于，他“着成信史照尘寰”，留下了千古美名！让挫折之花绽放了两千年！</p></div></div><div class="box"><div class="content"><h2>Water Wave Text</h2><p>挫折之花，绽放于与命运的抗衡。司马迁因秉笔直书，“不溢美，不隐恶”，而遭受腐刑，然而他在狱中却坚强的与命运作斗争，面对挫折，他选择了勇敢；面对挫折，他选择了发愤；面对挫折，他选择了秉笔直书。终于，他“着成信史照尘寰”，留下了千古美名！让挫折之花绽放了两千年！</p></div></div><div class="box"><div class="content"><h2>Water Wave Text</h2><p>挫折之花，绽放于与命运的抗衡。司马迁因秉笔直书，“不溢美，不隐恶”，而遭受腐刑，然而他在狱中却坚强的与命运作斗争，面对挫折，他选择了勇敢；面对挫折，他选择了发愤；面对挫折，他选择了秉笔直书。终于，他“着成信史照尘寰”，留下了千古美名！让挫折之花绽放了两千年！</p></div></div></div><svg><filter id="wavy"><feTurbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="2"><animate attributeName="baseFrequency" dur="60s" values="0.02;0.05;0.02" repeatCount="indefinite"></animate></feTurbulence><feDisplacementMap in="SourceGraphic" scale="30"></feDisplacementMap></filter></svg>
</body></html>

SVG滤镜波浪动画效果相关推荐

SVG网页波浪动画效果背景
给大家分享一个SVG网页波浪动画效果背景 CSS部分 <style> .body { min-height: 100vh; display: -webkit-box; display: f ...
html svg波浪,CSS3+SVG 实现波浪滚动效果
CSS3+SVG 实现波浪滚动效果实现代码如下focus__a和focus__b是绝对定位,focus__b在focus__a之上以下是HTML代码以下是样式和CSS3动画代码 .focus__ ...
css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构该css3线条波浪动画效果的HTML结构如下: CSS样式然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...
纯CSS实现帅气的SVG路径描边动画效果
一.应该人人皆会的基础技术简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 国外很多相关介绍的文章,来看看一些效果gif吧~ 纯CSS实现帅气的SVG路径描边动画效果纯CSS实现帅气的SV ...
css3波浪纹路_css3线条波浪动画效果
这是一款使用CSS3 animation动画和png图片制作的css3线条波浪动画效果.该特效中,使用了3张波浪线条的png图片,以及少量的CSS代码,制作出逼真的线条波浪动画效果. 使用方法 HTM ...
CSS3实现的线条波浪动画效果
阅读目录阐述 HTML结构 CSS 样式预览阐述这是一款使用CSS3 animation 动画和 png 图片制作的 css3 线条波浪动画效果. 该特效中,使用了 3 张波浪线条的 png ...
Canvas科幻网状波浪动画效果
下载地址Canvas科幻网状波浪动画效果是一款正弦波弧度波浪动画,像素块波浪特效. dd:
【Qt】实现波浪动画效果
所谓的波浪动画效果,就是多个正弦波形组合的效果. 先看看效果: 既然要画正弦波形,那就得先来了解正弦波,要绘制正弦波,其函数必须要了解.下面重拾高中知识,再一次再进正弦函数正弦函数的物理意义: y ...
css海浪动画代码,CSS3实现的线条波浪动画效果
演示: http://demo.shanhubei.com/demo/waveAnimation/ 这是一款使用CSS3 animation动画和png图片制作的css3线条波浪动画效果.该特效中,使 ...

SVG滤镜波浪动画效果

SVG滤镜波浪动画效果相关推荐

最新文章

热门文章