目录
一,效果展示
使用渐变和动画来制作这样的一个动态背景的页面。
分别设置了背景,字体和泡泡的漂浮动画,使得整个页面展示出一个颜色一直改变的效果。
二,背景颜色的渐变与动画
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%;
设置背景动画并且引用动画。