纯css 渐变背景色动画文字贴合环绕图片

最新推荐文章于 2024-04-30 09:57:30 发布

paidaboluo

最新推荐文章于 2024-04-30 09:57:30 发布

阅读量252

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/paidaboluo/article/details/126677337

版权

渐变背景色动画

渐变色背景是不能通过纯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);
}