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

代码语言:html

所属分类:动画

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

代码标签: css svg 文字 纸张 水中 波动 视觉 动画

下面为部分代码预览,完整代码请点击下载或在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 archite.........完整代码请登录后点击上方下载按钮下载查看

网友评论0