CSS3多重背景结合动画打造会飘动的热气球banner

最新推荐文章于 2024-04-13 17:48:22 发布

正在修炼web的小芮

最新推荐文章于 2024-04-13 17:48:22 发布

阅读量282

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/m0_71814235/article/details/125986396

版权

本文介绍如何利用CSS3的多重背景及动画特性，创建一个逼真的飘动热气球效果的网页Banner。通过设置body样式和特定的css样式，实现了热气球在页面上浮动的视觉效果。

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

body样式

<body>
    <div id="wrap">
        <h1>CSS3多重背景结合动画打造会飘动的热气球banner</h1>
        <div class="banner"></div>
    </div>
</body>

css样式

    <style type="text/css">
        body,div,h1{
            margin: 0;
            padding: 0;
        }
        body{
            font: 1em "microsoft Yahei";
            color: #fff;
            background-color: #333;
        }
        #wrap{
            width: 90%;
            margin: 0 auto;
            padding: 1.25em;
        }
        h1{
            font-size: 2.5em;
            color: #eee;
            text-align: center;
            margin: 1em 0;
        }
        .banner{
            width: 100%;
            min-width: 1200px;
            height: 280px;
            overflow: hidden;
            background: url(./images/cloud-6.png),url(./images/cloud-5.png),url(./images/cloud-4.png),url(.