【后端学前端】第四天 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属性
  • 指定效果的持续时间。

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/252320.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java基础语法之抽象类和接口

抽象类 什么是抽象类 并不是所有的类都是用来描述对象的&#xff0c;这样的类就是抽象类 例如&#xff0c;矩形&#xff0c;三角形都是图形&#xff0c;但图形类无法去描述具体图形&#xff0c;所以它的draw方法无法具体实现&#xff0c;这个方法就可以没设计成抽象方法&…

【漏洞复现】Node.js 目录穿越漏洞(CVE-2017-14849)

文章目录 1.1、漏洞描述1.2、影响版本1.3、漏洞复现1、基础环境2、漏洞验证3、漏洞分析 1.4、参考 1.1、漏洞描述 原因是 Node.js 8.5.0 对目录进行normalize操作时出现了逻辑错误&#xff0c;导致向上层跳跃的时候&#xff08;如../../../../../../etc/passwd&#xff09;&am…

闲人闲谈PS之四十九——PLM和SAP集成常见的问题

惯例闲话&#xff1a;天气突变&#xff0c;没想到珠三角也骤降了10几度&#xff0c;昨晚还吹风扇模式&#xff0c;早上起来一下子感觉丝丝凉意。闲人还是喜欢冬天&#xff0c;冷&#xff0c;能让人思维清晰&#xff0c;提高工作效率。趁着天气适宜&#xff0c;赶紧加班擦屁股去…

关于pycharm无法进入base界面的问题

问题&#xff1a;terminal输入activate无法进入base 解决方案 1.Cortana这边找到Anaconda Prompt右击进入文件所在位置 2. 右击进入属性 3. 复制cmd.exe开始到最后的路径 cmd.exe "/K" C:\ProgramData\anaconda3\Scripts\activate.bat C:\ProgramData\anaconda3 …

Python语言学习笔记之八(文件IO)

本课程对于有其它语言基础的开发人员可以参考和学习&#xff0c;同时也是记录下来&#xff0c;为个人学习使用&#xff0c;文档中有此不当之处&#xff0c;请谅解。 1、什么是文件I/O 在Python中&#xff0c;文件IO&#xff08;输人/输出)是指与文件进行交互的过程。这包括读…

JMESPath语言

JMESPath&#xff08;JSON Matching Expression Path&#xff09; 一种查询语言。 主要用于从JSON文档中检索和过滤数据。 通过写表达式提取和处理JSON数据&#xff0c;而无需编写复杂的代码。 功能&#xff1a;数据提取、过滤、转换、排序。 场景&#xff1a;处理API响应…

【谭浩强C程序设计精讲 1】数据类型、常量与变量

文章目录 3.1 C 的数据类型3.2 常量与变量3.2.1 常量和符号常量3.2.2 变量 3.1 C 的数据类型 C语言的数据结构是以数据类型形式出现的。C的数据类型如下&#xff1a; C语言中数据有常量与变量之分&#xff0c;它们分别属于以上这些类型。由以上这些数据类型还可以构成更复杂…

三分钟搞定 || java邮件发送(支持附件,多发)

1.添加Maven依赖 <dependency><groupId>com.sun.mail</groupId><artifactId>javax.mail</artifactId><version>1.6.2</version> </dependency><dependency><groupId>cn.hutool</groupId><artifactId>…

图书管理系统jsp + servlet+mysql

图书管理系统 项目使用jsp servletmysql实现&#xff1b; 登陆注册 首页 首页显示图书信息 图书管理 1添加书籍 2查询书籍 3预览书籍 4修改书籍 用户管理 1查询用户 2修改用户 3 删除用户 链接&#xff1a;https://pan.baidu.com/s/1QXK--ypb6OadbmKFlc0jUQ

跨域的解决方式(java后端)

文章目录 一、跨域介绍1、什么是跨域2、为什么会产生跨域3、禁止跨域的原因 二、简单请求和非简单请求1、简单请求1.1、什么时简单请求1.2、简单请求基础流程 2、非简单请求2.1、预检请求2.2、预检请求的回应2.3、浏览器的正常请求和回应 3、自定义跨域过滤器 三、解决方式1、C…

2023年【G2电站锅炉司炉】考试题库及G2电站锅炉司炉考试报名

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 G2电站锅炉司炉考试题库参考答案及G2电站锅炉司炉考试试题解析是安全生产模拟考试一点通题库老师及G2电站锅炉司炉操作证已考过的学员汇总&#xff0c;相对有效帮助G2电站锅炉司炉考试报名学员顺利通过考试。 1、【多…

【Java】智慧工地系统:让建筑行业管理更简单

概述 智慧工地管理平台面向房建、能源、交通各类工地的管理者&#xff0c;通过AI视频、物联感知技术对工地场景中的施工机械、建筑材料、施工规范、施工环境监管、完善施工现场项目管控。实现项目管控、特种设备管理、绿色施工、工地巡检等业务功能&#xff0c;沉淀工地监管数…

IDEA报错处理

问题1 IDEA 新建 Maven 项目没有文件结构 pom 文件为空 将JDK换成1.8后解决。 网络说法&#xff1a;别用 java18&#xff0c;换成 java17 或者 java1.8 都可以&#xff0c;因为 java18 不是 LTS 版本&#xff0c;有着各种各样的问题。。

Web(8)sqlmap工具使用

Sqlmap工具的使用&#xff1a; 首先配置Python环境变量 为什么需要环境变量&#xff1f; 感觉是在cmd中添加了一个快捷方式&#xff0c;使得可以认识 比如path&#xff0c;是告诉系统&#xff0c;当要求系统运行的程序没有告诉程序所在完整路径时&#xff0c;系统除了在当前…

C#浅拷贝和深拷贝数据

目录 一、浅拷贝 二、深拷贝 一、浅拷贝 就是把原来的数据&#xff0c;复制一份&#xff0c;但是2份数据是共享地址的&#xff0c;修改第一份数据或者修改第二份数据&#xff0c;都会一起改变&#xff0c;这可能不是我们程序中需要的场景。 下面我们演示一下&#xff0c;首…

时序预测 | Python实现GRU电力需求预测

时序预测 | Python实现GRU电力需求预测 目录 时序预测 | Python实现GRU电力需求预测预测效果基本描述程序设计参考资料预测效果 基本描述 该数据集因其每小时的用电量数据以及 TSO 对消耗和定价的相应预测而值得注意,从而可以将预期预测与当前最先进的行业预测进行比较。使用该…

MySql的增、删、改、查(MySql数据库学习——五)

增&#xff08;数据添加/插入数据&#xff09; 使用 INSERT INTO SQL 语句来插入数据。我们可以通过 mysql> 命令提示窗口中向数据表中插入数据&#xff0c;或者 通过PHP 脚本来插入数据。 sql语句&#xff1a; INSERT INTO table_name ( field1, field2,...fieldN ) …

暂退法(丢弃法)

在深度学习中&#xff0c;丢弃法&#xff08;Dropout&#xff09;是一种常用的正则化技术&#xff0c;旨在减少模型的过拟合现象&#xff0c;可能会比之前的权重衰减(Weight Decay)效果更好。通过在训练过程中随机丢弃一部分神经元&#xff0c;可以有效地减少神经网络中的参数依…

【华为数据之道学习笔记】5-4 数据入湖方式

数据入湖遵循华为信息架构&#xff0c;以逻辑数据实体为粒度入湖&#xff0c;逻辑数据实体在首次入湖时应该考虑信息的完整性。原则上&#xff0c;一个逻辑数据实体的所有属性应该一次性进湖&#xff0c;避免一个逻辑实体多次入湖&#xff0c;增加入湖工作量。 数据入湖的方式…

如何从 iPhone 上恢复已删除的照片教程分享

您是否错误地删除了 iPhone 上的错误照片&#xff1f;或者您可能已将手机恢复出厂设置&#xff0c;但现在所有照片都消失了&#xff1f;如果您现在遇到这样的情况&#xff0c;我们可以为您提供解决方案。 在本文中&#xff0c;我们将向您展示七种数据恢复方法&#xff0c;可以…