CSS3用双色线条模拟的正弦波动画

css3, wave, sin, cos

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.wrapper {
    width: 500px;
    height: 250px;
    position: relative;
    left: calc(50% - 250px);
    top: calc(50vh - 125px);
    overflow: hidden;
}
.wrapper .sine-wrapper {
    position: absolute;
    width: 6px;
    height: calc(100% - 4px);
    animation: sine-animation 5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate;
}
.wrapper .sine-wrapper .sine-inner-wrapper {
    position: absolute;
    width: 100%;
    height: calc(100% - 10px);
}
.wrapper .sine-top,
.wrapper .sine-bottom {
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    top: 2px;
    border-radius: 100px;
}
.wrapper .sine-top {
    background-color: #1400FF;
}
.wrapper .sine-bottom {
    transform: translate3d(0, 270px, 0);
    background-color: #FF0000;
}
.wrapper .sine-wrapper:nth-of-type(1) {
    left: 25px;
    animation-delay: 0.7s;
}
.wrapper .sine-wrapper:nth-of-type(2) {
    left: 50px;
    animation-delay: 1.4s;
}
.wrapper .sine-wrapper:nth-of-type(3) {
    left: 75px;
    animation-delay: 2.1s;
}
.wrapper .sine-wrapper:nth-of-type(4) {
    left: 100px;
    animation-delay: 2.8s;
}
.wrapper .sine-wrapper:nth-of-type(5) {
    left: 125px;
    animation-delay: 3.5s;
}
.wrapper .sine-wrapper:nth-of-type(6) {
    left: 150px;
    animation-delay: 4.2s;
}
.wrapper .sine-wrapper:nth-of-type(7) {
    left: 175px;
    animation-delay: 4.9s;
}
.wrapper .sine-wrapper:nth-of-type(8) {
    left: 200px;
    animation-delay: 5.6s;
}
.wrapper .sine-wrapper:nth-of-type(9) {
    left: 225px;
    animation-delay: 6.3s;
}
.wrapper .sine-wrapper:nth-of-type(10) {
    left: 250px;
    animation-delay: 7s;
}
.wrapper .sine-wrapper:nth-of-type(11) {
    left: 275px;
    animation-delay: 7.7s;
}
.wrapper .sine-wrapper:nth-of-type(12) {
    left: 300px;
    animation-delay: 8.4s;
}
.wrapper .sine-wrapper:nth-of-type(13) {
    left: 325px;
    animation-delay: 9.1s;
}
.wrapper .sine-wrapper:nth-of-type(14) {
    left: 350px;
    animation-delay: 9.8s;
}
.wrapper .sine-wrapper:nth-of-type(15) {
    left: 375px;
    animation-delay: 10.5s;
}
.wrapper .sine-wrapper:nth-of-type(16) {
    left: 400px;
    animation-delay: 11.2s;
}
.wrapper .sine-wrapper:nth-of-type(17) {
    left: 425px;
    animation-delay: 11.9s;
}
.wrapper .sine-wrapper:nth-of-type(18) {
    left: 450px;
    animation-delay: 12.6s;
}
.wrapper .sine-wrapper:nth-of-type(19) {
    left: 475px;
    animation-delay: 13.3s;
}
.wrapper .sine-wrapper:nth-of-type(20) {
    left: 500px;
    animation-delay: 14s;
}
@keyframes sine-animation {
    from {
        transform: translate3d(0, 0%, 0);
    }
    to {
        transform: translate3d(0, -90%, 0);
    }
}

HTML

css3, wave, sin, cos

编辑器支持Emmet

快捷键

css3, wave, sin, cos

使用CSS3构建的云端数据传输模拟三维动画

CSS3+JS 模拟键盘敲打效果的动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：