HTML5海洋废弃物垃圾动画展示

使用海洋垃圾碎片拼成的鲨鱼摆尾动画。很有创意的概念作品！

h5, svg, fish

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var $one = $('.one'),
    $two = $('.two'),
    $three = $('.three'),
    $four = $('.four'),
    $five = $('.five'),
    $shark = $('.shark'),
    $x_axis = $('#x-axis'),
    $y_axis = $('#y-axis'),
    $container = $('body'),
    container_w = $container.width(),
    container_h = $container.height();

$(window).on('mousemove.parallax', function(event) {
    var pos_x = event.pageX,
        pos_y = event.pageY,
        left = 0,
        top = 0,
        bri = 0;

bri = container_h / 0.25 - pos_y;
    left = container_w / 2 - pos_x;
    top = container_h / 2 - pos_y;

TweenMax.to(
        $x_axis,
        1, {
            css: {
                transform: 'translateX(' + (left * -1) + 'px)'
            },
            ease: Expo.easeOut,
            overwrite: 'all'
        });

TweenMax.to(
        $y_axis,
        1, {
            css: {
                transform: 'translateY(' + (top * -1) + 'px)'
            },
            ease: Expo.easeOut,
            overwrite: 'all'
        });
    TweenMax.to(
        $one,
        1, {
            css: {
                transform: 'translateX(' + (left * -0.06) + 'px) translateY(' + (top * -0.04) + 'px)',

ease: Expo.easeOut,
            overwrite: 'all'
        });
    TweenMax.to(
        $two,
        1, {
            css: {
                transform: 'translateX(' + (left * 0.06) + 'px) translateY(' + (top * 0.04) + 'px)',

ease: Expo.easeOut,
            overwrite: 'all'
        });
    TweenMax.to(
        $three,
        1, {
            css: {
                transform: 'translateX(' + (left * -0.02) + 'px) translateY(' + (top * 0.04) + 'px)',

ease: Expo.easeOut,
            overwrite: 'all'
        });
    TweenMax.to(
        $four,
        1, {
            css: {
                transform: 'translateX(' + (left * 0.04) + 'px) translateY(' + (top * -0.02) + 'px) rotate(' + (left * -0.0025) + 'deg)',

ease: Expo.easeOut,
            overwrite: 'all'
        });
    TweenMax.to(
        $five,
        1, {
            css: {
                transform: 'translateX(' + (left * -0.04) + 'px) translateY(' + (top * -0.02) + 'px) rotate(' + (top * -0.01) + 'deg)',

ease: Expo.easeOut,
            overwrite: 'all'
        });
    TweenMax.to(
        $shark,
        1, {
            css: {
                transform: 'translateX(' + (left * -0.07) + 'px) translateY(' + (top * 0.04) + 'px) rotate(' + (top * 0.02) + 'deg)',

ease: Expo.easeOut,
            overwrite: 'all'
        });

});

编译

CSS

body {
    background: -webkit-linear-gradient(top, #273276, #f99432 175%);
    background: linear-gradient(to bottom, #273276, #f99432 175%);
    width: 100%;
    height: 100vh;
}
body .intro {
    position: absolute;
    width: 30%;
    height: auto;
    background: #fff;
    display: inline-block;
    padding: 30px 50px;
    bottom: 5%;
    right: 5%;
}
body .intro p {
    font-size: 18px;
    color: #273276;
    font-family: 'Francois One', sans-serif;
    font-weight: 100;
}
body h1 {
    position: absolute;
    left: 5%;
    top: 5%;
    z-index: 9;
    color: white;
    font-size: 20vmin;
    line-height: 0.75;
    margin: 0;
    text-align: left;
    font-family: 'Francois One', sans-serif;
}
body h1 span {
    -webkit-animation: bobbing 3s ease-in-out infinite alternate;
    animation: bobbing 3s ease-in-out infinite alternate;
    display: inline-block;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
body h1 span:nth-of-type(1) {
    -webkit-animation-delay: -0.66667s;
    animation-delay: -0.66667s;
}
body h1 span:nth-of-type(2) {
    -webkit-animation-delay: -1.33333s;
    animation-delay: -1.33333s;
}
body h1 span:nth-of-type(3) {
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
}
body h1 span:nth-of-type(4) {
    -webkit-animation-delay: -2.66667s;
    animation-delay: -2.66667s;
}
body h1 span:nth-of-type(5) {
    -webkit-animation-delay: -3.33333s;
    animation-delay: -3.33333s;
}
body h1 span:nth-of-type(6) {
    -webkit-animation-delay: -4s;
    animation-delay: -4s;
}
body h1 span:nth-of-type(7) {
    -webkit-animation-delay: -4.66667s;
    animation-delay: -4.66667s;
}
body h1 span:nth-of-type(8) {
    -webkit-animation-delay: -5.33333s;
    animation-delay: -5.33333s;
}
body h1 span:nth-of-type(9) {
    -webkit-animation-delay: -6s;
    animation-delay: -6s;
}
body h1 span:nth-of-type(10) {
    -webkit-animation-delay: -6.66667s;
    animation-delay: -6.66667s;
}
body h1 span:nth-of-type(11) {
    -webkit-animation-delay: -7.33333s;
    animation-delay: -7.33333s;
}
body h1 span:nth-of-type(12) {
    -webkit-animation-delay: -8s;
    animation-delay: -8s;
}
body h1 span:nth-of-type(13) {
    -webkit-animation-delay: -8.66667s;
    animation-delay: -8.66667s;
}
body h1 span:nth-of-type(14) {
    -webkit-animation-delay: -9.33333s;
    animation-delay: -9.33333s;
}
body h1 span:nth-of-type(15) {
    -webkit-animation-delay: -10s;
    animation-delay: -10s;
}
body h1 span:nth-of-type(16) {
    -webkit-animation-delay: -10.66667s;
    animation-delay: -10.66667s;
}
body h1 span:nth-of-type(17) {
    -webkit-animation-delay: -11.33333s;
    animation-delay: -11.33333s;
}
body h1 span:nth-of-type(18) {
    -webkit-animation-delay: -12s;
    animation-delay: -12s;
}
body h1 span:nth-of-type(19) {
    -webkit-animation-delay: -12.66667s;
    animation-delay: -12.66667s;
}
body h1 span:nth-of-type(20) {
    -webkit-animation-delay: -13.33333s;
    animation-delay: -13.33333s;
}
@-webkit-keyframes bobbing {
    0% {
        -webkit-transform: translateY(0px) rotate(5deg);
        transform: translateY(0px) rotate(5deg);
    }
    100% {
        -webkit-transform: translateY(-20px) rotate(-5deg);
        transform: translateY(-20px) rotate(-5deg);
    }
}
@keyframes bobbing {
    0% {
        -webkit-transform: translateY(0px) rotate(5deg);
        transform: translateY(0px) rotate(5deg);
    }
    100% {
        -webkit-transform: translateY(-20px) rotate(-5deg);
        transform: translateY(-20px) rotate(-5deg);
    }
}
body .wrap {
    position: absolute;
    width: 75%;
    height: 75%;
    top: 12.5%;
    left: 12.5%;
    background: #273276;
    overflow: hidden;
    box-shadow: 0 50px 50px -40px #273276;
}
body .wrap:nth-of-type(3) {
    -webkit-transform: scaleY(-1) scaleX(-1);
    transform: scaleY(-1) scaleX(-1);
    background: transparent;
}
body .wrap:nth-of-type(3) div {
    background-size: 700px;
    opacity: 0.25;
}
body .wrap:nth-of-type(2) {
    background: transparent;
}
body .wrap:nth-of-type(2) .shark {
    width: 500px;
    height: 200px;
    position: absolute;
    left: calc(50% - 250px);
    top: calc(50% - 100px);
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
body .wrap:nth-of-type(2) .shark:before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: -webkit-radial-gradient(center, ellipse, #273276, rgba(0, 0, 0, 0) 75%);
    background: radial-gradient(ellipse at center, #273276, rgba(0, 0, 0, 0) 75%);
    border-radius: 100%;
}
body .wrap:nth-of-type(2) .shark .front {
    width: 400px;
    height: 250px;
    background: url("https://puu.sh/y0xtw/b40c749d20.svg");
    background-size: 525px;
    background-position: right center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
}
body .wrap:nth-of-type(2) .shark .tail {
    position: absolute;
    top: 0;
    left: 0;
    height: 250px;
    width: 100px;
    background: url("/uploads/1801/shark.svg");
    background-size: 525px;
    background-position: left center;
    background-repeat: no-repeat;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: swim 1s ease-in-out infinite alternate;
    animation: swim 1s ease-in-out infinite alternate;
}
@-webkit-keyframes swim {
    0% {
        -webkit-transform: rotateY(-25deg);
        transform: rotateY(-25deg);
    }
    100% {
        -webkit-transform: rotateY(55deg);
        transform: rotateY(55deg);
    }
}
@keyframes swim {
    0% {
        -webkit-transform: rotateY(-25deg);
        transform: rotateY(-25deg);
    }
    100% {
        -webkit-transform: rotateY(55deg);
        transform: rotateY(55deg);
    }
}
body .cluster {
    width: 125%;
    position: absolute;
    height: 125%;
    background-size: contain;
    left: -12.5%;
    top: -12.5%;
}
body .cluster.one {
    background-image: url("/uploads/1801/cluster1.svg");
}
body .cluster.two {
    background-image: url("/uploads/1801/cluster2.svg");
}
body .cluster.three {
    background-image: url("/uploads/1801/cluster3.svg");
}
body .cluster.four {
    background-image: url("/uploads/1801/cluster4.svg");
}
body .cluster.five {
    background-image: url("/uploads/1801/cluster5.svg");
}

HTML

使用海洋垃圾碎片拼成的鲨鱼摆尾动画。很有创意的概念作品！

h5, svg, fish

编辑器支持Emmet

快捷键

使用海洋垃圾碎片拼成的鲨鱼摆尾动画。很有创意的概念作品！

h5, svg, fish

HTML5 GSAP 在手机上展示地图位置的动画效果

HTML5商品幻灯片右上角详情菜单盒子展开动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：