一直知道css很强大,最近整理了一些
1、linear-gradient css 中的一个渐变的函数,用于创建一个表示两种或多种颜色线性渐变的图片
用在三个场景下:background, background-img, border-img
(1)background
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
// 左上角开始,颜色渐变
如下图:
(1)background-img
background-image: linear-gradient( red 10%, yellow 20%, blue);
如下图:
(3)border-img
width: 200px;
height: 200px;
border: 100px solid;
border-image-source: url(./timg.jpg);
border-image-slice: 400;
border-image-slice: 50;
border-image-slice: 200;
2、animation和上面linear-gradient联合起来,是的页面背景渐变且美观
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%; // 设置成400%很有必要
animation: gradient 15s ease infinite;
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
如下图: