不建议跳跃阅读!
这篇文章将从头开始介绍如何实现一个特效
中间偶尔会穿插一些css3或平时接触不多的css属性
首先看一看这一期的特效:
HTML部分
<h1 class="gradient-text">Welcome! 黑猫几绛!<h1></h1>
CSS部分
前面两期我们使用的是grid布局
的方式让元素在页面上垂直水平居中,这一期使用flex布局
:
body {
height: 100vh;
width: 100vw;
background-color: #FBF8F1;
display: flex;
align-items: center;
justify-content: center;
}
然后为h1文字
设置基本样式:
h1 {
font-family: 'Poppins', sans-serif;
font-size: 15vmin;
line-height: 20vmin;
}
好,现在我们来为文字添加一些样式。
background-clip
平时为文字添加颜色样式时,可能直接使用color
属性进行设置,此时设置的颜色是单调的。
思路:我们可以将文字设为透明字体,为文字所在的区域设置花样的背景颜色,最后通过使用background-clip:text
对背景进行裁剪,仅仅留下文本部分的背景即可。
按照这个思路来进行一些编码:
.gradient-text {
color: transparent;
background: #f79f51;
background-size: 50%;
background-clip: text;
-webkit-background-clip: text;
}
看一看效果:
很好!样式成功的展示出来了!
如果说我们想要一种渐变色的文字,改变渐变的背景颜色即可:
.gradient-text {
color: transparent;
background: linear-gradient(45deg, #f79f51, #efff96);
background-size: 50%;
background-clip: text;
-webkit-background-clip: text;
}
看一看效果:
注意:background-clip: text
的兼容性并不好,所以如果浏览器不兼容该属性,所有的背景区域都会直接显示出来。
还是上面的代码,通过ie打开文件的话,样式就会很扭曲:
为了避免这样不兼容的情况发生,我们可以采用css的特征检测选择器@supports
@supports
CSS at-rule 您可以指定依赖于浏览器中的一个或多个特定的CSS功能的支持声明。这被称为特性查询。
.gradient-text {
color: #f79f51;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
.gradient-text {
color: transparent;
background: linear-gradient(45deg, #f79f51, #cde446);
background-size: 50%;
background-clip: text;
-webkit-background-clip: text;
}
}
此时在ie中就可以显示默认设置的color: #f79f51;
,chrome中显示的则是渐变的背景颜色。
其实在写特效时候,非常注重兼容性的问题,总不能说我们写出来了某种特效,在自己的浏览器上可以成功展示,但是在其他人访问时看起来非常的扭曲,所以可以访问这个网站:can i use来看看,浏览器可以支持哪些属性。
现在来试试为文字背景设置更好看的背景颜色,不过在这之前还需要了解一个属性。
conic-gradient
较为常见的渐变色有linear-gradient(线性渐变)
、radial-gradient(径向渐变)
,这次介绍的conic-gradient
是圆锥渐变,它渐变的起始点是图形中心,渐变方向以顺时针方向绕中心旋转实现渐变效果。
语法:
conic-gradient( [ from ]? [ at ]?, )
可以看出锥形渐变由3部分组成:
- 起始角度
- 中心位置
- 角渐变断点
这里引用张鑫旭大神的博客来介绍:
起始角度和中心位置都是可以省略的,因此,最简单的锥形渐变用法如下,使用我最爱的深天空蓝色:
.example { width: 300px; height: 150px; background-image: conic-gradient(white, deepskyblue); }
效果如下图所示:
上图具体渲染的细节我专门做了个图标注了下,方便大家学习,如下所示:
上面的原理示意图究竟正不正确呢?
我们不妨修改几个参数值,例如改变下起始角度和中心位置,看看锥形渐变效果是怎样的,例如:
conic-gradient(from 45deg at 25% 25%, white, deepskyblue);
结果渐变起始角度改成45度,中心点位置移动到相对元素左上角25%的位置,效果如下图所示。
锥形渐变的颜色断点
锥形渐变的颜色断点数据类型是
<angular-color-stop-list>
,顾名思义是角颜色断点列表,有别于线性渐变和径向渐变的断点列表,使用的是角度值,而非长度值。例如:
conic-gradient(white, deepskyblue 45deg, white);
deepskyblue 45deg
这里使用的是'45deg'
是个角度值,于是仰望鑫空间,可以明显看到2点钟方向的颜色最深。需要注意的是,角渐变断点中设置的角度值是一个相对角度值,最终渲染的角度值是和起始角度累加的值,例如:
conic-gradient(from 45deg, white, deepskyblue 45deg, white);
此时
deepskyblue
实际渲染的坐标角度是90deg(45deg + 45deg)
,效果如图下图所示,可以明显看到3点钟方向的颜色最深。
知道这些就可以了,现在我们利用刚刚学到的练练手,动手实现一下饼状图:
.round{
width: 100px;
height: 100px;
border-radius: 50%;
/**
* 首先从竖直方向顺时针转动40% * 360deg,这片区域为紫色
* 然后从 40% * 360deg + 0deg 开始顺时针转动 40% * 360deg,这片区域为粉色
* 最后从 40% * 360deg + 0deg + 0deg 开始开始顺时针转动,这片区域为蓝色
*/
background: conic-gradient(#BAABDA 40%, #FFCBCB 0deg 75%, #B5DEFF 0deg);
}
看一看效果:
其实在实现了这个饼状图后发现,这个和我们这期的特效配色已经非常接近了,向元素中多添加一些颜色后就可以实现本期特效:
.gradient-text {
color: transparent;
background: conic-gradient(
#D9D7F1 12%,
#BAABDA 12%, #BAABDA 33%,
#E7FBBE 33%, #E7FBBE 55%,
#FFCBCB 55%, #FFCBCB 70%,
#B5DEFF 70%, #B5DEFF 87%,
#F7D1BA 87%);
background-size: 50%;
background-clip: text;
-webkit-background-clip: text;
}
搞定,看看最终的效果吧:
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
background-color: #FBF8F1;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-family: 'Poppins', sans-serif;
font-size: 15vmin;
line-height: 20vmin;
}
.gradient-text {
color: transparent;
background: conic-gradient(
#D9D7F1 12%,
#BAABDA 12%, #BAABDA 33%,
#E7FBBE 33%, #E7FBBE 55%,
#FFCBCB 55%, #FFCBCB 70%,
#B5DEFF 70%, #B5DEFF 87%,
#F7D1BA 87%);
background-size: 50%;
background-clip: text;
-webkit-background-clip: text;
}
</style>
</head>
<body>
<h1 class="gradient-text">Welcome! 黑猫几绛!<h1></h1>
</body>
</html>
思考
这一期中我们学到了conic-gradient
,根据圆锥渐变的效果,可以实现仪表盘的设计吗?
提示:会用到上一期介绍过的transform-origin
属性
效果如下:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bg {
position: relative;
margin: 50px auto;
width: 400px;
height: 400px;
border-radius: 50%;
background: conic-gradient(#f1462c 0%, #fc5d2c 12.4%, #fff 12.5%, #fff 12.5%, #fc5d2c 12.5%, #fba73e 24.9%, #fff 24.9%, #fff 25%, #fba73e 25%, #e0fa4e 37.4%, #fff 37.4%, #fff 37.5%, #e0fa4e 37.5%, #12dd7e 49.9%, #fff 49.9%, #fff 50%, #12dd7e 50%, #0a6e3f 62.4%, #fff 62.4%, #fff 62.5%);
transform: rotate(-112.5deg);
transform-origin: 50% 50%;
}
.bg::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px;
height: 350px;
border-radius: 50%;
background: #fff;
}
.bg::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
border-radius: 50%;
background:
radial-gradient(#fff 0%, #fff 25%, transparent 25%, transparent 100%),
conic-gradient(#f1462c 0, #f1462c 12.5%, #fba73e 12.5%, #fba73e 25%, #e0fa4e 25%, #e0fa4e 37.5%, #12dd7e 37.5%, #12dd7e 50%, #0a6e3f 50%, #0a6e3f 62.5%, #fff 62.5%, #fff 100%);
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>