web前端--------渐变和过渡

线性渐变,是指颜色沿一条直线进行渐变,例如从上到下、从左到右。

当然,CSS中也支持使用角度来设置渐变的方向,角度单位为deg。

0deg,为12点钟方向,表示从下到上渐变。

90deg,为3点钟方向,表示从左到右渐变。

径向渐变与线性渐变类型的不同之处,在于它是由中心向外延伸的渐变。

我们可以指定中心点的位置,还可以设置渐变的形状。

--------------------在CSS中,设置径向渐变需要用radial-gradient()函数

radial-gradient()函数的形状参数,用于定义渐变的形状。可选值有circle(圆形)ellipse(椭圆)

------------------定位渐变中心,使用at加百分比,来自定义渐变的中心位置。

渐变中心需要定义横纵坐标,格式为at 横坐标 纵坐标

-----------------渐变形状的另一种为椭圆,是默认形状。

也就是说,我们不设置形状参数和半径就能展示出椭圆。

当然,我们设置形状参数为ellipse时,也可以展示出椭圆。

*******************过渡**********************

过渡,可以将元素从一种样式在指定时间内平滑的过渡到另一种样式,类似于简单的动画。

因为过渡效果,通常在我们将鼠标放在元素上时发生,所以在这里,我们需要结合状态伪类:hover来实现这种平滑的过渡。

~~~~~~~~~~~~~~~~~~~~transition-property属性,用于指定元素中参与过渡的属性名称。

示例中,transition-property属性的值为width,表示元素的宽度属性width,会参与过渡。

~~~~~~~~~~~~~~~~~~transition-duration属性,用于指定过渡要花费的时间。

其属性值以秒(s)或毫秒(ms)为单位。

~~~~~~~~~~~~~~~transition-timing-function属性,表示过渡效果的速度曲线。

它的属性值默认为ease,表示过渡效果以缓慢地开始,然后变快,最后缓慢地结束。

~~~~~~~~~~~~~~~~transition-delay属性,用于规定过渡效果开始之前需要等待的时间。

它的属性值以秒(s)或毫秒(ms)为单位,这个值表示过渡效果什么时候开始。

示例中,属性值为0s,表示无需等待,立即开始过渡。

~~~~~~~~~~~~~~~~~CSS中的transition属性,可以直接设置四个过渡属性的效果。

其属性值,依次按照待过渡属性、过渡持续时间、速度曲线、等待时间的顺序书写,之间用空格隔开。

~~~~~~~~~~~~~~~所有过渡属性

有时候,我们想给所有属性设置过渡效果,此时可以使用all来表示过渡的所有属性。

示例中,元素的宽度和高度属性都会产生过渡效果。

~~~~~~~~~~~~~示例中,我们给所有属性设置过渡效果,在:hover中添加旋转180度的转换。

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

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

相关文章

Android13源码下载及全编译流程

目录 一、源码下载 1.1、配置要求 1.1.1、硬件配置要求 1.1.2、软件要求 1.2、下载环境搭建 1.2.1、依赖安装 1.2.2、工具安装 1.2.3、git配置 1.2.4、repo配置 1.3、源码下载 1.3.1、明确下载版本 1.3.2、替换为清华源 1.3.3、初始化仓库并指定分支 1.3.4、同步全部源码 二、…

【24美赛思路已出】2024年美赛A~F题解题思路已出 | 无偿自提

A题:资源可用性和性别比例 问题一: 涉及当灯鱼种群的性别比例发生变化时,对更大的生态系统产生的影响。为了分析这个问题,可以采用以下的数学建模思路:建立灯鱼种群模型: 首先,建立一个灯鱼种群…

20240203在WIN10下安装Miniconda

20240203在WIN10下安装Miniconda 2024/2/3 21:06 缘起:最近学习stable-diffusion-webui.git,在Ubuntu20.04.6下配置SD成功。 不搞精简版本:Miniconda了。直接上Anacoda! https://www.toutiao.com/article/7222852915286016544/ 从…

Vue组件通信讲解[父子组件通信]

Vue组件通信讲解 在Vue中,父子组件之间的通信可以通过props和emit来实现。props用于从父组件向子组件传递数据,而$emit用于从子组件向父组件触发事件。 以下是一个包含子传父和父传子通信的Vue案例解决方案: 父组件:Parent.vue…

Qt 的安装以及项目的创建

目录 Qt简介Qt 开发环境安装的过程环境变量的配置Qt SDK 中的重要的工具创建一个 Qt 项目 Qt简介 开始安装教程前,首先来了解一下什么是QT。 QT(Quick Thought)是一个基于Qt库的快速应用程序开发框架。它提供了一套完整的开发工具和库&…

文本检测学习笔记_CTPN

论文地址:https://arxiv.org/pdf/1609.03605.pdf 开源代码:https://github.com/lvliguoren/pytorch_ctpn?tabreadme-ov-file 本文主要的的内容 提出了一种将文本视为由密集排列的具有固定宽度的文本候选区域组成的序列的方法。这些文本候选区域可以通…

国际国内 IT行业有哪些证书含金量高?

一、前言 在信息技术飞速发展的今天,IT行业证书作为衡量专业技能和知识水平的重要标准,越来越受到业界的重视。对于IT从业者而言,拥有一些权威性的证书不仅能够证明自己的专业能力,更是职业发展的有力助推器。基于多年的行业经验…

Python中with管理上下文

上下文管理器 上下文管理器本质就是能够支持with操作。 任何实现了 __enter__() 和 __exit__() 方法的对象都可称之为上下文管理器,上下文管理器对象可以使用 with 关键字。显然,文件(file)对象也实现了上下文管理器协议。 实现…

【数据结构与算法】二叉树前序,中序,后序遍历非递归版。Leetcode接口

144. 二叉树的前序遍历 - 力扣(LeetCode) 如果根节点为空,直接返回。初始化一个辅助栈 s,并将根节点入栈。重复以下步骤,直到栈为空: 检查当前节点 tmp: 如果 tmp 不为空: 将当前节…

寒假作业-day2

进程间通信的7种方式,总结出他们的优点 1. 内核提供的原始通信方式有三种 1.1 无名管道 1.2 有名管道 1.3 信号 2. System V提供了三种通信方式 2.1 消息队列 2.2 共享内存 3.1 信号量(信号灯集) 3. 套接字通信:socket …

十一、计算机分类

1、按照性能和用途分类 计算机分类 计算机按照性能、用途和规模可以分为以下几种类型: 1)巨型机(超级计算机) 采用大规模并行处理体系结构。运算速度最快、体积最大、价格最昂贵。主要用于尖端科学研究领域,如灾难预测…

《计算机网络简易速速上手小册》第2章:计算机网络协议和标准(2024 最新版)

文章目录 2.1 IPv4 与 IPv6 - 网络世界的地址簿2.1.1 基础知识2.1.2 重点案例:使用 Python 查询本机 IPv4 和 IPv6 地址2.1.3 拓展案例1:使用 Python 创建简单的 IP 地址转换工具2.1.4 拓展案例2:使用 Python 检测本地网络的 IP 版本支持 2.2…

前端学习02

1.CSS案例 1.1 内容回顾 1.1.1 搭建骨架 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style>body{margin: 0;}.sub-header{height: 100px;background-color: #b0b0b0…

js中常用数组去重方法

js中常用去重方法 一、使用 Set ES6 提供了 Set 类型&#xff0c;它可以自动去重 const arr [1, 2, 2, 3, 3, 4]; const newArr Array.from(new Set(arr)); console.log(newArr ); // [1, 2, 3, 4]二、使用 filter 方法 const arr [1, 2, 2, 3, 3, 4]; const newArr ar…

unity 导出H5

Unity 输出html5_mob649e8157aaee的技术博客_51CTO博客 Unity打包WebGL报Unable to parse Build/*.framework.js.gz This can happen if build compression was......._unable to load file build/out.framework.js.gz! che-CSDN博客

ES6-对象的解构赋值

一、区别一下数组的解构赋值 - 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的&#xff0c;变量的取值由它的位置决定&#xff1b;而对象的属性没有次序&#xff0c;变量必须与属性同名&#xff0c;才能取到正确的值二、说明 - 对象的解构赋值的内部机制&#…

【Vitis】Vitis HLS学习系列笔记 :第一个例程

在学习vitis的过程中一定要跑几个例程试试看&#xff0c;这中间遇到了几个小问题&#xff0c;记录下 有干货&#xff0c;请注意查收&#xff1a;作为新手&#xff0c;跑例程大概率会遇到问题&#xff0c;这里记录几个问题&#xff0c;如果刚好你也遇到&#xff0c;一定会帮到你…

XML详解

文章目录 XML简介语法约束DTDSchema 解析Jsoup使用对象详解JsoupDocumentElementsElementNode XML 简介 概述&#xff1a;Extensible Markup Language 可扩展标记语言 可扩展&#xff1a;标签都是自定义的。 功能 数据存储&#xff1a;XML 可以用来存储结构化数据&#xff0c…

HSRP配置指南

实验大纲 第 1 部分&#xff1a;验证连通性 步骤 1&#xff1a;追踪从 PC-A 到 Web 服务器的路径 步骤 2&#xff1a;追踪从 PC-B 到 Web 服务器的路径 步骤 3&#xff1a;观察当 R3 不可用时&#xff0c;网络的行为 第 2 部分&#xff1a;配置 HSRP 主用和 备用路由器 步…

rasa3.X 自定义action的注册问题

rasa3.X 自定义action的注册问题 文章目录 rasa3.X 自定义action的注册问题前言一、问题重述二、问题解决 前言 幸好在这之前抽时间稍微看了一点django源码&#xff0c;让我对于python的导入机制有了一个概念。虽然还不是很确切的知道python import机制&#xff0c;不过在看到…