CSS3+SVG 实现波浪滚动效果

CSS3+SVG 实现波浪滚动效果
实现代码如下focus__a和focus__b是绝对定位,focus__b在focus__a之上
以下是HTML代码


    <div class="ainuo_focus_bot">
        <div class="focus__a"></div>
        <div class="focus__b"></div>
    </div>

以下是样式和CSS3动画代码


.focus__a {
    background: url(images/focus_a.svg) repeat-x;
    background-size: 450px;
    -webkit-animation: ainuo_bgdwtop 3.5s infinite linear;
    animation: ainuo_bgdwtop 3.5s infinite linear;
}
.focus__b {
    background: url(images/focus_b.svg) repeat-x;
    top: 5px;
    background-size: 450px;
    -webkit-animation: ainuo_bgdwbm 6s infinite linear;
    animation: ainuo_bgdwbm 6s infinite linear;
}
@keyframes ainuo_bgdwbm{0%{background-position:0 top}100%{background-position:450px top}}

以下是focus_a.svg图的代码,直接文本形式保存成svg格式


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="600px" height="60px" viewBox="0 0 600 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.comiis.com/">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="-" sketch:type="MSArtboardGroup" transform="translate(-121.000000, -133.000000)" fill-opacity="0.3" fill="#ffffff">
            <g id="water-1" sketch:type="MSLayerGroup" transform="translate(121.000000, 133.000000)">
                <path d="M0,7.69857395 L4.67071962e-15,60 L600,60 L600,7.35230461 C600,7.35230461 432.721052,24.1065138 290.48404,7.35674187 C148.247027,-9.39303008 0,7.69857395 0,7.69857395 Z" id="Path-1" sketch:type="MSShapeGroup"></path>
            </g>
        </g>
    </g>
</svg>

以下是focus_b.svg图的代码,直接文本形式保存成svg格式


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="600px" height="60px" viewBox="0 0 600 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.comiis.com/">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="-" sketch:type="MSArtboardGroup" transform="translate(-121.000000, -246.000000)" fill="#ffffff">
            <g id="water-2" sketch:type="MSLayerGroup" transform="translate(121.000000, 246.000000)">
                <path d="M0,7.69857395 L4.67071962e-15,60 L600,60 L600,7.35230461 C600,7.35230461 432.721052,24.1065138 290.48404,7.35674187 C148.247027,-9.39303008 0,7.69857395 0,7.69857395 Z" id="Path-2" sketch:type="MSShapeGroup" transform="translate(300.000000, 30.000000) scale(-1, 1) translate(-300.000000, -30.000000) "></path>
            </g>
        </g>
    </g>
</svg>

新增加另外一种办法

实现原理见代码


            <style type="text/css">
        .waves {
          /*position:relative;*/
          position: absolute;
          bottom: 0;
          width: 100%;
          height:15vh;
          margin-bottom:-7px; /*Fix for safari gap*/
          min-height:100px;
          max-height:150px;
          z-index: 5;
        }

        /* Animation */

        .parallax > use {
          animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
        }
        .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);
          }
        }
        /*Shrinking for mobile*/
        @media (max-width: 768px) {
          .waves {
            height:40px;
            min-height:40px;
          }
        }
    </style>
    <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" fill="rgba(241,241,241,0.7" />
            <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(241,241,241,0.5)" />
            <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(241,241,241,0.3)" />
            <use xlink:href="#gentle-wave" x="48" y="7" fill="#f1f1f1" />
        </g>
    </svg>

2 thoughts on “CSS3+SVG 实现波浪滚动效果
  1. cheapest cialis 2023/11/19 12:34  1

    Hi there mates, its impressive article concerning cultureand completely explained,
    keep it up all the time.

Comments are closed.

添加一条新回复 回到顶部

亲爱的,主人已经关闭了这篇文章的评论 。