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

渐变背景色动画

渐变色背景是不能通过纯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 (mozilla.org)

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

如何使用纯 CSS 创建翻牌动画
下面的示例向您展示了如何使用纯 CSS 创建翻牌动画. 作者:坚果公众号:"大前端之旅" 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GV ...
html怎么让图标动起来,让ICON生动起来纯CSS实现带动画的天气图标
让ICON生动起来纯CSS实现带动画的天气图标 1月 20, 2016 评论 (1) Sponsor CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都 ...
[css] 使用纯CSS代码实现动画的暂停与播放
[css] 使用纯CSS代码实现动画的暂停与播放一个属性:animation-play-state 取值:paused(暂停)|running(播放) hover取代点击 .stop:hover~. ...
HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白
HTML5纯css实现爱心动画效果DW来自程序员的浪漫表白一.拉面版 css部分 *{/* 初始化页面元素内外边距*/margin:0;padding: 0;}body{/* 弹性布局元素垂直水平居 ...
html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标
CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...
css纯加载动画,纯CSS实现loading动画加载效果
原标题:纯CSS实现loading动画加载效果 loading动画图标的做法有很多.一般不想麻烦的人直接嵌入一张gif的动态图标即可实现!虽然该方法方便快捷,但是对网站的加载速度优化方面还不是最好,制 ...
css滤镜属性渐变_使用滤镜对CSS渐变进行动画处理
css滤镜属性渐变 Officially, gradients can't yet be animated. However, using CSS filters, you can animate t ...
html顺序进场动画,十六种炫酷纯css加载动画（一）
一个好的开篇,会给你这个项目增加不少分值. 有没有遇到过打开页面加载一段时间,页面内容才加载出来.在等待加载的过程中页面却是空白页,给用户的体验特别不好,会让项目降一个档次.下面的十六种炫酷炸裂的cs ...
纯css渐变在线生成,Color gradient generator：在线渐变色CSS代码生成小工具
渐变色彩在视觉上可以产生层次感,这对常看单一颜色的人来说,会更加有吸引力,以往要做出渐变色,设计师都会倾向于使用图片,原因在于各家浏览器对 CSS 所支持的程度不相同,造成观感不佳的问题. 而如今浏览 ...

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

渐变背景色动画

文字贴合环绕图片

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

最新文章

热门文章

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

渐变背景色动画

文字贴合环绕图片

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

最新文章

热门文章

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

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