前言
CSS渐变包括线性渐变、径向渐变、圆锥形渐变,这篇文章简单记录一下对渐变的学习,同时给出一些例子和优秀文章
这两个渐变主要是用在background-image
中实现背景的渐变,两种渐变都支持多组渐变的叠加
线性渐变
语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction
:线性渐变的方向,默认从上到下,常用值有:to bottom(从上往下)
、to top(从下往上)
、to bottom right(从左上到右下)
等- color-stopn : 渐变的颜色值,颜色值后面可以加上一个百分比的值,表示这个颜色中心线的位置或者用px之类的
background-image: linear-gradient(angle, color-stop1, color-stop2);
除了使用预定义的方向,也可以定义一个角度
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
渐变还支持重复渐变
实例
从左到右实现渐变
.main {
width: 100%;
height: 100%;
background-image: linear-gradient(to right, red 10%, yellow 90%);
}
上面表示 red中心线是10%的位置,yellow中心线是90%的位置;0~10%是red,10%~90%是red和yellow,90%~100%是yellow
基于线性渐变实现文字渐变
代码及原理:css文字效果
线性渐变模拟长阴影
参考文章:线性渐变模拟长阴影
原理
- 借助
before和 after
两个伪元素生成两个侧面 - 通过线性渐变来填充伪元素,形成阴影
先做两个面
//顶部的平面
.top{
width: 120px;
height: 120px;
background: #fff;
position: relative;
//前面的面
&::before{
content: 'before';
width: 122px;
height: 120px;
background: #81CCEE;
//调整一些位置,必须加上定位
position: absolute;
//通过平移和倾斜,来调整位置
transform: translateY(120px) skewX(45deg) translateX(58px);
}
}
右侧那个面同理
通过线性渐变实现阴影,完整代码
<template>
<div class="main">
<div class="top"></div>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {},
methods: {}
};
</script>
<style scoped lang="scss">
.main {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
background: #03A3ED;
}
//顶部的平面
.top{
width: 120px;
height: 120px;
background: #fff;
position: relative;
//前面的面
&::before{
content: '';
width: 122px;
height: 120px;
//调整一些位置,必须加上定位
position: absolute;
//通过平移和倾斜,来调整位置
transform: translateY(120px) skewX(45deg) translateX(58px);
//渐变
background: linear-gradient(90deg, rgba(0, 0, 0,0.3), transparent);
}
//右侧的面
&::after{
content: '';
width: 122px;
height: 120px;
position: absolute;
transform: translateX(120px) skewY(45deg) translateY(63px);
background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent);
}
}
</style>
跟实例有不小差别,看着没人家的舒服😂
线性渐变配合阴影实现条纹立体阴影条纹字
代码及原理:css文字效果
线性渐变线条 border 效果
效果地址:线性渐变线条 border 效果
网格
<div class="main"></div>
.main {
width: 100%;
height: 100%;
background: #FEFAE2;
position: relative;
&::before{
position: absolute;
width: 100%;
height: 100%;
content: '';
background: -webkit-linear-gradient(top, transparent 40px, #ddd 42px),
-webkit-linear-gradient(left, transparent 40px, #ddd 42px);
background-size: 42px 42px;
}
}
径向渐变
语法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
- shape :形状,有
circle (圆)
、ellipse(椭圆)
,不用这两个值的话也可以用半径来代替,一个半径是圆,两个半径是椭圆 - size:大小,值有
closest-side(最近的边)
、farthest-side(最远的边)
、closest-corner(最近的角)
、farthest-corner(最远的角)
- at position:圆心的位置,默认是
center(中心点)
,其他值有left
、top right
或者写两个点的位置,比如0px 0px
- start-color:渐变颜色,至少定义两种颜色,同线性渐变一样支持百分比或者px等设置中心线位置
实例
通过径向渐变实现一个内切角
.item1 {
width: 100%;
height: calc(50% - 10px);
margin-bottom: 10px;
background-image:radial-gradient(50px at left top,transparent 50%,blue 50%);
}
50px是半径,表示是圆;大小可以省略;位置是左上角;渐变从透明到蓝色
通过径向渐变实现多个内切角
.item2 {
width: 100%;
height: calc(50% - 10px);
background-image: radial-gradient(50px at left top,transparent 50%,blue 50%),
radial-gradient(50px at right top,transparent 50%,blue 50%),
radial-gradient(50px at left bottom,transparent 50%,blue 50%),
radial-gradient(50px at right bottom,transparent 50%,blue 50%);
background-position: left top,right top,left bottom , right bottom;
background-size: 50% 50%;
background-repeat: no-repeat;
}
多个内切角的话需要注意:多个颜色渐变叠加时角会被覆盖,所以必须加上background-position、background-size、 background-repeat
;背景的位置要和渐变的位置一致,背景大小也要设置的小一点,背景设置为不重复
径向渐变实现优惠券波浪造型
效果地址:径向渐变实现优惠券波浪造型
径向渐变实现舞台灯光聚焦效果
效果地址:径向渐变实现舞台灯光聚焦效果
圆锥渐变
圆锥渐变的起始点是图形中心,渐变方向以顺时针方向绕中心旋转实现渐变效果。
备注:有些浏览器可能不支持
基础语法
background: conic-gradient(颜色1, 颜色2,....); // basic demo
实例
background-image: conic-gradient(red,blue);
可以看出从12点方向开始,按照顺时针的属性实现渐变,比例会按照颜色值的个数平分
高级用法
可以设置起始角度,圆心位置,每种颜色的中心线位置(中心线在线性渐变里提到过)
备注:起始角度和圆心可以省略,默认就是中心点和12点位置
background: conic-gradient(from 60deg at 20% 20%, green 40%, orange 40%);
实例
饼图
.main{
width: 100%;
height: 100%;
//裁剪出一个圆形
// clip-path: circle(30% at 50% 50%);
background-image: conic-gradient(red 0%, red 30% , yellow 30% ,yellow 70% , blue 70%, blue 100%)
}
简单说一下原理,看下面这个未裁剪的图,主要是用到了中心线这个知识
red 0%, red 30%
这个表示 0%
的左右两侧是红色,30%
的左右两侧是红色,这样就保证了0%~30%
这个区间是红色,又因为后面的颜色值会覆盖前面的颜色值,所以最终效果如下图
- 未裁剪的图
- 裁剪后的图
边框效果
还是基于上面的饼图例子,加上一个动画
原理:外圈跟上面的饼图一样,就是加了个旋转动画;内圈盒子的大小和外圈盒子的大小一样,内圈再裁剪出一个圆,加上个背景颜色就好了
<!-- 外圈 -->
<div class="main">
<!-- 内圈 -->
<div class="center"></div>
</div>
//外圈
.main {
width: 100%;
height: 100%;
position: relative;
clip-path: circle(30% at 50% 50%);
background-image: conic-gradient(
red 0%,
red 30%,
yellow 30%,
yellow 70%,
blue 70%,
blue 100%
);
animation: move 3s infinite linear;
}
@keyframes move {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
//内圈
.center {
width: 100%;
height: 100%;
position: absolute;
background: black;
clip-path: circle(25% at 50% 50%);
}
效果
角向渐变线条 border 效果
效果地址:角向渐变线条 border 效果
角向渐变实现光影 border 效果
效果地址:角向渐变实现光影 border 效果
角向渐变实现纯 CSS 圆环进度图
效果地址:角向渐变实现纯 CSS 圆环进度图
一行代码重复角向渐变代码实现酷炫图案
效果地址:一行代码重复角向渐变代码实现酷炫图案