渐变背景色动画
渐变色背景是不能通过 纯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>
css
img {
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>
css
img {
width: 100px;
height: 100px;
float: left;
shape-outside: url(../../assets/xin.gif);
}