HTML5/CSS3很棒的日出光线弥漫动画特效

使用CSS3混合模式（blend-mode）实现的色彩波动特效，来作为网站透明标题的背景，呈现出美妙梦境/天堂的视觉效果。

css3, blend-mode

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {

var state = {
        backgroundImage: ''
    }

$('input[name="wave-opacity"]').change(function() {
        $('.wave').css('opacity', $(this).val());
    });

$('input[name="wave-blur"]').change(function() {
        $('.waves')
            .css('filter', 'blur(' + $(this).val() + 'px)')
            .css('-webkit-filter', 'blur(' + $(this).val() + 'px)');
    });

$('input[name="wave-speed"]').change(function() {
        var value = 20 - $(this).val();
        // Safari doesn't apply animation parameters properly 
        // so have to pass stuff manually.
        var animationCss = {
            'animation-name': 'spin-1',
            '-webkit-animation-name': 'spin-1',
            'animation-timing-function': 'linear',
            '-webkit-animation-timing-function': 'linear',
            'animation-iteration-count': 'infinite',
            '-webkit-animation-iteration-count': 'infinite',
            'animation-duration': value + 's',
            '-webkit-animation-duration': value + 's'
        }

var wave = $('.wave');

// Safari needs this. FFS Safari
        wave.css('display', 'none');
        setTimeout(function() {
            wave.css(animationCss).css('display', 'block');
        }, 500);

});

$('input[name="bg-img"]').change(function() {
        if ($(this)[0].checked) {
            $('.page').css('background-image', state.backgroundImage);
        } else {
            $('.page').css('background-image', 'none');
        }
    });

$('input[name="custom-bg-img"]').keyup(function() {
        var value = $(this).val();
        $('.page').css('background-image', 'url(' + value + ')');

// Hold on to this for later
        state.backgroundImage = value;
    });

$('input[name="custom-text"]').keyup(function() {
        var value = $(this).val();
        $('h1').text(value);
    });

$('input[name="bg-color"]').change(function() {
        $('.page').css('background-color', $(this).val());
    });

$('input[name="title-color"]').change(function() {
        $('h1').css('color', $(this).val());
    });

$('select[name="blend-mode"]').change(function() {
        var value = $(this).val();
        var header = $('header');

// Change header BG color to black if using lightening
        // modes.
        if (['hard-light', 'lighten', 'color-dodge', 'screen'].indexOf(value) !== -1) {
            header.css('background-color', 'black');
            $('.wave').css('background-color', 'black');
        } else {
            header.css('background-color', 'white');
            $('.wave').css('background-color', 'white');
        }

$('header').css({
            'mix-blend-mode': value,
        });
    });

});

编译

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:400,900');
*,
*:before,
*:after {
    box-sizing: border-box;
}
html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
}
.page {
    font-family: 'Roboto', sans-serif;
    background: #ffffff url(/uploads/1702/sun-rise.jpg) bottom center no-repeat;
    background-size: cover;
}
label,
input,
select {
    margin-bottom: 10px;
}
.controls {
    padding: 10px 10px 1px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
}
.control {
    float: left;
    padding-right: 20px;
}
header {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    mix-blend-mode: multiply;
    background: white;
    opacity: 1;
}
h1 {
    font-size: 200px;
    font-size: 25vw;
    font-weight: 900;
    color: black;
    position: relative;
    margin: 0;
}
.waves {
    mix-blend-mode: hard-light;
    -webkit-filter: blur(25px);
    filter: blur(25px);
}
.wave {
    background-color: rgba(255, 255, 255, 1);
    width: 100vw;
    height: 100vw;
    position: absolute;
    top: 50%;
    left: 0;
    border-radius: 32%;
    -webkit-animation-name: spin-1;
    animation-name: spin-1;
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-backface-visibility: hidden;
    opacity: 0.7;
}
#wave-2 {
    -webkit-animation-name: spin-2 !important;
    animation-name: spin-2 !important;
    /*Important added for Safari jQuery issue - can be deleted for production */
    
    left: 20%;
}
#wave-3 {
    -webkit-animation-name: spin-2 !important;
    animation-name: spin-2 !important;
    /*Important added for Safari jQuery issue - can be deleted for production */
    
    left: -20%;
}
@-webkit-keyframes spin-1 {
    0% {
        -webkit-transform: translate3d(0, 3%, 0) rotate(0deg);
        transform: translate3d(0, 3%, 0) rotate(0deg);
    }
    100% {
        -webkit-transform: translate3d(0, 3%, 0) rotate(360deg);
        transform: translate3d(0, 3%, 0) rotate(360deg);
    }
}
@keyframes spin-1 {
    0% {
        -webkit-transform: translate3d(0, 3%, 0) rotate(0deg);
        transform: translate3d(0, 3%, 0) rotate(0deg);
    }
    100% {
        -webkit-transform: translate3d(0, 3%, 0) rotate(360deg);
        transform: translate3d(0, 3%, 0) rotate(360deg);
    }
}
@-webkit-keyframes spin-2 {
    0% {
        -webkit-transform: translate3d(0, 3%, 0) rotate(-45deg);
        transform: translate3d(0, 3%, 0) rotate(-45deg);
    }
    100% {
        -webkit-transform: translate3d(0, 3%, 0) rotate(315deg);
        transform: translate3d(0, 3%, 0) rotate(315deg);
    }
}
@keyframes spin-2 {
    0% {
        -webkit-transform: translate3d(0, 3%, 0) rotate(-45deg);
        transform: translate3d(0, 3%, 0) rotate(-45deg);
    }
    100% {
        -webkit-transform: translate3d(0, 3%, 0) rotate(315deg);
        transform: translate3d(0, 3%, 0) rotate(315deg);
    }
}
@-webkit-keyframes spin-3 {
    0% {
        -webkit-transform: translate3d(0, 3%, 0) rotate(60deg);
        transform: translate3d(0, 3%, 0) rotate(60deg);
    }
    100% {
        -webkit-transform: translate3d(0, 3%, 0) rotate(420deg);
        transform: translate3d(0, 3%, 0) rotate(420deg);
    }
}
@keyframes spin-3 {
    0% {
        -webkit-transform: translate3d(0, 3%, 0) rotate(60deg);
        transform: translate3d(0, 3%, 0) rotate(60deg);
    }
    100% {
        -webkit-transform: translate3d(0, 3%, 0) rotate(420deg);
        transform: translate3d(0, 3%, 0) rotate(420deg);
    }
}
.credit {
    padding: 10px 10px 1px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.3);
    text-align: center;
    color: white;
}
.credit a {
    color: #6381b6;
}
@media (min-width: 400px) {
    .controls,
    .credit {
        position: absolute;
        z-index: 2;
        width: 100%;
    }
    .credit {
        bottom: 0;
    }
}

HTML

<div class="page">
    <div class="controls">
        <div class="control">
            <label for="wave-opacity">Wave opacity</label>
            <br>
            <input min="0" max="1" value="0.7" step="0.1" type="range" name="wave-opacity" />
        </div>

<div class="control">
            <label for="wave-speed">Wave speed</label>
            <br>
            <input min="0" max="19" step="1" type="range" name="wave-speed" />
        </div>

<div class="control">
            <label for="title-color">Title color</label>
            <input type="color" name="title-color" value="#000000" />
        </div>

<div class="control">
            <label for="bg-color">Background color</label>
            <input type="color" name="bg-color" value="#ffffff" />
        </div>

<div class="control">
            <label for="bg-img">Background image</label>
            <input type="checkbox" checked name="bg-img" />
        </div>

<div class="control">
            <label for="custom-bg-img">Custom image</label>
            <input placeholder="Image url" name="custom-bg-img" />
        </div>

<div class="control">
            <label for="custom-text">Custom text</label>
            <input name="custom-text" />
        </div>

<div class="control">
            <label for="blend-mode">Blend mode</label>
            <select name="blend-mode" value="multiply" />
            <option class="option" value="multiply">multiply</option>
            <option class="option" value="color-burn">color burn</option>
            <option class="option" value="darken">darken</option>
            <option class="option" value="hard-light">hard light</option>
            <option class="option" value="lighten">lighten</option>
            <option class="option" value="color-dodge">color dodge</option>
            <option class="option" value="overlay">overlay</option>
            <option class="option" value="screen">screen</option>
            <option class="option" value="soft-light">soft light</option>
            </select>
        </div>
    </div>

<header>
        <h1 id="clip">Gazelle</h1>
        <div class="waves">
            <div class="wave" id="wave-1"></div>
            <div class="wave" id="wave-2"></div>
            <div class="wave" id="wave-3"></div>
        </div>
    </header>

<div class="credit">
        <p>Made by <a rel="nofollow" rel="noreferrer" href="https://www.linkedin.com/in/robcostello1/" target="_blank">Rob Costello</a>
        </p>
    </div>
</div>

使用CSS3混合模式（blend-mode）实现的色彩波动特效，来作为网站透明标题的背景，呈现出美妙梦境/天堂的视觉效果。

css3, blend-mode

编辑器支持Emmet

快捷键

使用CSS3混合模式（blend-mode）实现的色彩波动特效，来作为网站透明标题的背景，呈现出美妙梦境/天堂的视觉效果。

css3, blend-mode

HTML5 CSS3一款很棒的文本溶解过渡动画特效

HTML5 CSS3一组很棒的带晃动动画特效的单选按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：