JQuery控制CSS3動畫與超方便的清除Float

時間 2019-11-05

標籤 jquery 控制 css3 css 動畫方便清除 float 欄目 JQuery 简体版

原文原文鏈接

先上css代碼：javascript

body,ul,li,a{
    padding: 0 ;
    margin:0;
    font-size: 18px;
    color: white;
    font-weight: 900;
}
.all{
    width: 260px;
    height: 240px;
    margin:100px auto;
}
.clear:after{
    content: ".";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
}
.Css{
    width: 140px;
    height: 140px;
    background: #6bd179;
    float: left;
    text-align: center;
    line-height: 140px;
}
.Node{
    width: 120px;
    height: 70px;
    background: #309ed5;
    float: left;
    text-align: center;
    line-height: 70px;
}
.JQuery{
    width: 120px;
    height: 70px;
    background: #3ebfd5;
    float: left;
    text-align: center;
    line-height: 70px;
}
.Javascript{
    width: 100px;
    height: 100px;
    background: #ebb742;
    float: left;
    text-align: center;
    line-height: 100px;
}
.Html{
    width: 160px;
    height: 100px;
    background: #80e35e;
    float: left;
    text-align: center;
    line-height: 100px;
}
@-webkit-keyframes FZ {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(180deg);
        opacity: 0;
    }
}
@-webkit-keyframes XZ {
    0% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(180deg);
        opacity: 1;
    }
}

.clear:after{css

content: ".";//生成內容做爲最後一個元素，至於content裏面是點仍是其餘都是能夠的。html

height: 0;//避免生成內容破壞原有佈局的高度。java

visibility: hidden;//使生成的內容不可見，並容許可能被生成內容蓋住的內容能夠進行點擊和交互。jquery

display: block; //使生成的元素以塊級元素顯示,佔滿剩餘空間。web

clear: both;佈局

}動畫

要在IE下觸發 hasLayout 還須要多設置一個屬性： zoom：1。this

這個原理就是給父元素設置類名，css樣式裏用after僞元素在浮動後的子元素添加。spa

這樣作的好處喃？我也是在網上看的，大神都說：「結構和語義化徹底正確,代碼量居中」

html：

JQuery控制的CSS3動畫，仍是有些bug，你們把代碼複製下來運行運行就知道了。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="1.css"/>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="all clear">
    <div class="Css">Css</div>
    <div class="Node">Node.js</div>
    <div class="JQuery">JQuery</div>
    <div class="Javascript">Javascript</div>
    <div class="Html">Html</div>
</div>
<script>
    $(function(){
        $(".Css").on({mouseover:function(){
            $(this).css({
                webkitAnimation:"FZ 0.5s linear"
            },setTimeout(function(){
                $(".Css").css({
                    webkitAnimation:"",
                    background:"white",
                    color:"#6bd179"
                });
            },500)
            );
        },mouseout:function(){
            $(this).css({
                webkitAnimation:"",
                background:"#6bd179",
                color:"white"
            });
        }
        });
        $(".Javascript").on({mouseover:function(){
            $(this).css({
                        webkitAnimation:"XZ 0.5s linear"
                    },setTimeout(function(){
                $(".Javascript").css({
                    webkitAnimation:"",
                    background:"white",
                    color:"#ebb742"
                });
            },500));
        },mouseout:function(){
            $(this).css({
                webkitAnimation:"",
                background:"#ebb742",
                color:"white"
            });
        }
        });
        $(".Node").on({mouseover:function(){
            $(this).css({
                webkitAnimation:"FZ 0.5s linear"
            },setTimeout(function(){
                $(".Node").css({
                    webkitAnimation:"",
                    background:"white",
                    color:"#309ed5"
                });
            },500));
        },mouseout:function(){
            $(this).css({
                webkitAnimation:"",
                background:"#309ed5",
                color:"white"
            });
        }
        });
        $(".JQuery").on({mouseover:function(){
            $(this).css({
                webkitAnimation:"XZ 0.5s linear"
            },setTimeout(function(){
                $(".JQuery").css({
                    webkitAnimation:"",
                    background:"white",
                    color:"#3ebfd5"
                });
            },500));
        },mouseout:function(){
            $(this).css({
                webkitAnimation:"",
                background:"#3ebfd5",
                color:"white"
            });
        }
        });
        $(".Html").on({mouseover:function(){
            $(this).css({
                webkitAnimation:"FZ 0.5s linear"
            },setTimeout(function(){
                $(".Html").css({
                    webkitAnimation:"",
                    background:"white",
                    color:"#80e35e"
                });
            },500));
        },mouseout:function(){
            $(this).css({
                webkitAnimation:"",
                background:"#80e35e",
                color:"white"
            });
        }
        });
    });
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。