CSS3 柱状体的波型动画

wave? is the blur to much?

CSS3

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html body {
    background-color: #404040;
}
.ldr {
    margin: 75px auto;
    width: 50vw;
    height: 50px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    prespective: -1000px;
}
.l {
    position: relative;
    height: 45px;
    width: 5px;
    background-color: rgba(154, 205, 50, 0.6);
    margin-right: 2px;
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate-reverse;
    animation-direction: alternate-reverse;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running;
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms;
}
.l:after {
    content: '';
    height: 50px;
    width: 5px;
    background: rgba(154, 205, 50, 0.4);
    position: absolute;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.4);
}
.l:nth-child(1) {
    -webkit-animation-delay: 100ms;
    animation-delay: 100ms;
}
.l:nth-child(2) {
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms;
}
.l:nth-child(3) {
    -webkit-animation-delay: 300ms;
    animation-delay: 300ms;
}
.l:nth-child(4) {
    -webkit-animation-delay: 400ms;
    animation-delay: 400ms;
}
.l:nth-child(5) {
    -webkit-animation-delay: 500ms;
    animation-delay: 500ms;
}
.l:nth-child(6) {
    -webkit-animation-delay: 600ms;
    animation-delay: 600ms;
}
.l:nth-child(7) {
    -webkit-animation-delay: 700ms;
    animation-delay: 700ms;
}
.l:nth-child(8) {
    -webkit-animation-delay: 800ms;
    animation-delay: 800ms;
}
.l:nth-child(9) {
    -webkit-animation-delay: 900ms;
    animation-delay: 900ms;
}
.l:nth-child(10) {
    -webkit-animation-delay: 1000ms;
    animation-delay: 1000ms;
}
.l:nth-child(11) {
    -webkit-animation-delay: 1100ms;
    animation-delay: 1100ms;
}
.l:nth-child(12) {
    -webkit-animation-delay: 1200ms;
    animation-delay: 1200ms;
}
.l:nth-child(13) {
    -webkit-animation-delay: 1300ms;
    animation-delay: 1300ms;
}
.l:nth-child(14) {
    -webkit-animation-delay: 1400ms;
    animation-delay: 1400ms;
}
.l:nth-child(15) {
    -webkit-animation-delay: 1500ms;
    animation-delay: 1500ms;
}
.l:nth-child(16) {
    -webkit-animation-delay: 1600ms;
    animation-delay: 1600ms;
}
.l:nth-child(17) {
    -webkit-animation-delay: 1700ms;
    animation-delay: 1700ms;
}
.l:nth-child(18) {
    -webkit-animation-delay: 1800ms;
    animation-delay: 1800ms;
}
.l:nth-child(19) {
    -webkit-animation-delay: 1900ms;
    animation-delay: 1900ms;
}
.l:nth-child(20) {
    -webkit-animation-delay: 2000ms;
    animation-delay: 2000ms;
}
.l:nth-child(21) {
    -webkit-animation-delay: 2100ms;
    animation-delay: 2100ms;
}
.l:nth-child(22) {
    -webkit-animation-delay: 2200ms;
    animation-delay: 2200ms;
}
.l:nth-child(23) {
    -webkit-animation-delay: 2300ms;
    animation-delay: 2300ms;
}
.l:nth-child(24) {
    -webkit-animation-delay: 2400ms;
    animation-delay: 2400ms;
}
.l:nth-child(25) {
    -webkit-animation-delay: 2500ms;
    animation-delay: 2500ms;
}
@-webkit-keyframes bounce {
    0% {
        top: 10px;
        /*transform: rotateX(90deg);*/
    }
    100% {
        top: -10px;
        /*transform: rotateY(45deg); */
        
        -webkit-filter: blur(1px);
        filter: blur(1px);
    }
}
@keyframes bounce {
    0% {
        top: 10px;
        /*transform: rotateX(90deg);*/
    }
    100% {
        top: -10px;
        /*transform: rotateY(45deg); */
        
        -webkit-filter: blur(1px);
        filter: blur(1px);
    }
}

HTML

wave? is the blur to much?

CSS3

编辑器支持Emmet

快捷键

wave? is the blur to much?

CSS3

CSS3 立方体组成的波形动画

CSS3 带波浪动画背景的按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：