码迷,mamicode.com
首页 > Web开发 > 详细

css3 滑动效果 门

时间:2020-01-16 17:24:21      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:自定义   lag   class   width   code   for   har   function   oct   

技术图片技术图片

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画自定义效果</title>
<style>
 
*{
    padding: 0;
    margin: 0;
}
html, body{
    width: 100%;
}
.dongH_1{
    height: 300px;
    width: 100%;
    background: #75cef8;
    overflow: hidden;
}
.dongH_1 ul{
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
    height: 100%;
    position: relative;
}
.dongH_1 ul>li{
    height: 100%;
    position: absolute;

}
.dongH_1 ul>li.letf_One{
    width: 32%;
    left: 0;
    background: red;
}
.dongH_1 ul>li.middel_One{
    width: 36%;
    left: 33%;
    background: yellow;
    box-sizing: border-box;
}

.dongH_1 ul>li.right_One{
    width: 32%;
    left: 70%;
    background: blue;
}
.active_letf_One{
    position: absolute;
    animation: animationOne 2s forwards;
}
.active_middel_One{
    animation: animationTwo 2s forwards;
    width: 98%;
}
.active_right_One{
    animation: animationTne 2s forwards;
}
@keyframes animationOne{
    0%{left: 0;}
    100%{left: -32%;}
}
@keyframes animationTwo{
    0%{width:36%;left: 33%;}
    100%{width:100%;left: 0%;}
}
@keyframes animationTne{
    0%{left: 70%;}
    100%{left: 100%;}
}



.noactive_letf_One{
    position: absolute;
    animation: animationOneOn 2s forwards;
}
.noactive_middel_One{
    animation: animationTwoOn 2s forwards;
    width: 98%;
}
.noactive_right_One{
    animation: animationTneOn 2s forwards;
}
@keyframes animationOneOn{
    0%{left: -32%;}
    100%{left: 0;}
}
@keyframes animationTwoOn{
    0%{width:100%;left:0;}
    100%{width:36%;left: 33%;}
}
@keyframes animationTneOn{
    0%{left: 100%;}
    100%{left: 70%;}
}
</style>
</head>
<body style="width: 100%;">
    <div class="dongH_1">
        <ul>
            <li class=‘letf_One‘>
                <div>测试!测试。。。。。。</div>
                <table style="width: 100%;">
                    <tr>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                    </tr>
                    <tr>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                    </tr>
                    <tr>
                        <td>1111111</td>
                        <td>1111111</td>
                        <td>1111111</td>
                    </tr>
                </table>
            </li>
            <li class="middel_One">
                <div class="middel_cont">
                    <button onclick=‘animation()‘>点击切换</button>
                </div>
            </li>
            <li class="right_One">3333</li>
        </ul>
    </div>
    <script>
         var flag = true
        function animation(){
            var leftone = document.getElementsByClassName(‘letf_One‘)[0]
            var middelone = document.getElementsByClassName(‘middel_One‘)[0]
            var rightone = document.getElementsByClassName(‘right_One‘)[0]
            if(flag){
                flag = false;
                leftone.classList.add("active_letf_One")
                middelone.classList.add("active_middel_One")
                rightone.classList.add("active_right_One")
                leftone.classList.remove("noactive_letf_One")
                middelone.classList.remove("noactive_middel_One")
                rightone.classList.remove("noactive_right_One")
            }else{
                flag = true;
                leftone.classList.remove("active_letf_One")
                middelone.classList.remove("active_middel_One")
                rightone.classList.remove("active_right_One")
                leftone.classList.add("noactive_letf_One")
                middelone.classList.add("noactive_middel_One")
                rightone.classList.add("noactive_right_One")
            }
        }
    </script>
</body>
</html>

css3 滑动效果 门

标签:自定义   lag   class   width   code   for   har   function   oct   

原文地址:https://www.cnblogs.com/lihong-123/p/12202282.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!