【后端学前端】第四天 css动画 垂直轮播效果（css变量、位移缩放动画、动画延迟）

2023-12-14 17:13:42

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属性
  • 指定效果的持续时间。

属性变化放在 常规状态会有来回的感觉

?

文章来源:https://blog.csdn.net/perfect2011/article/details/134997200
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。