新件一个文件夹将下面的两个文件复制并建立文件 .html 和 css
这里要注意的是css文件里的鼠标触发事件
.text:hover, .box:hover{ animation: flipH 1s linear; }
动画调用可以调用下面两个动画翻转flipH/和flipV
也可以根据自己的需要按照这种模式设计
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="text">鼠标触及翻转动画效果</div>
<div class="box">上 下</div>
</div>
</body>
</html>
style.css
body{
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
perspective: 500px;
}
.text{
font-size: 60px;
font-weight: 900;
cursor: pointer;
}
.box{
width: 500px;
height: 400px;
background-color: springgreen;
margin: 60px auto;
font-size: 60px;
font-weight: 900;
cursor: pointer;
}
.text:hover{
animation: flipH 1s linear;
}
.box:hover{
animation: flipV 1s linear;
}
@keyframes flipV{
50%{
transform: rotateX(180deg);
}
to{
transform: rotateX(360deg);
}
}
@keyframes flipH{
50%{
transform: rotateY(180deg);
}
to{
transform: rotateY(360deg);
}
}
点赞 评论 转发就是对up的最大支持和鼓励, 非常谢谢!