使用Tweenmax + Snap.svg实现带海面倒影的日落动画特效

Sunset with inverted reflection in water，这个例子也比较吃浏览器资源。

svg, sunset

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2598
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/* jshint esversion: 6 */

((window, document, snap, tm, tlm, undefined) => {

let container = document.querySelector('.container'),
        cMain = document.querySelector('.main'),
        cReflect = document.querySelector('.reflect'),
        filter = document.querySelector('#feturbulence');

let props = {
        dimensions: {
            container: container.getBoundingClientRect(),
            main: cMain.getBoundingClientRect(),
            reflect: cReflect.getBoundingClientRect()
        },
        sunRadius: 60,
        sunStartPos: {
            x: 0,
            y: -60
        },
        sunEndPos: {
            x: 500,
            y: 200
        }
    };

let main = snap(cMain);
    let reflect = snap(cReflect);

let timeline1, timeline2, sun, sunReflect, text;

timeline2.add(
            new tm.to(filter, 5, {
                onUpdate: () => {
                    let bfX = timeline2.progress() * 0.005 + 0.025,
                        bfY = timeline2.progress() * 0.05 + 0.15,
                        bfStr = bfX.toString() + ' ' + bfY.toString();
                    filter.setAttribute('baseFrequency', bfStr);
                }
            }), 0
        );
    };

window.onload = () => {
        createElements();
        createTimelines();
    };

})(this, document, Snap, TweenMax, TimelineMax);

编译

CSS

body {
    height: 100vh;
    width: 100vw;
    background-image: -webkit-radial-gradient(#efefef, #9f9f9f);
    background-image: radial-gradient(#efefef, #9f9f9f);
}
.wrapper {
    position: absolute;
    top: calc(50% - 200px);
    left: calc(50% - 300px);
    width: 600px;
    height: 400px;
}
.wrapper .container {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: -webkit-linear-gradient(powderblue, steelblue);
    background-image: linear-gradient(powderblue, steelblue);
    background-size: 100% 50%;
}
.wrapper .container .main,
.wrapper .container .reflect {
    overflow: hidden;
    position: absolute;
}
.wrapper .container .main {
    top: 0;
    left: 0;
    height: 55%;
    width: 100%;
    background-color: powderblue;
}
.wrapper .container .reflect {
    left: 0;
    bottom: 0;
    height: 50%;
    width: 100%;
    -webkit-filter: url("#turbulence");
    filter: url("#turbulence");
    background-image: -webkit-linear-gradient(powderblue, steelblue);
    background-image: linear-gradient(powderblue, steelblue);
}
.wrapper::after {
    position: absolute;
    z-index: 1;
    top: 10%;
    left: 2.5%;
    height: 95%;
    width: 95%;
    content: "";
    display: block;
    background-color: #3f3f3f;
    -webkit-filter: blur(25px);
    filter: blur(25px);
}
.codepen-link {
    position: absolute;
    bottom: 30px;
    right: 30px;
    height: 40px;
    width: 40px;
    z-index: 10;
    border-radius: 50%;
    box-sizing: border-box;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg");
    background-position: center center;
    background-size: cover;
    opacity: 0.4;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}
.codepen-link:hover {
    opacity: 0.8;
    box-shadow: 0 0 6px #0f0f0f;
}

HTML

Sunset with inverted reflection in water，这个例子也比较吃浏览器资源。

svg, sunset

编辑器支持Emmet

快捷键

Sunset with inverted reflection in water，这个例子也比较吃浏览器资源。

svg, sunset

使用SVG feImage和feDisplacementMap滤镜属性实现的图片特效

使用SVG feDisplacementMap特性实现图片脉冲波动动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：