css+svg实现文字纸张水中波动视觉动画效果代码-html代码-BFW代码库

css+svg实现文字纸张水中波动视觉动画效果代码

代码语言：html

所属分类：动画

代码描述：css+svg实现文字纸张水中波动视觉动画效果代码，使用svg的filter实现。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
#parchment {
  position: absolute;
  display: flex;
    width: 50%;
  min-height: 200px;
  /* center page with absolute position */
  top: 0%; left: 50%; transform: translate(-50%, 0);
  margin: 2em 0;
    padding: 4em;
    box-shadow: 0 0 60px orange inset;
    background: pink;
  filter: url(#wavy2) drop-shadow(30px 10px 4px #4444dd);
    
}
</style>

  
</head>

<body>
  <div id="parchment">
  
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem modi reprehenderit enim nostrum culpa incidunt dolorum. Numquam, sed praesentium illum voluptates, laboriosam expedita molestias aliquid quidem itaque atque aperiam excepturi ut odio. Cum, minima commodi. Est voluptatibus vitae magnam qui sed, commodi fugit minus! Tempora vero ut ullam est voluptas et repudiandae quidem esse perferendis ipsum molestiae fuga, temporibus voluptate ratione fugiat totam vel officiis, perspiciatis, assumenda doloribus adipisci. Ex, fugit minus quos, quidem dicta, velit dolorum eligendi recusandae veniam facilis beatae neque quod dolores saepe quaerat. Iure atque natus distinctio expedita illum quibusdam cum quo optio, exercitationem consectetur ratione deleniti architecto, vero aspernatur, voluptates a porro nihil commodi rem! Ipsam voluptatem quidem provident tempora accusamus maiores, beatae eligendi corporis similique nam fugit at esse quod eos quasi dolore id vitae maxime ex illo ratione error doloribus tempore? Doloribus ducimus saepe quaerat illum ipsa sunt iste nobis provident quisquam modi maiores, corporis ut magni libero iure, quos obcaecati odit odio inventore maxime recusandae. Libero consectetur ab est expedita, reprehenderit enim temporibus eos repudiandae ipsam excepturi in numquam atque pariatur quo cumque aperiam id facere mollitia iusto dicta? Exercitationem optio amet consequatur inventore ducimus ab temporibus, debitis laborum.........完整代码请登录后点击上方下载按钮下载查看