【CSS】透明度 、过渡 、动画 、渐变

news2024/11/16 19:32:58

  • opacity 透明度
  • transition 过渡
  • animation 动画
  • background 渐变 ( 线性渐变 \ 径向渐变 )

opacity 透明度

设置元素的透明度，会影响元素及其所有子元素的透明度，值范围：0（完全透明）到 1（完全不透明）。但不会影响元素的布局，即使元素变得透明，它仍然会占据其应有的空间（visibility: hidden 占据位置，只是不可见）。若只想影响元素的背景而不影响其内容，可使用其它方法，如：rgba 颜色值进行 background-color 的透明度设置（取决于浏览器支持）

<style>
	div{
	width: 200px;height: 100px;
		line-height: 100px;font-size: 30px;
		text-align: center;margin-top: 10px;
	}
	div:nth-of-type(1){
		background-color: #d000ff;
		/* 设置的是元素的透明度 */
		opacity: 0.3;
	}
	div:nth-of-type(2){
		/* 设置的是背景颜色的透明度 */
		background-color: rgba(208,0,255,0.3);
	}
</style>
<div>文字</div>
<div>文字</div>

效果:
在这里插入图片描述

transition 过渡

属性值说明
transition-property设置元素中参与过渡的属性（ all \ none \ 指定属性多个用逗号分隔 ）
transition-duration设置元素过渡的持续时间（ 秒s \ 毫秒ms ）
transition-timing-function设置过渡的时间函数，控制过渡效果的速度曲线
ease默认：缓慢-加速-缓慢
linear：匀速
ease-in：缓慢开始
ease-out：缓慢结束
ease-in-out：缓慢开始和结束
cubic-bezier(n, n, n, n) ：函数，取值 [0,1]
transition-delay设置过渡效果延迟的时间，默认为 0（ 使过渡效果在触发后一段时间开始）

要生效必须要有初始状态和结束状态才能实现过渡效果

<style>
	/*
		书写格式：
				transition-property: width, background, transform;
				transition-duration: .25s, 1s, 2s;
				transition-timing-function: linear, ease, ease;
				transition-delay: 1.9s, 2s, 0s;
	
				transition: width .25s linear 1.9s, background 1s 2s, transform 2s;
	
				transition: width, background, transform 2s linear 3s;
	
				transition: width 2s;
	*/
	h1{
		width: 200px;
		background-color: rgba(66,85,255,0.6);
		opacity: 1;
		transition: all 1s ease-out 1s; /* transition：简写同时设置四个过渡属性 */
	}
	h1:hover{
		width: 100%; /* 宽度变化 */
		background-color: greenyellow; /* 背景色变化 */
		opacity: 0.5; /* 透明度变化 */
	}


	/*
		display: none和 display: block之间的切换也会出现过渡效果失效的情况

		原因： display: none是销毁当前dom节点，再次切换为display: block时会再创建节
			  点，此时css选择器会重新赋予上去。所以不存在渐变动画
		解决：
			  1.用 opacity（透明度）去替代
			  2.用 visibility: hidden和 visibility: visible进行替换
	*/
	h2{
		/*display: block;*/
		/*visibility: visible;*/
		opacity: 1;
		background-color: red;
		transition: all 2s linear; /* 过渡 */
	}
	h2:hover{
		/*display: none;*/
		/*visibility: hidden;*/
		opacity: 0;
		background-color: green;
	}
</style>
<h1>transition</h1>
<h2>transition</h2>

效果:

在这里插入图片描述

animation 动画

属性值说明
animation-name关键帧 ( 动画 ) 名称，可以同时指定多个动画
animation-duration动画完成一个周期所需的时间，以秒 ( s ) 或毫秒 ( ms ) 为单位
animation-timing-function速度曲线
linear：从头到尾，动画的运行速度相同
ease：默认值，开始低速，然后加快，结束前变慢
ease-in：低速开始，结束前不断变快
ease-out：快速开始，结束前不断变慢
ease-in-out：开始和结束时段是慢速，中间部分速度最快
cubic-bezier(n,n,n,n)：贝塞尔曲线，可以自己设置速度曲线
animation-delay动画开始前等待的时间，以秒 ( s ) 或毫秒 ( ms ) 为单位
animation-iteration-count‌动画播放的次数，正数 或 infinite ( 无限的 ) 则重复运行动画
animation-direction‌是否应该轮流反向播放，从头到尾正向播放，或是从尾到头的倒放
normal：动画正放，动画一周期结束后重置到开始位置
reverse：动画倒放
alternate：动画在奇数次正向播放，偶数次反向播放。如果一个动画是持续播放
的，程序刚开始动画为第一次，这一次播放完毕便进行第二次，以此类推
alternate-reverse：动画在奇数次反向播放，偶数次正向播放
animation-fill-mode播放之前和之后如何应用样式
none：默认值，动画不会对元素在动画开始前或结束后样式参数产生任何影响。动画开始前，元素显
示CSS非动画状态的样式；动画结束元素回到动画未运行前的初始状态
forwards：动画完成后，元素保持在动画的最后关键帧。就是动画运行到哪里
，结束后它就保持在哪里，不会回初始点了
backwards：动画开始前，元素显示动画的第一个关键帧的样式。在动画开始前的等待期，
它显示的是第一关键帧
both：结合了前两个的效果。动画开始前的等待期它是第一关键帧的样子，
动画结束后保持在最后结束帧的模样，也不会回到原点了
animation-play-state播放状态，是否正在运行或已暂停
在动画过程中我们可以暂停动画，也可以暂停后继续运行，值主要有两个：running \
paused。当 running 时，动画正常播放，当 paused 时，动画则停在当前帧

常伴随着动画帧 @keyframes 一起使用

<style>
	.box{
		width: 100px;height: 100px;background: #0022ff;

		/* 最简 */
		/*animation: myMove 3s;*/
		/* 最全 */
		/*animation: myMove2 5s linear 1s 2 alternate both running;*/
		/* 多组 */
		animation: myMove2 5s linear infinite,Change 5s linear infinite;
	}

	/*简单规则 ( from to )*/
	@keyframes myMove{
		from{
			background-color: yellow;
		}
		to{
			background-color: deeppink;
			margin-left: 300px;
			margin-top: 200px;
		}
	}

	/*复杂规则 ( 百分比% )*/
	@keyframes myMove2{
		0%{
			background:repeating-radial-gradient(circle closest-side,white, #9cef1d 30%);
			margin-left: 50px;
			margin-top: 20px;
		}
		40%{
			background:repeating-radial-gradient(circle closest-corner,white,#9cef1d 30%);
			margin-left: 300px;
			margin-top: 100px;
		}
		70%{
			background:repeating-radial-gradient(circle closest-side,white,#9cef1d 30%);
			margin-left: 100px;
			margin-top: 200px;
		}
		100%{
			background:repeating-radial-gradient(circle closest-corner,white,#9cef1d 30%);
			margin-left: 50px;
			margin-top: 20px;
		}
	}

	@keyframes Change {
		0%{
			transform: rotateZ(0deg);
		}
		50%{
			transform: rotateZ(180deg);
		}
		100%{
			transform: rotateZ(360deg);
		}
	}
</style>
<div class="box"></div>

效果:
在这里插入图片描述

background 渐变 ( 线性渐变 \ 径向渐变 )

可以使（至少）两个或多个 指定的颜色之间显示平稳的过渡，CSS3定义两种类型的渐变：一种是 线性渐变， 即 向下 / 向上 / 向左 / 向右 / 对角方向；另一种是 径向渐变，及由中心定义

线性渐变

/* 语法 */
background:linear-gradient(to direction, color1, color2,...)

direction 指明线性渐变的方向，默认是从上到下。渐变方向上可以做更多的控制，可以定义一个 deg 角度，而不用预定义方向 ( to bottom 、to top 、 to right 、to left 、to bottom right ) 等等。color 后可以跟设置颜色显示到什么范围 % 或 px ，与颜色用空格隔开

<style>
	div{
	width: 150px;height: 150px;display: inline-block;margin: 10px;
	}
	.one{
		background: linear-gradient(#dbff00,#0d6efd);
	}
	.two{
		background: linear-gradient(to right,#dbff00,#0d6efd);
	}
	.three{
		background: linear-gradient(to bottom right,#dbff00,#0d6efd);
	}
	.four{
		background: linear-gradient(80deg,#dbff00 20%,#0d6efd 40%);
	}
	.five{
		background: linear-gradient(-80deg,#dbff00 30%,#0d6efd 80%);
	}
</style>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>

效果:
在这里插入图片描述

<style>
	div{
		width: 700px;height: 150px;
		background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
	}
</style>
<div></div>

效果:
在这里插入图片描述
CSS 渐变还支持透明度，也可用于创建渐变效果。如需添加透明度，我们使用 rgba() 函数来定义色标

<style>
	div{
		width: 700px;height: 150px;
		background-image: linear-gradient(to right,rgb(15, 213,0, 0), rgb(173, 255,47, 1));
	}
</style>
<div></div>

效果:
在这里插入图片描述
重复线性渐变

/* 语法 */
background-image: repeating-linear-gradient(方向或角度, color1, color2,...);

<style>
	div{
		width: 700px;height: 150px;
		background-image: repeating-linear-gradient(60deg,white, rgb(217, 47, 255,0.2) 10%);
	}
</style>
<div></div>

效果:
在这里插入图片描述
径向渐变

/* 语法 */
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

默认情况下，渐变的中心是 center（表示在中心点）。必须至少定义两个颜色节点。shape 参数定义形状，默认值是ellipse ；取值可以是 circle ( 圆形 ) 或 ellipse ( 椭圆形 )。size 设置扩散的最远距离 ( closest-side：半径长度为从圆心到离圆心最近的边。farthest-side：半径长度为从圆心到离圆心最远的边。closest-corner：半径长度为从圆心到离圆心最近的角。farthest-corner：半径长度为从圆心到离圆心最远的角 ) 。position 用于指定渐变的圆心位置 ( 水平方向位置，垂直方向位置 )。

<style>
	div{
		width: 700px;height: 150px;
		background-image: radial-gradient(#0022ff, #858585, #6fa915, yellow, black);
	}
</style>
<div></div>

效果:
在这里插入图片描述

不同间距的色标和形状

<style>
	div{
		width: 700px;height: 150px;
		background-image: radial-gradient(circle, #0022ff, #858585 10%, #6fa915 50%,yellow,black);
	}
</style>
<div></div>

效果:
在这里插入图片描述
不同的扩散半径距离关键字

<style>
	body::after{
		content: "";
		display: block;
		clear: both;
	}
	div{
		width: 300px;height: 150px;
		margin: 10px 10px;float: left;
	}

	/* 不同扩散半径的对比 */
	div:nth-of-type(1){
		background-image: radial-gradient(circle closest-side at 70% 55%, red, yellow, black);
	}
	div:nth-of-type(2){
		background-image: radial-gradient(circle farthest-side at 70% 55%, red, yellow, black);
	}
	div:nth-of-type(3){
		background-image: radial-gradient(circle closest-corner at 70% 55%, red, yellow, black);
	}
	div:nth-of-type(4){
		background-image: radial-gradient(circle farthest-corner at 70% 55%, red, yellow, black);
	}
</style>
<div></div>
<div></div>
<div></div>
<div></div>

效果:
在这里插入图片描述
重复径向渐变

/* 语法 */
background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);

<style>
	div{
		width: 700px;height: 150px;
		background-image: repeating-radial-gradient(at 20% 60%, #ffffff, #e9defa 10%, #fbfcdb 20%);
	}
</style>
<div></div>

效果:
在这里插入图片描述



只有当首尾两颜色位置不在 0% 或 100% 时，重复渐变才生效 ( 占满了就没法重复了 ) 。由于位置处于 100% 的色标有时并不会占满渐变区域，则浏览器会默认使用最后一个色标的颜色铺满渐变区域 ( 未使用重复渐变且扩散距离未铺满渐变区域的情况下 ) 。渐变函数的结果是 gradient 数据类型的对象， 是一种特殊的 image 类型

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

树上前缀和详解

树上前缀和详解

零、前言 关于前缀和&#xff1a; 前缀和详解&#xff0c;朴素前缀和&#xff0c;前缀和变形&#xff0c;二维前缀和_前缀积-CSDN博客 关于LCA&#xff1a; LCA算法-倍增算法_lca倍增算法-CSDN博客 LCA算法-Tarjan算法_lca数组-CSDN博客 树链剖分——重链剖分&#xff0c…
阅读更多...
IGZO基底无电容DRAM单元前景看好

IGZO基底无电容DRAM单元前景看好

1.DRAM技术简介 DRAM&#xff08;Dynamic Random Access Memory&#xff0c;动态随机存取存储器&#xff09;是一种用于计算机和其他电子设备中的主存储器类型&#xff0c;其主要由存储单元阵列构成&#xff0c;而每一个存储单元由一个电容器和一个晶体管组成&#xff0c;如图…
阅读更多...
自动驾驶热成像物体检测数据集-热成像数据集-汽车行人热成像数据集

自动驾驶热成像物体检测数据集-热成像数据集-汽车行人热成像数据集

标签 物体检测fila data set模型 类别 (4) 自行车汽车狗人 度量指标 平均精度均值 (mAP)&#xff1a;88.8%准确率 (Precision)&#xff1a;92.0%召回率 (Recall)&#xff1a;78.9% 尝试此模型 上传一张图片或者从您的设备中选择 描述 自动驾驶热成像物体检测 概述 该…
阅读更多...
重回1899元，小米这新机太猛了

重回1899元，小米这新机太猛了

如果不出意外&#xff0c;距离高通年度旗舰骁龙 8 Gen4 发布还剩下不到一个月时间。 对于以小米 15 为首即将到来的下半年各家旗舰机型厮杀画面&#xff0c;讲道理小忆早已是备好瓜子儿摆上果盘翘首以盼了。 不过在这之前&#xff0c;中端主流选手们表示有话要说&#xff1a;为…
阅读更多...
React UI组件库推荐

React UI组件库推荐

Next UI&#xff1a;Vite | NextUI - Beautiful, fast and modern React UI Library Ant Design&#xff1a;Ant Design - 一套企业级 UI 设计语言和 React 组件库
阅读更多...
Kafka系列之：安装使用kafka_exporter详细步骤

Kafka系列之：安装使用kafka_exporter详细步骤

Kafka系列之：安装使用kafka_exporter详细步骤 一、kafka_exporter二、下载kafka_exporter三、理解Topic Metrics指标四、理解Consumer Groups Metrics指标五、启动kafka_exporter六、查看页面七、systemctl托管服务一、kafka_exporter kafka_exporter源码kafka_exporter下载页…
阅读更多...
【大模型对话 的界面搭建-Open WebUI】

【大模型对话 的界面搭建-Open WebUI】

Open WebUI 前身就是 Ollama WebUI&#xff0c;为 Ollama 提供一个可视化界面&#xff0c;可以完全离线运行&#xff0c;支持 Ollama 和兼容 OpenAI 的 API。 github网址 https://github.com/open-webui/open-webui安装 第一种 docker安装 如果ollama 安装在同一台服务器上&…
阅读更多...
餐饮平价时代到来，价格战只是开始

餐饮平价时代到来，价格战只是开始

餐饮正在变天。 “‘活得好’要排在第一位&#xff0c;‘做大做强’往后排。”9月25日&#xff0c;西贝餐饮董事长贾国龙在某餐饮行业论坛上透露&#xff0c;上周与海底捞创始人张勇通电话聊了15分钟&#xff0c;一致认为现在要保利润率&#xff0c;而不是保增长率。 2021年开…
阅读更多...
babylon.js-1：入门篇

babylon.js-1：入门篇

最近项目中使用到了 Babylon.js 这门技术&#xff0c;从今天开始&#xff0c;抽取自己写的比较好的拿出来&#xff0c;作为分享案例&#xff1a; 记录学习成果通过笔记的方式记录技术积累方便工作中查找翻阅实现案例 是什么 Babylon.js是一个基于WebGL的开源3D渲染引擎&…
阅读更多...
为什么优秀的工厂更重视生产现场

为什么优秀的工厂更重视生产现场

在日本的企业界&#xff0c;“现场”这个词就如同“改善”一样&#xff0c;被管理者普遍使用。优秀的公司&#xff0c;总是把“现场”摆在组织的最顶端&#xff0c;表示对它的重视。 组织中的各个阶层——高级管理阶层、中级管理阶层、工程师和现场督导人员&#xff0c;都是因…
阅读更多...
javascript promise的使用

javascript promise的使用

Promise是异步编程的一种解决方案。 它能优雅的方式来处理异步操作&#xff0c;避免产生回调地狱&#xff0c;这样的代码难看而且不容易维护。 普通方式调用&#xff1a;处理异常的时候&#xff0c;用逗号隔开 链式调用&#xff1a; // 1.使用setTimeout// setTimeout(() >…
阅读更多...
postman发送与返回，GET与POST使用

postman发送与返回，GET与POST使用

1.GET 获取主页 发送&#xff1a; uri: ‘/’ 返回&#xff1a; 2.POST 发送密码 发送&#xff1a; uri: ‘/login.html’ 返回&#xff1a; 3.POST 保存参数 发送&#xff1a; 返回&#xff1a; 4.GET 获取参数 在POST密码之后&#xff0c;服务器发送一个H…
阅读更多...
c语言手撕内存池组件

c语言手撕内存池组件

内存池是什么&#xff1f; 内存池&#xff08;Memory Pool&#xff09;是一种内存管理技术&#xff0c;它预先分配一大块内存&#xff0c;然后将其分成多个固定大小的小块。这些小块被组织起来&#xff0c;用于程序在运行期间频繁进行的内存分配和释放操作。内存池通过创建一个…
阅读更多...
精选10个热门目标检测数据集

精选10个热门目标检测数据集

目标检测&#xff08;Object Detection&#xff09;的任务是找出图像中所有感兴趣的目标&#xff08;物体&#xff09;&#xff0c;确定它们的类别和位置&#xff0c;是计算机视觉领域的核心问题之一&#xff0c;也是近年来研究数量以及应用范围较为广泛的一个领域。在对自动化…
阅读更多...
出海快报 | 爆款休闲手游半年爆增3倍，《无尽冬日》海外版累计收入破10亿美元

出海快报 | 爆款休闲手游半年爆增3倍，《无尽冬日》海外版累计收入破10亿美元

TopOn出海快报栏目为互联网出海从业者梳理每周出海热点&#xff0c;最值得关注的 Top 5 出海新闻&#xff0c;供大家了解行业最新发展态势。 SLG超级爆款《无尽冬日》海外版累计收入破10亿美元 手游市场分析公司Sensor Tower最近发文称&#xff0c;《Whiteout Survival》累计&a…
阅读更多...
2024年【茶艺师（高级）】考试资料及茶艺师（高级）考试总结

2024年【茶艺师（高级）】考试资料及茶艺师（高级）考试总结

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 茶艺师&#xff08;高级&#xff09;考试资料考前必练&#xff01;安全生产模拟考试一点通每个月更新茶艺师&#xff08;高级&#xff09;考试总结题目及答案&#xff01;多做几遍&#xff0c;其实通过茶艺师&#xf…
阅读更多...
怎么做二维码预览文件？文件长期扫码展示的制作技巧怎么做二维码预览文件？文件长期扫码展示的制作技巧

怎么做二维码预览文件？文件长期扫码展示的制作技巧怎么做二维码预览文件？文件长期扫码展示的制作技巧

在日常生活中每天都会接触不同类型的文件&#xff0c;想要快速将文件与其他人共享&#xff0c;可以将文件生成二维码&#xff0c;让其他人通过扫码来预览或者下载文件。二维码的优势在于能够长期存储文件&#xff0c;简化其他人获取文件的流程&#xff0c;而且能够随时替换文件…
阅读更多...
美业系统哪个好用？美业SAAS系统管理系统收银系统怎么选择？

美业系统哪个好用？美业SAAS系统管理系统收银系统怎么选择？

当选择美业收银系系统管理系统时&#xff0c;有几个关键因素需要考虑&#xff1a; • 功能全面性&#xff1a; 确保系统能够满足您店铺的所有需求&#xff0c;包括但不限于预约管理、客户关系管理、库存管理、员工排班、销售报表等。您需要评估系统是否提供了您所需的所有功能…
阅读更多...
Simple Calculator(简单计算器：算法初阶，代码基础，“纯”手撕)

Simple Calculator(简单计算器：算法初阶，代码基础，“纯”手撕)

简单计算器&#xff1a;仅适用无括号加减乘除&#xff0c;算法初阶&#xff0c;代码基础&#xff0c;不调库或模块“纯”手撕。 (笔记模板由python脚本于2024年09月22日 12:08:02创建&#xff0c;本篇笔记适合喜欢用python解决实际问题的coder翻阅) 【学习的细节是欢悦的历程】…
阅读更多...
负载均衡--相关面试题（六）

负载均衡--相关面试题（六）

在负载均衡的面试中&#xff0c;可能会遇到一系列涉及概念、原理、实践应用以及技术细节的问题。以下是一些常见的负载均衡面试题及其详细解答&#xff1a; 一、什么是负载均衡&#xff1f; 回答&#xff1a;负载均衡是一种将网络请求或数据传输工作分配给多个服务器或网络资源…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023