WHAT - CSS Animationtion 动画系列（二）

目录

  • 一、循环波浪
  • 二、关键帧呼应
  • 三、关键帧顺接
  • 四、利用 transform-origin 做拉伸
  • 五、大元素可拆分多个小元素联动
  • 六、预留视觉缓冲
  • 七、随机感：动画周期设置
  • 八、抛物线：两个内外div实现x和y向量运动

今天我们主要学习动画实现要素。

一、循环波浪

利用 delay 时间差，导致波浪平滑错位。

可以使用 CSS Animation 和 animation-delay 属性来实现一排蓝色的 div 循环波浪效果。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wave Animation</title>
<style>.wave-container {display: flex;justify-content: space-between;margin-top: 50px;width: 100%;}.wave {width: 50px;height: 50px;background-color: blue;animation: wave 1s linear infinite;}.wave:nth-child(2) {animation-delay: 0.2s;}.wave:nth-child(3) {animation-delay: 0.4s;}.wave:nth-child(4) {animation-delay: 0.6s;}.wave:nth-child(5) {animation-delay: 0.8s;}@keyframes wave {0% {transform: translateY(0);}50% {transform: translateY(-50px);}100% {transform: translateY(0);}}
</style>
</head>
<body><div class="wave-container"><div class="wave"></div><div class="wave"></div><div class="wave"></div><div class="wave"></div><div class="wave"></div></div>
</body>
</html>

在这个示例中，使用了五个蓝色的 div 元素 .wave 来表示波浪效果。通过设置不同的 animation-delay 来创建时间差，从而形成连续的波浪效果。 CSS 动画 wave 定义了元素的缩放动画，使得波浪效果连续播放。

请添加图片描述

二、关键帧呼应

双盒弹跳联动。

请添加图片描述

可以注意到上述非常丝滑的模拟了两个盒子在不同阶段的弹跳效果。

三、关键帧顺接

请添加图片描述

请添加图片描述

四、利用 transform-origin 做拉伸

transform-origin: 48% 100% 从下往上扩展/拉伸；transform-origin: 50% 5% 从上往下扩展/拉伸。

transform-origin 属性用于指定 CSS 变换的原点。默认情况下，变换的原点为元素的中心点 (50% 50%)。通过调整 transform-origin 的值，我们可以改变变换的起始位置，从而实现不同的效果。

  1. transform-origin: 48% 100%;：这个值将变换的原点设置为元素的底部中心。因此，当应用拉伸变换时，元素会从底部向上扩展。具体而言，变换会围绕元素底部边缘的水平中心点进行扩展。

  2. transform-origin: 50% 5%;：这个值将变换的原点设置为元素的顶部中心。因此，当应用拉伸变换时，元素会从顶部向下扩展。具体而言，变换会围绕元素顶部边缘的水平中心点进行扩展。

以下是具体的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stretch Animation</title>
<style>.stretch-container {display: flex;margin-top: 50px;width: 100%;}.stretch {width: 50px;height: 50px;background-color: blue;border-radius: 50%;animation: stretch 1s linear infinite alternate;}.stretch:nth-child(1) {transform-origin: 48% 100%;}.stretch:nth-child(2) {transform-origin: 50% 5%;}@keyframes stretch {0% {transform: scaleY(1);}100% {transform: scaleY(2);}}
</style>
</head>
<body><div class="stretch-container"><div class="stretch"></div><div class="stretch"></div></div>
</body>
</html>

在这个示例中，有两个蓝色的 div 元素 .stretch，通过不同的 transform-origin 值，分别实现了从底部向上拉伸和从顶部向下拉伸的效果。

请添加图片描述
请添加图片描述

五、大元素可拆分多个小元素联动

比如人物举着信封入场，可以信封和手做额外的附属动画，放大动作幅度。

请添加图片描述
图片来源：陈*真@腾讯

六、预留视觉缓冲

动画循环时可以设置 80% - 100% 关键帧之间不变。

预留视觉缓冲的目的是在动画循环的过程中，使得动画的最后一帧保持一段时间，以给用户提供视觉缓冲，使动画更加平滑和自然。在 CSS 中，可以通过设置关键帧动画的某些关键帧保持一段时间来实现预留视觉缓冲。

例如，在动画的 80% 到 100% 之间保持最后一帧的状态，可以让动画在结束阶段缓缓减速，给用户一个更平滑的动画效果。

以下是一个具体的示例，展示了如何在动画的 80% 到 100% 之间保持最后一帧的状态：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation with Visual Buffering</title>
<style>.box {width: 100px;height: 100px;background-color: blue;position: relative;animation: move 2s linear infinite;}@keyframes move {0% {transform: translateX(0);}80% {transform: translateX(200px);}100% {transform: translateX(200px);}}
</style>
</head>
<body><div class="box"></div>
</body>
</html>

在这个示例中，动画从 0% 到 80% 的阶段进行了水平移动，然后在 80% 到 100% 的阶段保持了最后一帧的状态，即元素位于水平方向上的最终位置。

这样做可以使得动画在结束阶段缓缓减速，给用户一个更平滑的动画体验。

七、随机感：动画周期设置

多个元素同时运动，可以设置不同 duration 和 delay。除⾮时间是各粒⼦时间的最⼩公倍数，否则不会回归到初始状态，从⽽产⽣随机感。

在多个元素同时运动时，如果它们具有不同的 duration 和 delay，它们的动画周期不会是一个固定的整数倍关系，因此它们不会在同一时刻回归到初始状态，从而产生了一种随机感。

这是因为当动画周期不是一个固定的整数倍关系时，各个元素的动画在同一时刻处于不同的阶段，导致它们的动画效果看起来更加错落有致、自然多样。

以下是一个具体示例，展示了如何通过设置不同的 duration 和 delay，使得多个元素同时运动，产生随机感的动画效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Motion</title>
<style>.box {width: 50px;height: 50px;background-color: blue;position: absolute;border-radius: 50%;}.box:nth-child(1) {animation: move1 2s linear infinite;top: 100px;left: 100px;}.box:nth-child(2) {animation: move2 3s linear infinite;top: 200px;left: 200px;}@keyframes move1 {0% {transform: translateX(0);}100% {transform: translateX(200px);}}@keyframes move2 {0% {transform: translateY(0);}100% {transform: translateY(200px);}}
</style>
</head>
<body><div class="box"></div><div class="box"></div>
</body>
</html>

在这个示例中，有两个蓝色的圆形 .box 元素，它们分别通过不同的 animation 属性设置了不同的动画效果（move1 和 move2），并且具有不同的起始位置和动画持续时间。

因此，它们的动画周期不是一个固定的整数倍关系，从而产生了一种随机感的动画效果。

八、抛物线：两个内外div实现x和y向量运动

主要就是利用两个内外div实现x向量运动和y向量运动，y向量运动引入贝塞尔曲线，即可实现适当曲线运动。

在上一篇我们在学习贝塞尔曲线时实现过。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parabolic Motion</title>
<style>.ball {width: 50px;height: 50px;background-color: red;position: absolute;border-radius: 50%;animation: horizontalMove 2s linear forwards, verticalMove 2s cubic-bezier(.74,.2,.95,.47) forwards;}@keyframes horizontalMove {0% {left: 0;}100% {left: 200px;}}@keyframes verticalMove {0% {top: 0;}100% {top: 200px;}}
</style>
</head>
<body><div class="ball"></div>
</body>
</html>

我们是实现了一个 div 在 left 和 top 两个方向属性上的不同速度的变化来模拟抛物线。

但假如我们定义了如下：

  @keyframes horizontalMove {0% {transform: translateX(0);}100% {transform: translateY(200px);}}@keyframes verticalMove {0% {transform: translateY(0);}100% {transform: translateY(200px);}}

主要就是利用x向量运动和y向量运动，x向量匀速运动，y向量运动引入贝塞尔曲线，即可实现适当曲线运动。

这种方法可以应用于各种场景，比如游戏中的角色移动、用户界面中的动态效果、数据可视化中的图表动画等。通过调整贝塞尔曲线的控制点，可以实现不同形状的曲线运动，从而满足不同的需求和设计目的。

以下是一个更普适的示例，演示了如何利用两个 div 元素和贝塞尔曲线来实现适当的曲线运动：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bezier Curve Animation</title>
<style>.outer {position: relative;width: 400px;height: 400px;border: 1px solid black;overflow: hidden;}.inner {position: absolute;width: 50px;height: 50px;background-color: blue;border-radius: 50%;animation: moveX 2s linear infinite, moveY 2s cubic-bezier(.74,.2,.95,.47) infinite;}@keyframes moveX {0% {left: 0;}100% {left: calc(100% - 50px);}}@keyframes moveY {0% {top: 0;}100% {top: calc(100% - 50px);}}
</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>

在这个示例中，.outer div 元素作为外部容器，限制活动范围，.inner div 元素作为内部元素，利用两个不同的动画分别控制 x 向量和 y 向量的运动。在 y 向量的运动中，引入了贝塞尔曲线，使得动画呈现出适当的曲线运动效果。

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

深度学习面试问题 | 降维

深度学习面试问题 | 降维

本文给大家带来的百面算法工程师是深度学习降维面试总结&#xff0c;文章内总结了常见的提问问题&#xff0c;旨在为广大学子模拟出更贴合实际的面试问答场景。在这篇文章中&#xff0c;我们还将介绍一些常见的深度学习面试问题&#xff0c;并提供参考的回答及其理论基础&#…
阅读更多...
windows部署腾讯tmagic-editor02-Runtime

windows部署腾讯tmagic-editor02-Runtime

创建editor项目 将上一教程中的hello-world复制过来&#xff0c;改名hello-editor 创建runtime项目 和hello-editor同级 pnpm create vite删除src/components/HelloWorld.vue 按钮需要用的ts types依赖 pnpm add tmagic/schema tmagic/stage实现runtime 将hello-editor中…
阅读更多...
论文阅读 - Anatomy of an AI-powered malicious social botnet

论文阅读 - Anatomy of an AI-powered malicious social botnet

论文链接&#xff1a; https://arxiv.org/pdf/2307.16336.pdf 目录 摘要 1引言 2 相关工作 2.1 LLM驱动的网络威胁 2.2 LLM生成的内容检测 2.3 社交机器人检测 2.4 由 LLM 增强的机器人 3 Fox8僵尸网络的识别 4 特性 4.1 配置文件 4.2 社交网络 4.3内容类型 4.4放…
阅读更多...
多维 HighChart

多维 HighChart

showHighChart.html <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><!-- js脚本都是官方的,后两个是highchart脚本 --><script type"text/javascript" src"jquery1.7.1.min.js"&g…
阅读更多...
摸鱼大数据——Linux搭建大数据环境(安装zooKeeper和zookeeper shell命令)五

摸鱼大数据——Linux搭建大数据环境(安装zooKeeper和zookeeper shell命令)五

安装zookeeper软件 1.上传软件 使用CRT等客户端远程上传 zookeeper-3.4.6.tar.gz 文件到/export/software目录下 2.解压软件 [rootnode1 ~]# cd /export/software/ [rootnode1 software]# tar -xzvf zookeeper-3.4.6.tar.gz -C /export/server/ [rootnode1 software]# cd /ex…
阅读更多...
vue使用marked和highlight.js实现代码高亮效果

vue使用marked和highlight.js实现代码高亮效果

marked是对markdown进行解析的插件&#xff0c;它可以把markdown语法解析成html语法&#xff0c;从而实现页面效果&#xff0c;而highlight.js是对解析出的代码实现高亮效果 效果&#xff1a; 安装&#xff1a;避免踩我走的坑&#xff0c;安装尽量按照这个版本安装 npm install…
阅读更多...
武汉星起航：中国卖家借力亚马逊跨境电商平台，拓展全球销售市场

武汉星起航：中国卖家借力亚马逊跨境电商平台，拓展全球销售市场

随着互联网技术的飞速发展&#xff0c;跨境电商已成为连接全球消费者与卖家的重要桥梁。作为全球领先的跨境电商平台&#xff0c;亚马逊凭借其强大的品牌影响力、丰富的商品资源和高效的物流体系&#xff0c;为全球消费者提供了一个便捷、安全的购物环境。在这个平台上&#xf…
阅读更多...
DBeaver配置离线驱动

DBeaver配置离线驱动

因为部署的服务器为无网环境&#xff0c;所以在服务器上使用DBeaver需要配置离线驱动 我们在有网的环境下&#xff0c;安装DBeaver。把驱动下载下来&#xff0c;然后再拷贝到没网的设备上 一、下载驱动 1.在有网的设备上&#xff0c;打开DBeaver 2.找到窗口&#xff0c;选择…
阅读更多...
Git使用（1）：介绍、克隆、推送

Git使用（1）：介绍、克隆、推送

一、介绍与安装 1、Git是什么&#xff1f; Git是目前世界上最先进的分布式版本控制系统。工作原理 / 流程&#xff1a; workspace&#xff1a;工作区Index / Stage&#xff1a;暂存区Repository&#xff1a;仓库区&#xff08;或本地仓库&#xff09;Remote&#xff1a;远程仓…
阅读更多...
【安全每日一讲】API是什么？解密API背后的奥秘

【安全每日一讲】API是什么？解密API背后的奥秘

什么是API? API全称Application Programming Interface&#xff0c;即应用程序编程接口&#xff0c;是一些预先定义的函数&#xff0c;或指软件系统不同组成部分衔接的约定&#xff0c;用于传输数据和指令&#xff0c;使应用程序之间可以集成和共享数据资源。 简单来说&#…
阅读更多...
Cadence 16.6 绘制PCB封装时总是卡死的解决方法

Cadence 16.6 绘制PCB封装时总是卡死的解决方法

Cadence 16.6 绘制PCB封装时总是卡死的解决方法 在用Cadence 16.6 PCB Editor绘制PCB封装时候&#xff0c;绘制一步卡死一步&#xff0c;不知道怎么回事儿&#xff0c;在咨询公司IT后&#xff0c;发现是WIN系统自带输入法的某些热键与PCB Editor有冲突&#xff0c;导致卡死。 …
阅读更多...
Java的response返回Json格式

Java的response返回Json格式

问题 今天开发过程中&#xff0c;写了个拦截器&#xff0c;对于所以请求进行一个token的工作&#xff0c;对于不合标准的token返回错误&#xff0c;在网上找了个拦截器进行二次开发。 package com.maizhiyu.yzt.handle;import org.springframework.beans.factory.annotation.…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023