css3 动态背景

最新推荐文章于 2023-05-11 16:23:51 发布

ued天机

最新推荐文章于 2023-05-11 16:23:51 发布

阅读量2.7k

点赞数

文章标签： css3 html5 动态背景 radial-gradient transition

本文链接：https://blog.csdn.net/uedtianji/article/details/40826277

版权

本文介绍了如何使用CSS3的radial-gradient和transition属性创建动态背景效果。通过四个不同渐变中心的DIV交替淡入淡出，实现了背景的连续变换。详细步骤包括设置镜像渐变背景、叠加DIV并调整透明度、应用动画属性以及添加半透明点以增强质感。提供了DEMO地址和相关资源链接供读者参考和实践。

摘要由CSDN通过智能技术生成

动态背景

利用多层背景的交替淡入淡出，实现一种背景在不停变换的效果，先看图。效果图：

DEMO地址

步骤

1.利用css的radial-gradient创建一个镜像渐变的背景。其中的80% 20%为渐变中心的x,y位置。

具体的radial-gradient用法可以参见这里

.dynbg__bg{
    position: absolute;
    top: 0px;
    left: 0px;
    width:100%;
    height:100%;
    background:-moz-radial-gradient(80% 20%,farthest-side, #edbf47, #D58123);
    background:-webkit-radial-gradient(80% 20%,farthest-side, #edbf47, #D58123);
}