本文主要是介绍【后端学前端】第四天 css动画 垂直轮播效果（css变量、位移缩放动画、动画延迟），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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属性
- 指定效果的持续时间。
属性变化放在 常规状态会有来回的感觉
这篇关于【后端学前端】第四天 css动画 垂直轮播效果（css变量、位移缩放动画、动画延迟）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
