一直知道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%; } }如下图: