CSS3腾讯荣耀游戏风云榜
2021年06月18日
548
animation 属性是一个简写属性，用于设置六个动画属性：
语法：
animation: name duration timing-function delay iteration-count direction;
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
rotateY，沿着Y轴的3D旋转。rotateY() 函数定义了一个转换，它可以让一个元素围绕纵坐标(垂直轴)旋转，而不会对其进行变形。
参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/rotateY()
本案例涉及到的html标签，如下所示：
html：
<!-- div.nav>div.box.box1*4>a>div.border.b1>img --> <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>
css：
<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%;
}
/* 给4个盒子设置宽度 各是25%，并让其并排存在 */
.box{
width: 25%;
float: left;
/* outline: 1px dashed green; */
transform: translateY(300px);
/* 动画 */
animation: moveUp 0.8s ease-out forwards;
}
.box a{
/* 将 行元素 转成 块元素 */
display: block;
}
/* 包裹图片的外层的盒子 设置样式 */
.border{
width: 60%;
margin: 0 auto;
text-align: center;
border: 2px 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;
}
/* 我在哪里显示 */
.border::before{
top: 0;
left: 0;
}
/* 你在哪里显示 */
.border::after{
/* top: 0;
right: 0; */
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;}
.box1{
animation-delay: 0s;
}
.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>刷新页面的时候，4个盒子，出现的先后顺序如下所示：
这是因为在4个盒子身上设置了css3的动画延迟时间，css样式规则设置如下所示：
.box1{
animation-delay: 0s;
}
.box2{
animation-delay: 0.2s;
}
.box3{
animation-delay: 0.4s;
}
.box4{
animation-delay: 0.6s;
}鼠标移入到某个盒子上，盒子会沿着Y轴旋转1周（360度），涉及的js脚本，如下所示：
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
// 鼠标移入
$('.box').mouseenter(function(){
$(this).find('.border').addClass('rotateY')
})
// 鼠标移出
$('.box').mouseleave(function(){
$(this).find('.border').removeClass('rotateY')
})
})
</script>预览：
