渐变背景色动画
渐变色背景是不能通过 纯css 动画设置的。所以换一种思路通过background-size 设置背景的大小，让我们渐变色背景一开始的时候不展示全部的背景，然后通过css动画改变background-position 改变背景的位置，来实现渐变颜色动画
设置渐变背景：
设置background-size: 200% 200%;
设置定义动画
div{animation: backgroundChange 4s ease alternate infinite;}@keyframes backgroundChange {0% {background-position: 0% 0%;}100% {background-position: 100% 100%;}}
完整代码
<div></div>div {width: 200px;height: 200px;background: linear-gradient(#0f4c82,#ed6663,#ffa372,#a8e6cf);background-size: 200% 200%;animation: backgroundChange 4s ease alternate infinite;}@keyframes backgroundChange {0% {background-position: 0% 0%;}100% {background-position: 100% 100%;}}
注： 记得先设置background-size 在设置background ，以为background会覆盖background-size，挺低级的错误但是不容易发现
文字贴合环绕图片
大家应该都用过文字环绕图片，直接给图片设置 float 即可
html<div><img src="../../assets/屏幕截图(6).png" alt="" /><p>这是一段很长的文字</p></div>cssimg {width: 100px;height: 100px;float: left;}
但是当我们需要文字环绕logo时，大部分logo并不是完整的 块状图片，会有一些镂空 空白的区域
这时候就需要我们设置一个shape-outside
这个属性 允许我们设置 元素的外轮廓，从而让文字贴合环绕， 支持 圆型：circle，多边形：polygon， 图片url
这里我们使用url 他会自动识别图片中空白的部分
html<div><img src="../../assets/xin.gif" alt="" /><p>这是一段很长的文字</p></div>cssimg {width: 100px;height: 100px;float: left;shape-outside: url(../../assets/xin.gif);}
文档：shape-outside - CSS（层叠样式表） | MDN ()
