1、学习信息
视频地址：css动画 垂直轮播效果（css变量、位移缩放动画、动画延迟）_哔哩哔哩_bilibili
2、源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4156699_i9rfozb6ac.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(200deg, #fda09b, #918ef9);
}
.container {
width: 500px;
height: 300px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 430px;
height: 100px;
padding: 0 20px;
border-radius: 100px 20px 20px 100px;
background-color: #ffffff;;
position: absolute;
opacity: 0;
animation: animate 10s linear infinite;
animation-delay: calc(2s * var(--d));
display: flex;
justify-content: center;
align-items: center;
}
.card .img {
width: 90px;
height: 90px;
position: absolute;
left: 0;
top: 0;
background-color: #ffffff;
padding: 5px;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.card .img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.card .content {
display: flex;
align-items: center;
}
/*.card .detail {*/
/* margin-left: 50px;*/
/*}*/
.card .detail span {
display: block;
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
.card a {
font-size: 14px;
text-decoration: none;
background: linear-gradient(to bottom, #fbc5ed, #a6c1ee);
padding: 7px 18px;
color: #ffffff;
border-radius: 25px;
margin-left: 30px;
}
@keyframes animate {
0% {
opacity: 1;
transform: translateY(100%) scale(0.5);
}
5%, 20% {
opacity: 0.4;
transform: translateY(100%) scale(0.7);
}
25%, 40% {
opacity: 1;
transform: translateY(0%) scale(1);
}
45%, 60% {
opacity: 0.4;
transform: translateY(-100%) scale(0.7);
}
65%, 100% {
opacity: 0;
transform: translateY(-100%) scale(0.5);
}
}
.container:hover .card{
animation-play-state: paused;
}
</style>
<script>
window.onload = () => {
let searchIcon = document.querySelector(".icon")
let clearIcon = document.querySelector(".clear")
let searchBar = document.querySelector(".searchBar")
let inp = document.querySelector(".inp")
searchIcon.addEventListener("click", () => {
searchBar.classList.toggle("changeWidth")
})
clearIcon.addEventListener("click", () => {
inp.value = ""
})
}
</script>
</head>
<body>
<div class="container">
<div class="card" style="--d:-1;">
<div class="content">
<div class="img"><img src="1.png"></div>
<div class="detail">
<span>王婉儿（Anna）</span>
<p>寻找真爱的微笑使者。</p>
</div>
</div>
<a href="#">关注</a>
</div>
<div class="card" style="--d:0;">
<div class="content">
<div class="img"><img src="1.png"></div>
<div class="detail">
<span>王婉儿（Anna）</span>
<p>寻找真爱的微笑使者。</p>
</div>
</div>
<a href="#">关注</a>
</div>
<div class="card" style="--d:1;">
<div class="content">
<div class="img"><img src="1.png"></div>
<div class="detail">
<span>王婉儿（Anna）</span>
<p>寻找真爱的微笑使者。</p>
</div>
</div>
<a href="#">关注</a>
</div>
<div class="card" style="--d:2;">
<div class="content">
<div class="img"><img src="1.png"></div>
<div class="detail">
<span>王婉儿（Anna）</span>
<p>寻找真爱的微笑使者。</p>
</div>
</div>
<a href="#">关注</a>
</div>
<div class="card" style="--d:-3;">
<div class="content">
<div class="img"><img src="1.png"></div>
<div class="detail">
<span>王婉儿（Anna）</span>
<p>寻找真爱的微笑使者。</p>
</div>
</div>
<a href="#">关注</a>
</div>
</div>
<div class="register"></div>
</body>
</html>
3、 块级元素和行级元素
常用的内联元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> （块引用）、<form>常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使div元素具有内联元素特点。
行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。
块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。
4、关于过度
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
属性变化放在 常规状态会有来回的感觉