第9章：CSS动画和过渡 --[CSS零基础入门]

1.过渡

CSS 过渡（Transitions）是一种简单而有效的方法，用于在元素的状态发生变化时创建平滑的视觉效果。以下是五个具体的例子，展示了如何使用过渡来增强用户交互体验。

示例 1: 按钮颜色和大小变化

这个例子展示了当用户将鼠标悬停在一个按钮上时，按钮的颜色、大小以及边框半径会发生平滑的变化。

<!-- HTML -->
<button class="transition-button">Hover Me</button>

<style>
.transition-button {
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #3498db;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease, border-radius 0.3s ease;
}

.transition-button:hover {
  background-color: #2ecc71;
  transform: scale(1.1); /* 放大按钮 */
  border-radius: 20px; /* 更圆的角 */
}
</style>

在这里插入图片描述

解释：通过 transition 属性设置多个属性的过渡效果，包括背景颜色、变换（用于放大）和边框半径，以实现更丰富的悬停效果。

示例 2: 卡片翻转效果

此示例演示了如何创建一个卡片翻转的效果，当用户悬停在卡片上时，它会从正面翻转到背面。

<!-- HTML -->
<div class="card">
  <div class="card-inner">
    <div class="card-front">Front Side</div>
    <div class="card-back">Back Side</div>
  </div>
</div>

<style>
.card {
  perspective: 1000px;
}

.card-inner {
  width: 200px;
  height: 300px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-front {
  background-color: #3498db;
  color: white;
}

.card-back {
  background-color: #2ecc71;
  color: white;
  transform: rotateY(180deg);
}
</style>

在这里插入图片描述

解释：利用 transform 和 transition 实现3D旋转效果，结合 backface-visibility 来隐藏不必要的面，从而创建出卡片翻转的感觉。

示例 3: 菜单项展开与收缩

这里展示了一个简单的菜单项，在点击或悬停时会逐渐展开显示更多内容。

<!-- HTML -->
<ul class="menu">
  <li class="menu-item">Menu Item 1</li>
  <li class="menu-item">Menu Item 2</li>
  <li class="menu-item">Menu Item 3</li>
</ul>

<style>
.menu {
  list-style: none;
  padding: 0;
}

.menu-item {
  padding: 10px;
  background-color: #f4f4f4;
  margin: 5px 0;
  overflow: hidden;
  max-height: 50px;
  transition: max-height 0.5s ease;
}

.menu-item:hover {
  min-height: 150px;
}
</style>

在这里插入图片描述

解释：通过改变 min-height 并应用过渡效果，可以实现菜单项的高度变化，给人一种展开或收缩的感觉。

示例 4: 文字颜色和阴影变化

这个例子说明了如何在用户悬停时改变文字的颜色，并添加或移除文本阴影，以增加视觉吸引力。

<!-- HTML -->
<p class="text-effect">Hover over this text to see the effect.</p>

<style>
.text-effect {
  font-size: 24px;
  color: black;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.text-effect:hover {
  color: #2c3e50;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
</style>

解释：使用 transition 来定义颜色和文本阴影的变化速度及方式，使得文字在悬停时显得更加生动。

示例 5: 图像模糊和缩放效果

最后一个例子展示了如何为图片添加模糊和缩放效果，当用户将鼠标悬停在图像上时，图像会变得稍微模糊并放大。

<!-- HTML -->
<img src="path/to/image.jpg" alt="Sample Image" class="image-effect">

<style>
.image-effect {
  width: 300px;
  filter: blur(0px);
  transition: filter 0.5s ease, transform 0.5s ease;
}

.image-effect:hover {
  filter: blur(2px);
  transform: scale(1.1);
}
</style>

解释：结合 filter 和 transform 属性，通过 transition 实现了图片的模糊和缩放过渡效果，增强了互动性。

这些例子展示了 CSS 过渡的强大功能，可以帮助你轻松地为网页元素添加动态和交互式的视觉效果。无论是按钮、卡片、菜单还是文本和图像，都可以通过适当的过渡设计变得更加吸引人。

2.动画

CSS 动画（Animations）允许你创建复杂的视觉效果，通过定义关键帧（@keyframes）来控制元素在不同时间点上的样式变化。以下是五个具体的例子，展示了如何使用 CSS 动画为网页添加生动有趣的互动元素。

示例 1: 文字颜色循环变换

这个例子展示了一个文本标签的颜色每隔几秒就会平滑地从一种颜色过渡到另一种颜色，形成无限循环的彩虹效果。

<!-- HTML -->
<h1 class="rainbow-text">Rainbow Text</h1>

<style>
.rainbow-text {
  font-size: 48px;
  animation: colorChange 6s infinite;
}

@keyframes colorChange {
  0% { color: red; }
  20% { color: orange; }
  40% { color: yellow; }
  60% { color: green; }
  80% { color: blue; }
  100% { color: purple; }
}
</style>

在这里插入图片描述

解释：通过 @keyframes 定义了一系列的颜色变化，并通过 animation 属性将这些变化应用到 .rainbow-text 元素上，实现无限循环的颜色变换效果。

示例 2: 滑入屏幕的图片

此示例演示了如何让一张图片从屏幕外滑入，并最终停在页面中央，营造出吸引人的进入效果。

<!-- HTML -->
<img src="path/to/image.jpg" alt="Sliding Image" class="sliding-image">

<style>
.sliding-image {
  position: absolute;
  top: 50%;
  left: -100%;
  width: 300px;
  animation: slideIn 2s forwards;
}

@keyframes slideIn {
  from { left: -100%; }
  to { left: 50%; transform: translateX(-50%); }
}
</style>

解释：使用绝对定位使图像初始位置位于屏幕左侧外部，然后通过 @keyframes 和 animation 将其水平滑动到页面中心。

示例 3: 脉冲按钮

这里展示了一个按钮，当页面加载后会周期性地放大和缩小，给人一种“脉搏跳动”的感觉，吸引用户的注意力。

<!-- HTML -->
<button class="pulse-button">Pulse Button</button>

<style>
.pulse-button {
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #3498db;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
</style>

在这里插入图片描述

解释：通过定义 @keyframes 中的关键帧，使得按钮在 0% 和 100% 时保持原始大小，在 50% 时稍微放大，从而产生脉冲效果。

示例 4: 翻页动画

这个例子模拟了书页翻动的效果，当用户悬停在一个卡片上时，它会像翻开一本书一样旋转并显示背面内容。

<!-- HTML -->
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">Front Side</div>
    <div class="flip-card-back">Back Side</div>
  </div>
</div>

<style>
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  width: 200px;
  height: 300px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: white;
}

.flip-card-front {
  background-color: #3498db;
}

.flip-card-back {
  background-color: #2ecc71;
  transform: rotateY(180deg);
}
</style>

解释：利用 transform 和 transition 实现3D旋转效果，结合 backface-visibility 来隐藏不必要的面，从而创建出卡片翻转的感觉。

示例 5: 星星闪烁效果

最后一个例子展示了如何创建一个星星闪烁的效果，星星会随机地亮起和熄灭，模仿夜空中星星闪烁的样子。

<!-- HTML -->
<div class="star-field"></div>

<style>
.star-field {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: black;
  overflow: hidden;
}

.star-field::before,
.star-field::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  animation: twinkle 2s infinite alternate;
}

.star-field::before {
  top: 20%;
  left: 40%;
  animation-delay: 0.5s;
}

.star-field::after {
  bottom: 60%;
  right: 80%;
}

@keyframes twinkle {
  0% { opacity: 0.2; }
  100% { opacity: 1; }
}
</style>

解释：使用伪元素 ::before 和 ::after 创建两个“星星”，并通过 @keyframes 定义它们的透明度变化，以模拟闪烁效果。此外，还设置了不同的 animation-delay 值来确保每个星星的闪烁不是同步的。

这些例子展示了 CSS 动画的强大功能，可以帮助你轻松地为网页元素添加动态和交互式的视觉效果。无论是文字、图片、按钮还是更复杂的效果，都可以通过适当的动画设计变得更加吸引人。

3.变形

CSS 变形（Transform）功能允许开发者通过旋转、缩放、倾斜和平移等操作来改变元素的外观。下面将给出五个使用 CSS transform 属性的示例，每个示例都将展示一种不同的变形效果。

示例 1: 元素的旋转

此示例展示了如何使一个方块元素围绕其中心点旋转。

<!-- HTML -->
<div class="rotate-box"></div>

<style>
.rotate-box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 50px;
  transition: transform 0.6s;
}

/* 当鼠标悬停在元素上时 */
.rotate-box:hover {
  transform: rotate(45deg); /* 顺时针旋转45度 */
}
</style>

在这里插入图片描述

解释：当用户将鼠标悬停在 .rotate-box 上时，它会顺时针旋转45度。

示例 2: 缩放图片

这个例子演示了如何让一张图片在用户悬停时放大，营造出放大的视觉效果。

<!-- HTML -->
<img src="path/to/image.jpg" alt="Scaling Image" class="scaling-image">

<style>
.scaling-image {
  width: 300px;
  transition: transform 0.3s ease-in-out;
}

/* 当鼠标悬停在图像上时 */
.scaling-image:hover {
  transform: scale(1.1); /* 放大1.1倍 */
}
</style>

解释：通过 scale() 函数，当用户悬停在图像上时，它会被放大到原来的1.1倍大小。

示例 3: 倾斜文本

这里展示了一个文本标签被倾斜显示的例子，给予了一种非传统的排版风格。

<!-- HTML -->
<h1 class="skew-text">Skewed Text</h1>

<style>
.skew-text {
  font-size: 48px;
  color: white;
  background-color: #e74c3c;
  padding: 10px 20px;
  transform: skewX(-10deg); /* 沿X轴倾斜-10度 */
}
</style>

在这里插入图片描述

解释：skewX() 函数用于沿水平轴（X轴）倾斜文本。在这个例子中，文本向左下方倾斜了10度。

示例 4: 平移元素

这个例子展示了如何使用 translate() 函数来移动一个元素的位置，而不影响文档流中的其他元素。

<!-- HTML -->
<div class="translated-box"></div>

<style>
.translated-box {
  width: 100px;
  height: 100px;
  background-color: #2ecc71;
  position: absolute;
  top: 50px;
  left: 50px;
  transition: transform 0.6s;
}

/* 当鼠标悬停在元素上时 */
.translated-box:hover {
  transform: translate(100px, 100px); /* 向右和向下各移动100像素 */
}
</style>

解释：translate() 函数可以用来沿X轴和Y轴平移元素。在这个例子中，.translated-box 在用户悬停时会向右和向下各移动100像素。

示例 5: 组合变换

最后一个例子展示了如何结合多种变形效果，并利用 transition 来创建流畅的动画效果。

<!-- HTML -->
<div class="combined-transform"></div>

<style>
.combined-transform {
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
  margin: 50px;
  transition: transform 0.6s;
}

/* 当鼠标悬停在元素上时 */
.combined-transform:hover {
  transform: rotate(45deg) scale(1.2) translate(50px, -50px) skew(10deg, 10deg);
  /* 旋转、放大、平移并倾斜 */
}
</style>

解释：通过在 transform 属性中指定多个变形函数，可以同时应用旋转、缩放、平移和倾斜的效果。transition 确保了这些变化是渐进且平滑的。

以上五个示例展示了 CSS transform 属性的不同用法，从简单的旋转和缩放到更复杂的组合变换。这些变形效果不仅增加了网页的互动性和趣味性，还能提升用户体验。你可以根据需要调整这些属性的具体值，以实现你想要的设计效果。

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

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

相关文章

如何解决压测过程中JMeter堆内存溢出问题

如何解决压测过程中JMeter堆内存溢出问题

如何解决压测过程中JMeter堆内存溢出问题 背景一、为什么会堆内存溢出&#xff1f;二、解决堆内存溢出措施三、堆内存参数应该怎么调整&#xff1f;四、堆内存大小配置建议 背景 Windows环境下使用JMeter压测运行一段时间后&#xff0c;JMeter日志窗口报错“java.lang.OutOfMe…
阅读更多...
java问题解决_idea导入java项目时包名路径报错解决

java问题解决_idea导入java项目时包名路径报错解决

第一个问题&#xff1a;idea导入java项目时包名路径报错解决 问题1&#xff1a;导入项目之后&#xff0c;没有运行导航 | 软件包名称 graph 与文件路径 src.graph 不对应 解决问题1&#xff1a; 打开项目结构 找到板块中的源代码目录 右键选择源代码 高亮之后就OK了 点击应用…
阅读更多...
【青牛科技】拥有两个独立的、高增益、内部相位补偿的双运算放大器，可适用于单电源或双电源工作——D4558

【青牛科技】拥有两个独立的、高增益、内部相位补偿的双运算放大器，可适用于单电源或双电源工作——D4558

概述&#xff1a; D4558内部包括有两个独立的、高增益、内部相位补偿的双运算放大器&#xff0c;可适用于单电源或双电源工作。该电路具有电压增益高、噪声低等特点。主要应用于音频信号放大&#xff0c;有源滤波器等场合。 D4558采用DIP8、SOP8的封装形式 主要特点&#xff…
阅读更多...
qt-C++语法笔记之mapToGlobal将组件（控件）中的本地坐标系（局部坐标）映射到全局坐标系

qt-C++语法笔记之mapToGlobal将组件（控件）中的本地坐标系（局部坐标）映射到全局坐标系

qt-C语法笔记之mapToGlobal将组件&#xff08;控件&#xff09;中的本地坐标系&#xff08;局部坐标&#xff09;映射到全局坐标系 code review! 文章目录 qt-C语法笔记之mapToGlobal将组件&#xff08;控件&#xff09;中的本地坐标系&#xff08;局部坐标&#xff09;映射到…
阅读更多...
C++核心day3作业

C++核心day3作业

作业&#xff1a; 1.整理思维导图 2.整理课上代码 3.把课上类的三个练习题的构造函数写出来 函数全部类内声明&#xff0c;类外定义 定义一个矩形类Rec&#xff0c;包含私有属性length、width&#xff0c;包含公有成员方法&#xff1a; void set_length(int l); //设置长度v…
阅读更多...
基于Spring Boot库存管理系统

基于Spring Boot库存管理系统

文末获取源码和万字论文&#xff0c;制作不易&#xff0c;感谢点赞支持。 基于Spring Boot库存管理系统 当下&#xff0c;如果还依然使用纸质文档来记录并且管理相关信息&#xff0c;可能会出现很多问题&#xff0c;比如原始文件的丢失&#xff0c;因为采用纸质文档&#xff0c…
阅读更多...
FPGA 17 ，FPGA 与 SR-IOV虚拟化技术，高性能计算与虚拟化技术的结合（FPGA 与 SR-IOV 和 PCI，高性能计算与虚拟化的完美融合）

FPGA 17 ，FPGA 与 SR-IOV虚拟化技术，高性能计算与虚拟化技术的结合（FPGA 与 SR-IOV 和 PCI，高性能计算与虚拟化的完美融合）

目录 前言 一. SR-IOV 的起源与发展 1. SR-IOV 的起源与时间线 2. SR-IOV 的诞生原因 3. SR-IOV 的详细介绍 二. SR-IOV 和 PCI 之间的关系 三. PCI 的起源与演进 1. PCI 的起源与时间线 2. PCI 的关键特性 四. FPGA 的独特魅力 1. FPGA 的定义与特性 2. FPGA 的内…
阅读更多...
【深度学习】深刻理解Masked Autoencoders（MAE）

【深度学习】深刻理解Masked Autoencoders（MAE）

Masked Autoencoders (MAE) 是近年来自监督学习领域中的一项重要创新&#xff0c;尤其在计算机视觉领域取得了显著进展。随着深度学习的快速发展&#xff0c;自监督学习逐渐成为了一种重要的无监督学习方法&#xff0c;它通过从数据中学习表示而不依赖人工标签&#xff0c;极大…
阅读更多...
Oracle报错ORA-01653: 表xx无法通过 8192在表空间中扩展

Oracle报错ORA-01653: 表xx无法通过 8192在表空间中扩展

向Oracle 19g数据库中批量插入数据&#xff0c;当插入近2亿条数据后&#xff0c;报出如下错误&#xff1a; ORA-01653: 表xx无法通过 8192 (在表空间 xx_data 中) 扩展 查看表空间&#xff0c;发现表空间大小已达到32G&#xff0c;表空间无法进行自动扩展了。&#xff08;初始…
阅读更多...
图的遍历（C++实现图【2】）

图的遍历（C++实现图【2】）

目录 1. 图的遍历 1.1 图的广度优先遍历 2.2 图的深度优先遍历 1. 图的遍历 给定一个图G和其中任意一个顶点v0&#xff0c;从v0出发&#xff0c;沿着图中各边访问图中的所有顶点&#xff0c;且每个顶点仅被遍历一次。"遍历"即对结点进行某种操作的意思。 1.1 图的广度…
阅读更多...
群控系统服务端开发模式-应用开发-邮件发送工具类

群控系统服务端开发模式-应用开发-邮件发送工具类

一、邮件发送工具类开发 1、添加框架对应的SDK composer require phpmailer/phpmailer 2、添加工具集 在根目录下extend文件夹下创建Email文件夹&#xff0c;在Email文件夹下添加工具集控制并命名为EmailSender.php <?php /*** 邮件发送工具* User: 龙哥三年风水* Date: …
阅读更多...
如何在vue中使用ECharts

如何在vue中使用ECharts

一. 打开ECharts官网,点击快速入门 下面是ECharts官网的链接 https://echarts.apache.org/ 二.在vue中使用 1.首先先引入Echarts js文件 如下图&#xff0c;下面的第一张图片是官网的实现&#xff0c;第二章图片是我根据官网的实现 2.给ECharts 创建一个DOM容器 3. 使用ec…
阅读更多...
Java版-图论-拓扑排序与有向无环图

Java版-图论-拓扑排序与有向无环图

拓扑排序 拓扑排序说明 对一个有向无环图(Directed Acyclic Graph简称DAG)G进行拓扑排序，是将G中所有顶点排成一个线性序列，使得图中任意一对顶点u和v，若边<u,v>∈E(G)，则u在线性序列中出现在v之前。通常，这样的线性序列称为满足拓扑次序(Topological Order)的序列…
阅读更多...
Nginx安装和配置详解

Nginx安装和配置详解

1.Nginx的安装 1.1运行以下脚本安装 yum install yum-utils -y rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm# 查看所有可安装nginx版本 yum --showduplicates list available nginx yum install nginx-1.24.0 -y …
阅读更多...
Pytest测试框架

Pytest测试框架

Pytest测试框架 测试用例发现规则 默认从当前或者指定文件夹下递归查找文件名以test_开头或者_test结尾的.py文件以Test 开头且&#xff08;不继承自 unittest.TestCase或者含有init方法的类&#xff09;的类函数名以 test_ 开头的测试用例方法 自定义测试用例发现规则 我们…
阅读更多...
【OpenCV】图像阈值

【OpenCV】图像阈值

简单阈值法 此方法是直截了当的。如果像素值大于阈值&#xff0c;则会被赋为一个值&#xff08;可能为白色&#xff09;&#xff0c;否则会赋为另一个值&#xff08;可能为黑色&#xff09;。使用的函数是 cv.threshold。第一个参数是源图像&#xff0c;它应该是灰度图像。第二…
阅读更多...
idea压缩js,css

idea压缩js,css

这是需要的jar包(文章顶部也可以下载) 地址:https://download.csdn.net/download/yuzheh521/90109966?spm1001.2101.3001.9500 压缩js arguments: -jar E:\swj\jar_packages\css_js_compress\yuicompressor-2.4.8.jar --type js --charset utf-8 $FilePath$ -o $FileNameWith…
阅读更多...
css基础记录

css基础记录

基础 选择器 复合选择器 后代选择器 div p {}; 类似如上,找到div中所有的后代,注意是所有的后代 子代选择器 > div > a 只选择div的儿子中有a的 并集选择器 用逗号,分隔 p,div,span,h1 { … } 一般一行写一个 CSS元素显示模式 分为块元素,行内元素 块元素 特点…
阅读更多...
【C++】LeetCode：LCR 078. 合并 K 个升序链表

【C++】LeetCode：LCR 078. 合并 K 个升序链表

题干&#xff1a; 给定一个链表数组&#xff0c;每个链表都已经按升序排列。 请将所有链表合并到一个升序链表中&#xff0c;返回合并后的链表。 解法&#xff1a;优先队列 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *ne…
阅读更多...
使用PHPUnit使用本地调试代替远程调试，快速提高开发效率

使用PHPUnit使用本地调试代替远程调试，快速提高开发效率

Laravel 是一个在 Linux 环境下表现非常出色的 PHP 框架&#xff0c;但它在 Windows 环境下可能会遇到一些兼容性和配置问题。为了调试或没试的方便可以在 Windows 环境下进行 Laravel PHPUnit进行本地调试和测试。 本地主要针对断点调试效果非常高效。 在 Laravel 中&#x…
阅读更多...
最新文章

Copyright @ 2022~2023