一，效果展示

二，背景颜色的渐变与动画

1.背景颜色渐变

2.背景颜色的动态改变

三，字体样式与颜色的改变

1.字体样式的引入

2.设置字体颜色透明与背景

3.字体设置源码

四，背景泡泡的漂浮动画效果

1.使用径向渐变制作泡泡

2.泡泡漂浮动画

五，总结与源码

css样式：

html5：

一，效果展示

使用渐变和动画来制作这样的一个动态背景的页面。

分别设置了背景，字体和泡泡的漂浮动画，使得整个页面展示出一个颜色一直改变的效果。

二，背景颜色的渐变与动画

1.背景颜色渐变

设置背景从右下角到左上角一个蓝色到粉色的线性渐变。

 body{background-image:linear-gradient(-45deg, #2177b8 0%,#c35691 100%);}

效果：

2.背景颜色的动态改变

使用动画让背景改变，把背景的宽高设置变成300%，使用background-position属性和动画来改变背景的宽高，从而达到背景改变的效果。可以设置不同的背景尺寸使动画不同。

body{background-image:linear-gradient(-45deg, #2177b8 0%,#c35691 100%);background-size: 300% 300%;animation: zi 15s infinite both linear;}

 @keyframes zi{0%{background-position: 300% 300%;}33%{background-position: 0% 300%;}66%{background-position: 300% 0%;}100%{background-position: 300% 300%;}}

三，字体样式与颜色的改变

1.字体样式的引入

在网络上下载字体样式的压缩包，解压后使用@font-face来引用它，font-family: a;来设置它的名字，src：url来引用它的路径。

在设置文字的样式时，直接font-family: a;

@font-face{font-family: a;src: url(./0928img/ZhanKuXiaoLOGOTi/ZhanKuXiaoLOGOTi-2.otf);}

2.设置字体颜色透明与背景

设置-webkit-background-clip: text;裁剪字体，然后设置字体颜色为透明。

 -webkit-background-clip: text; color: transparent;

设置背景颜色渐变，背景大小设置为300%

 background-image:linear-gradient(-45deg, #084a7d 0%,#88084c 100%);background-size: 300% 300%;

设置背景动画并且引用动画。

@keyframes zi{0%{background-position: 300% 300%;}33%{background-position: 0% 300%;}66%{background-position: 300% 0%;}100%{background-position: 300% 300%;}}

animation: zi 6s infinite both linear;

3.字体设置源码

.qq{font-size: 35px;width: 450px;margin: 0 auto;font-family: a;-webkit-background-clip: text; color: transparent;background-image:linear-gradient(-45deg, #084a7d 0%,#88084c 100%);background-size: 300% 300%;animation: zi 6s infinite both linear;}@keyframes zi{0%{background-position: 300% 300%;}33%{background-position: 0% 300%;}66%{background-position: 300% 0%;}100%{background-position: 300% 300%;}}@font-face{font-family: a;src: url(./0928img/ZhanKuXiaoLOGOTi/ZhanKuXiaoLOGOTi-2.otf);}

四，背景泡泡的漂浮动画效果

1.使用径向渐变制作泡泡

宽高为100px，在距离左上角20px的位置设置渐变中心，依次是白色，粉色，蓝色和紫色，这样看起来泡泡是在左上角收到光源照射，并设置阴影，光照效果和光晕使泡泡效果更加美观逼真。

width: 100px;
height: 100px;
border-radius: 50%;
background-image: radial-gradient(at 20px 20px,white 0%,#f0ccd5 25%, #5a93cb 45%, #cf3ebe 100%);box-shadow: 0px 0px 8px 0px pink;

2.泡泡漂浮动画

 @keyframes run{0%{transform: translate(0px, 400px);}100%{transform: translate(0px, -1500px);}}

.kuai1{z-index: -1;position: absolute;top: 600px;left: 50px;width: 100px;height: 100px;border-radius: 50%;background-image: radial-gradient(at 20px 20px,white 0%,#f0ccd5 25%, #5a93cb 45%, #cf3ebe 100%);box-shadow: 0px 0px 8px 0px pink;animation: run 3s linear infinite;animation-delay: -1s;}

使用定位，把泡泡定位在页面下面位置，动画开始位置设置在页面下面400px的位置，使泡泡从页面下面飘出来，更加美观。

因为要设置多个泡泡向上漂浮的动画，所以设置泡泡的尺寸，位置，动画延时时间都不一样。

在最后给出不同泡泡的源码。

五，总结与源码

总结：

主要是渐变和动画效果，使用渐变来设置背景颜色，再配合background-position属性改变背景的大小，配合动画展示出一个背景在改变的效果。

字体设置-webkit-background-clip: text;后设置颜色为透明，再重复上面的东西达成字体渐变的效果。

泡泡是一个径向渐变配合动画，设置动画延时不同产生的依次漂浮向上的效果。

css样式：

 * {padding: 0;margin: 0;box-sizing: border-box;}body,html {margin: 0;height: 100%;display: flex;align-items: center;justify-content: center;overflow: hidden;/* background-color: #222; */}body{background-image:linear-gradient(-45deg, #2177b8 0%,#c35691 100%);background-size: 300% 300%;animation: zi 15s infinite both linear;}.qq{font-size: 35px;width: 450px;margin: 0 auto;font-family: a;-webkit-background-clip: text; color: transparent;background-image:linear-gradient(-45deg, #084a7d 0%,#88084c 100%);background-size: 300% 300%;animation: zi 6s infinite both linear;}@keyframes zi{0%{background-position: 300% 300%;}33%{background-position: 0% 300%;}66%{background-position: 300% 0%;}100%{background-position: 300% 300%;}}@font-face{font-family: a;src: url(./0928img/ZhanKuXiaoLOGOTi/ZhanKuXiaoLOGOTi-2.otf);}.kuai1{z-index: -1;position: absolute;top: 600px;left: 50px;width: 100px;height: 100px;border-radius: 50%;background-image: radial-gradient(at 20px 20px,white 0%,#f0ccd5 25%, #5a93cb 45%, #cf3ebe 100%);box-shadow: 0px 0px 8px 0px pink;animation: run 3s linear infinite;animation-delay: -1s;}.kuai2{z-index: -1;position: absolute;top: 600px;left: 400px;width: 200px;height: 200px;border-radius: 50%;background-image: radial-gradient(at 20px 20px,white 0%,#F9ACBE 25%, #7DA0C3 45%, #C754BA 100%);box-shadow: 0px 0px 14px 0px pink;animation: run 3s linear infinite;animation-delay: -1.5s;}.kuai3{z-index: -1;position: absolute;top: 600px;left: 600px;width: 50px;height: 50px;border-radius: 50%;background-image: radial-gradient(at 20px 20px,white 0%,#F9ACBE 25%, #7DA0C3 45%, #C754BA 100%);box-shadow: 0px 4px 8px 0px pink;animation: run 3s linear infinite;animation-delay: -2.5s;}.kuai4{z-index: -1;position: absolute;top: 600px;left: 800px;width: 150px;height: 150px;border-radius: 50%;background-image: radial-gradient(at 20px 20px,white 0%,#F9ACBE 25%, #7DA0C3 45%, #C754BA 100%);box-shadow: 0px 0px 6px 0px pink;animation: run 3s linear infinite;animation-delay: -2s;}.kuai5{position: absolute;top: 600px;left: 1200px;width: 220px;height: 220px;border-radius: 50%;background-image: radial-gradient(at 20px 20px,white 0%,#F9ACBE 25%, #7DA0C3 45%, #C754BA 100%);box-shadow: 0px 0px 16px 0px pink;animation: run 3s linear infinite;animation-delay: -0.5s;}@keyframes run{0%{transform: translate(0px, 400px);}100%{transform: translate(0px, -1500px);}}

html5：

 <div class="qq">QQ音乐 清晨的第一缕阳光！</div><div class="pao kuai1"></div><div class="pao kuai2"></div><div class="pao kuai3"></div><div class="pao kuai4"></div><div class="pao kuai5"></div>

感谢各位的观看，如有帮助，不胜感激，如有不足，请多批评。

css动画与渐变案例，使用动画和渐变做一个背景动态网页相关推荐

[Demo]用简单的html，css做一个漂亮的网页！
下面是实现效果: 预览地址:https://jh-leong.github.io/Dmeo/ife_1/index.html 代码如下: html <!DOCTYPE html> < ...
python minimize_【趣味案例】用Python来做一个屏幕录制工具
一.写在前面作为一名测试,有时候经常会遇到需要录屏记录自己操作,方便后续开发同学定位.以前都是用ScreenToGif来录屏制作成动态图,偶尔的机会看到python也能实现.那就赶紧学习下. 二.效 ...
分享一个小案例，用HMS Scankit做一个安卓扫码购小应用
前言随着消费升级,零售业逐渐迈入新的发展阶段,"新零售"现象:消费者在货架前扫描小程序二维码,一边逛一边扫描条形码下单,等选好要买的东西,直接拿出手机,通过"扫码购&q ...
【趣味案例】用Python来做一个屏幕录制工具
一.写在前面作为一名测试,有时候经常会遇到需要录屏记录自己操作,方便后续开发同学定位.以前都是用ScreenToGif来录屏制作成动态图,偶尔的机会看到python也能实现.那就赶紧学习下. 二.效 ...
c#动画（两点动画，旋转动画，变色动画）及案例
C#动画: 两点动画,旋转动画,变色动画 1.边框 border:可以容纳一个其他元素 BorderThickness:边框厚度 BorderBrush:边框颜色 CornerRadius:设置边框圆 ...
css3双击点赞动画,Twitter上的点赞动画
推特最近更新了他们的点赞按钮,使用了全新的动画,而这个动画使用一组动画来实现的而不是依赖于CSS 的transitions.今天使用CSS动画的steps方法来重建这个动画. 错觉这种效果跟西洋镜的 ...
css3 做一个会动的菜单 menu 按钮动画效果
css3 做一个会动的菜单 menu 按钮动画效果需要做一个会的动画按钮效果,小前端部知道如何实现,我看了一眼需要的效果,给他写了一个简单的 demo. 设计师给了俩图片,一个是三这样的菜单图标 ...
绿色节能，怎么用ESP32 + HaaS Python怎么做一个起夜小灯？接上个“智慧路灯”案例中的留下的地下室人体感应亮灭灯
自上个案例 "用ESP32 + HaaS Python做一个智慧路灯系统,稍加改造也能用在地下室哦"发布以来,数度冲上CSDN 领域热度排行榜与全站热度排行榜,也有朋友与我 ...
html与css结合动效案例,CSS3制作动画效果例子
实现网站的图片.文字的动态效果,我们有photoshop制作多帧动画GIF.用flash制作更精巧的动画,还有利用javascript通过识别ID/CLASS 来实现对应DIV块的动画效果.然而,即使 ...

css动画与渐变案例，使用动画和渐变做一个背景动态网页

一，效果展示

二，背景颜色的渐变与动画

1.背景颜色渐变

2.背景颜色的动态改变

三，字体样式与颜色的改变

1.字体样式的引入

2.设置字体颜色透明与背景

3.字体设置源码

四，背景泡泡的漂浮动画效果

1.使用径向渐变制作泡泡

2.泡泡漂浮动画

五，总结与源码

css样式：

html5：

css动画与渐变案例，使用动画和渐变做一个背景动态网页相关推荐

最新文章

热门文章