【全】CSS动画大全之其他【移动盒子显示详情】
效果预览
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="https://www.cnblogs.com/beixuan">
<meta name="version" content="1.0.0">
<meta name="date" content="2021/12/05 14:07:50">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS动画大全之移动盒子显示详情</title>
</head>
<style type="text/css">
/* 设置 body 内、外边距为 0 */
body {
margin: 0;
padding: 0;
background: #27515c;
}
/* 页面容器 */
.page-wrapper {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100%;
justify-items: center;
align-items: center;
position: relative;
}
.content {
position: absolute;
top: 50%;
left: 50%;
width: 18rem;
height: 18rem;
transform: translate(-50%, -50%);
background-color: #FFF;
border-radius: 50%;
display: grid;
justify-items: left;
align-items: center;
box-sizing: border-box;
padding-left: 2rem;
transition: all 0.8s ease;
}
.content:hover {
width: 25rem;
border-radius: 12px;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 1s ease;
}
.content:hover img {
left: 75%;
transform: translateY(-60%) scale(1.9);
}
.text {
width: 100%;
overflow: hidden;
}
.text > p {
font-size: 20px;
letter-spacing: 3px;
color: #00007f;
font-weight: 600;
width: 100%;
transform: translateX(200%);
transition: all 0.6s ease;
}
.text > span {
font-size: 12px;
display: inline-block;
width: 100%;
transform: translateX(200%);
transition: all 0.4s ease;
}
.text > span:nth-child(2) {
transition: all 0.8s ease;
}
.text > span:nth-child(3) {
transition: all 0.9s ease;
}
.text > span:nth-child(4) {
transition: all 1s ease;
}
.text > span:nth-child(5) {
transition: all 1.1s ease;
}
.content:hover .text > span, .content:hover .text > p{
transform: translateX(0%);
opacity: 1;
}
@media screen and (max-width: 800px) {
.content {
position: absolute;
top: 50%;
left: 50%;
width: 18rem;
height: 18rem;
transform: translate(-50%, -50%);
background-color: #FFF;
border-radius: 50%;
display: grid;
justify-items: center;
align-items: start;
box-sizing: border-box;
padding-left: 2rem;
transition: all 0.8s ease;
}
.content:hover {
height: 26rem;
border-radius: 12px;
}
.content:hover img {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0%) scaleX(-1);
transition: all 0.5s ease;
}
}
</style>
<body>
<!-- 页面容器 -->
<div class="page-wrapper">
<div class="content">
<div class="text">
<p> 反恐精英Online </p>
<span> 玩家最喜爱的FPS人气网游,火爆战场真实体验! </span>
<span> [反恐精英OL]神器之下[神器]!12月7日紧急发布 </span>
<span> [反恐精英OL]神器之中[神器]!12月6日紧急发布 </span>
<span> [反恐精英OL]神器之上[神器]!12月5日紧急发布 </span>
</div>
<img src="./cs.png" height="190" />
</div>
</body>
</html>
图片资源
本文要是对您有帮助,顶我一下哦!↓↓↓