background-color实现渐变过渡

css径向渐变

* {margin: 0;padding: 0;
}
.box {max-width: 400px;height: 200px;background: red linear-gradient(to right, rgba(0,255,0,0), rgba(0,255,0,.5));background-size: 200%;transition: background-color .5s;
}.box:hover {background-color: purple;
}

html

<div class="box">
</div>

---------------------------2020/06/02扩展圆形渐变

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 300px;height:300px;background: #fff radial-gradient(rgba(0,0,0,.1), green);transition: background-color .5s;}.box:hover {background-color: red;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

--------------------------2020/06/03扩展-背景透明度设置

当背景色需要淡化时的样式设置

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><style>.box0{background: #f00;}.box1{background: #f00;opacity: 0.5;}.box2{background: rgba(255,0,0,.5);}</style>
</head>
<body><div class="box0"><h1>我是东，我的背景需要淡一点</h1></div><div class="box1"><h1>用opacity设置透明度时，这里的文字颜色跟着变淡了</h1></div><div class="box2"><h1>用background设置透明度时，这里的文字颜色不变</h1></div></body>
</html>

--------------------------2020/06/03扩展（旋转）-背景网格效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>渐变色背景（线性梯度）</title><style>.div2{height: 100px;background: linear-gradient(135deg,transparent 0,transparent 49.5%,red 49.5%,green 50.5%,transparent 50.5%,transparent 100%),linear-gradient(45deg,transparent 0,transparent 49.5%,#024 49.5%,red 50.5%,transparent 50.5%,transparent 100%);background-size: 25px 25px;}</style>
</head>
<body><div class="div2"></div>
</body>
</html>

background-color实现渐变过渡相关推荐

[css] 如何给文字的color设置渐变
[css] 如何给文字的color设置渐变 .text {background: -webkit-linear-gradient(#eee, #333);-webkit-background-clip ...
渐变过渡的相册（shader）
相册是一个大家比较熟悉的场景,一般我们是实现的都是那种跑马灯式的轮播相册,这里异名给大家提供一个利用shader实现图片渐变过渡的相册思路 demo 实现思路拆分一下功能点,主要有两个:一个是实现图 ...
13渐变过渡动画利用多张图片制作动图
13渐变过渡动画利用多张图片制作动图一.渐变线性渐变设置普通渐变background:linear-gradient(颜色1,颜色2)设置渐变比例background:linear-gra ...
R语言ggplot2在可视化图像中添加横线并在横线中添加文本、为横线中添加的文本添加文本框、自定义文本框的填充色（background color for a text annotation）
R语言ggplot2在可视化图像中添加横线并在横线中添加文本.为横线中添加的文本添加文本框.自定义文本框的填充色(background color for a text annotation) 目录
R语言ggplot2可视化自定义可视化结果的背景色（background color）实战：改变整个画板（panel）的背景色、改变图像（plot）区域的背景色
R语言ggplot2可视化自定义可视化结果的背景色(background color)实战:改变整个画板(panel)的背景色.改变图像(plot)区域的背景色目录
Python使用matplotlib可视化自定义背景色实战：自定义可视化图像的背景色（Background Color）
Python使用matplotlib可视化自定义背景色实战:自定义可视化图像的背景色(Background Color) 目录
html body background color,HTML Style backgroundColor用法及代码示例
HTML DOM中的backgroundColor属性用于设置或返回元素的背景色. 用法: object.style.backgroundColor 它返回元素的背景色. object.style.b ...
文字color颜色渐变（可一直变换） - 代码篇
文字color颜色渐变(可一直变换) - 代码篇一.应用场景 · 举例: https://www.iconfont.cn/ 站内的 [字体图标][如下图1所示] 某些客户要求的 "炫酷拽& ...
jQuery获取div的背景颜色 How to get background color of div?
直接代码: <script type="text/javascript"> $(document).ready(function(){$("div" ...
CSS-0813(重复性)线性/径向渐变-过渡属性transition-变形属性transform变形位移旋转缩放倾斜视域函数perspective变形原点三角形居中方法
title: "CSS 0813-渐变&过渡&变形" date: 2022-08-15T09:43:28+08:00 文章目录 title: "CSS 0 ...

background-color实现渐变过渡

---------------------------2020/06/02扩展圆形渐变

--------------------------2020/06/03扩展-背景透明度设置

--------------------------2020/06/03扩展（旋转）-背景网格效果

background-color实现渐变过渡相关推荐

最新文章

热门文章