CSS3腾讯荣耀游戏风云榜
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
html,body{
width: 100%;
height: 100%;
}
body{
min-height: 100vh;
background-color: #00002F;
background-image: url(./img/cbg.png);
background-repeat: no-repeat;
background-position: center top;
background-size: 100% auto;
}
.nav{
width: 900px;
/* 水平居中 */
margin: 0 auto;
position: relative;
top: 70%;
}
/* 给四个盒子设置宽度，各为25%，并让其并排存在 */
.box{
width: 25%;
float: left;
animation: moveUp 0.8s ease-out forwards;
transform: translateY(300px);
}
.box a{
display: block;
}
.border{
width: 60%;
margin: 0 auto;
text-align: center;
border: 3px solid #c32a52;
/* 去除顶部边框线 */
border-top: none;
/* 让里面图片不贴着下边框显示 */
padding-bottom: 10%;
position: relative;
}
.border img{
/* 缩放到自身的45%显示 */
width: 45%;
}
/* 通过:before :after伪类绘制图形，并加上定位点，在指定位置上显示 */
/* :before css2写法
::before css3写法
*/
.border::before,.border::after{
content: '';
width: 20.43%;
height: 3px;
background-color: #c32a52;
position: absolute;
width: 20.43%;
height: 3px;
left: 0;
top: 0;
}
.border::before{
top: 0;
left: 0;
}
.border::after{
right: 0;
left: auto;
}
.b2{border-color:#F9EC00}
.b3{border-color:#E95413}
.b4{border-color:#038BD2}
.box2 .border::before,.box2 .border::after{
background-color: #F9EC00;
}
.box3 .border::before,.box3 .border::after{
background-color: #E95413;
}
.box4 .border::before,.box4 .border::after{
background-color: #038BD2;
}
.box2{
animation-delay: 0.2s;
}
.box3{
animation-delay: 0.4s;
}
.box4{
animation-delay: 0.6s;
}
.rotateY{
transition: all 1s ease-out;
transform: rotateY(360deg);
}
@keyframes moveUp{
0%{
transform: translateY(300px);
}
100%{
transform: translateY(0);
}
}
</style>
<script>
$(function(){
$(".box").mouseenter(function(){//鼠标移入
$(this).find(".border").addClass("rotateY");
})
$(".box").mouseleave(function(){/*鼠标移出*/
$(this).find(".border").removeClass("rotateY");
})
})
</script>
</head>
<body>
<div class="nav">
<div class="box box1">
<a href="">
<div class="border b1"><img src="./img/n1.png" alt=""></div>
</a>
</div>
<div class="box box2">
<a href="">
<div class="border b2"><img src="./img/n2.png" alt=""></div>
</a>
</div>
<div class="box box3">
<a href="">
<div class="border b3"><img src="./img/n3.png" alt=""></div>
</a>
</div>
<div class="box box4">
<a href="">
<div class="border b4"><img src="./img/n4.png" alt=""></div>
</a>
</div>
</div>
</body>
n1,n2,n3,n4图片
js代码，鼠标移入，鼠标移出，显示动画效果
<script>
$(function(){
$(".box").mouseenter(function(){//鼠标移入
$(this).find(".border").addClass("rotateY");
})
$(".box").mouseleave(function(){/*鼠标移出*/
$(this).find(".border").removeClass("rotateY");
})
})
</script>
309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
