旋转条形特效(发廊特效)

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了旋转条形特效(发廊特效)相关的知识，希望对你有一定的参考价值。

技术分享

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
*{
    margin:0;
    padding:0;
}
    ul,li{
        list-style: none;
        margin:0;
        padding:0;
    }
    html,body,ul{
        width: 100%;
        height: 100%;
        background: skyblue;
        position: relative;    
    }
    ul{
        display: flex;
        justify-content: flex-start;
    }
    /*控制li标签*/

    ul>li:nth-child(1){        
        /*background: red;*/
        width: 300px;
        height: 40px;
        left:500px;
        top:300px;
        background: white;
        overflow: hidden;
        position: relative;

    }
    /*控制div*/

    ul>li:nth-child(1) div{        
        width: 30px;
        height: 60px;
        background: black;
        position: absolute;
        transform: skewX(-45deg);
        left: 360px;
        /*transform-origin: center top;*/
    }

    /*第四部分*/
    ul>li:nth-child(1) div:nth-child(1){
        /*left:360px;*/    
        animation: move 4.8s 0s linear infinite;
    }
    ul>li:nth-child(1) div:nth-child(2){
        /*left: 120px;*/
        animation: move 4.8s 0.8s linear infinite;
    }
    ul>li:nth-child(1) div:nth-child(3){
        /*left: 180px;*/
        animation: move 4.8s 1.6s linear infinite;
    }
    ul>li:nth-child(1) div:nth-child(4){
        /*left: 240px;*/
        animation: move 4.8s 2.4s linear infinite;
    }
    ul>li:nth-child(1) div:nth-child(5){
        /*left: 300px;*/
        animation: move 4.8s 3.2s linear infinite;
    }
    ul>li:nth-child(1) div:nth-child(6){
        /*left: 360px;*/
        animation: move 4.8s 4.0s linear infinite;
    }
    @keyframes move{
        from{}to{
            left: -100px;
        }
    }
</style>
<body>
    <ul>
        <li>
            <div></div>
            <div></div>
            <div></div>
            <div></div>    
            <div></div>
            <div></div>    

        </li>
    </ul>
</body>
</html>

 

以上是关于旋转条形特效(发廊特效)的主要内容，如果未能解决你的问题，请参考以下文章

Javascript学习记录——原生JS实现旋转木马特效

HTML特效，旋转的正方体

HTML特效，旋转的正方体

HTML 3D旋转特效,前端开发常用javascript特效_3D旋转

前端每日实战：2.纯 CSS 创作一个矩形旋转 loader 特效

每天一个JavaScript小特效——会魔法的旋转魔方相册