游戏陪玩系统源码开发之css3实现背景几种渐变效果

最新推荐文章于 2022-12-29 21:35:52 发布

云豹科技程序猿

最新推荐文章于 2022-12-29 21:35:52 发布

阅读量1.2k

点赞数

分类专栏：游戏陪玩约单源码

原文链接：https://www.jianshu.com/p/a3019e2dd1a4

版权

游戏陪玩约单源码专栏收录该内容

158 篇文章 0 订阅

订阅专栏

在游戏陪玩系统源码内实现背景渐变，是非常潮流的一种开发设计，符合90后年轻一代的审美，css3的这个渐变目前主要是应用在手机前端领域。

游戏陪玩系统源码设计中使用渐变色的好处：
1：观众不至于眼睛过于疲劳（如果是浅色背景，3个小时下来极容易造成观众闭上眼睛还有残影，眼睛会极度疲劳）。
2：优雅而低调的深浅色调:
3：纯色单调，渐变色一是色彩不单调，二是在游戏陪玩系统源码有限空间内尽可能制造空间感
4：稍微加点渐变可以让纯色层显得更细腻，不那么单调。画面显得更丰富。

代码如下，非常简单

新的梯度渐变语法，新的语法包含四个渐变函数：

 linear-gradient()： 线性梯度渐变
    radial-gradient()： 径向梯度渐变
    repeating-linear-gradient()：重复梯度渐变
    repeating-radial-gradient()：色站

一：线性渐变 linear-gradient()：线性梯度渐变
图片.png

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>游戏陪玩系统源码开发之css3实现背景几种渐变效果</title>
<style type="text/css">
.linear{
/*仿支付宝背景蓝色渐变*/
background-image: linear-gradient(to top, #66b7f9,#1c82d4);
height: 15rem;
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>

二：radial-gradient径向渐变
图片.png

代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>游戏陪玩系统源码开发之css3实现背景几种渐变效果</title>
<style type="text/css">
.linear{

/*background-image: linear-gradient(to top, #66b7f9,#1c82d4);*/
background: radial-gradient(#ffffff,#1c82d4);
height: 15rem;
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>

三： repeating-linear-gradient()：重复梯度渐变
图片.png

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>游戏陪玩系统源码开发之css3实现背景几种渐变效果</title>
<style type="text/css">
.linear{


background: repeating-linear-gradient(#1c82d4, #fff 30%, #1c82d4 35%);
height: 15rem;
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>

四：repeating-radial-gradient()：色站
图片.png

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>游戏陪玩系统源码开发之css3实现背景几种渐变效果</title>
<style type="text/css">
.linear{


background: repeating-radial-gradient(#1c82d4, #fff 30%, #1c82d4 35%);
height: 15rem;
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>

/全兼容的移动端渐变写法/

/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #66b7f9,#1c82d4);
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear,top,from(#66b7f9),to(#1c82d4));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(top, #66b7f9, #1c82d4);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #66b7f9, #1c82d4);
/* default */
background: linear-gradient(top, #66b7f9, #1c82d4);
background-color: #1c82d4;

以上就是“游戏陪玩系统源码开发之css3实现背景几种渐变效果”的全部内容，希望对大家有帮助。

云豹科技程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
游戏陪玩系统源码开发之css3实现背景几种渐变效果

在游戏陪玩系统源码内实现背景渐变，是非常潮流的一种开发设计，符合90后年轻一代的审美，css3的这个渐变目前主要是应用在手机前端领域。游戏陪玩系统源码设计中使用渐变色的好处：1：观众不至于眼睛过于疲劳（如果是浅色背景，3个小时下来极容易造成观众闭上眼睛还有残影，眼睛会极度疲劳）。2：优雅而低调的深浅色调:3：纯色单调，渐变色一是色彩不单调，二是在游戏陪玩系统源码有限空间内尽可能制造空间感4：稍微加点渐变可以让纯色层显得更细腻，不那么单调。画面显得更丰富。代码如下，非常简单新的梯度渐变语法，新的
复制链接

扫一扫