CSS3加图片实现的雾气弥漫动画特效

很简单的一个雾气效果的实现方法

css3, fog, forest

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
figure {
    margin: 0;
}
.absolute-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    height: 100%;
    width: 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
.fog {
    position: relative;
    height: 100vh;
    width: 100%;
    background-color: #000;
}
.fog__container {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.fog__img {
    position: absolute;
    height: 100vh;
    width: 300vw;
}
.fog__img--first {
    background: url("/uploads/1811/fog-1.png") repeat-x;
    background-size: contain;
    background-position: center;
    -webkit-animation: marquee 60s linear infinite;
    animation: marquee 60s linear infinite;
}
.fog__img--second {
    background: url("/uploads/1811/fog-2.png") repeat-x;
    background-size: contain;
    background-position: center;
    -webkit-animation: marquee 40s linear infinite;
    animation: marquee 40s linear infinite;
}
@-webkit-keyframes marquee {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-200vw, 0, 0);
        transform: translate3d(-200vw, 0, 0);
    }
}
@keyframes marquee {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-200vw, 0, 0);
        transform: translate3d(-200vw, 0, 0);
    }
}
body {
    margin: 0;
}

HTML

很简单的一个雾气效果的实现方法

css3, fog, forest

编辑器支持Emmet

快捷键

很简单的一个雾气效果的实现方法

css3, fog, forest

使用CSS3 transform 3d实现的三维轨道图片分割动画特效

使用纯CSS3实现相片在时光流转中褪色的动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：