先上css代码:
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{
content: ".";//生成内容作为最后一个元素,至于content里面是点还是其他都是可以的。
height: 0;//避免生成内容破坏原有布局的高度。
visibility: hidden;//使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互。
display: block; //使生成的元素以块级元素显示,占满剩余空间。
clear: both;
}
要在IE下触发 hasLayout 还需要多设置一个属性: zoom:1。
这个原理就是给父元素设置类名,css样式里用after伪元素在浮动后的子元素添加。
这样做的好处喃?我也是在网上看的,大神都说:“结构和语义化完全正确,代码量居中”
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>