liang14658fox

Appearance

透明度渐变特效 ​

css
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 0.5s;
    animation-name: fade;
    animation-duration: 0.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 0.5s;
    animation-name: fade;
    animation-duration: 0.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

设置一个红色方块从左边移动到右边 ​

css
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: mymove;
    animation-duration: 5s;
    /* Safari and Chrome */
    -webkit-animation-name: mymove;
    -webkit-animation-duration: 5s;
}

@keyframes mymove {
    from {
        left: 0px;
    }

    to {
        left: 200px;
    }
}

@-webkit-keyframes mymove

/* Safari and Chrome */
    {
    from {
        left: 0px;
    }

    to {
        left: 200px;
    }
}
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation-name: mymove;
    animation-duration: 5s;
    /* Safari and Chrome */
    -webkit-animation-name: mymove;
    -webkit-animation-duration: 5s;
}

@keyframes mymove {
    from {
        left: 0px;
    }

    to {
        left: 200px;
    }
}

@-webkit-keyframes mymove

/* Safari and Chrome */
    {
    from {
        left: 0px;
    }

    to {
        left: 200px;
    }
}

插件 ​

Swiper 现在已经更新到 Swiper 6，是一款完成度高、稳定且生态完善的 js 插件，在官网大量的 demo 下，不仅可以满足常见的banner焦点图、菜单和侧滑等常规需求，也能轻松应对 3D 旋转、视差切换等酷炫切换特效，像腾讯、阿里、字节跳动等很多耳熟能详的大厂都在使用。

https://www.swiper.com.cn/