风和日丽纯HTML代码

最新推荐文章于 2023-03-29 22:41:49 发布

VIP文章 Yqi9979

最新推荐文章于 2023-03-29 22:41:49 发布

阅读量466

点赞数 2

文章标签：风和日丽纯代码 web基础 html

本文链接：https://blog.csdn.net/qq_41418149/article/details/103101539

版权

Web基础篇

HTML-06风和日丽

此页面要求：
风车转动；太阳慢慢升起后，云朵开始飘动。
风和日丽此页面主要知识点：
溢出隐藏：overflow:hidden;
动画：@keyframes 动画名称{0%{}100%{}}
过渡动画：transition:要过渡的属性（all代表所有）动画时间延迟时间运动曲线;

html代码
<body>
    <div class="box">
        <div class="sun"></div>
        <div class="mountain01"></div>
        <div class="mountain02"></div>
        <div class="mountain03"></div>
        <div class="cloud">
            <div class="cloud01"></div>
            <div class="cloud02"></div>
            <div class="cloud03"></div>
        </div>
        <div class="windmill">
            <div class="windmillSquare">
                <div class="fan"></div>
                <div class="fan fan02"></div>
            </div>
        </div>
    </div>
</body>

css样式：

.box{
   
    width:1350px;
    height:600px;
    border:2px solid black;
    background-color:skyblue;
    position: relative;
    overflow:hidden;
}
.mountain01{
   
    width:500px;
    height:500px;
    background-color:green;
    border-radius:100px;
    position:absolute;
    bottom:-300px;
    transform

最低0.47元/天解锁文章

Yqi9979

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
风和日丽纯HTML代码

Web基础篇HTML-06风和日丽此页面要求：风车转动；太阳慢慢升起后，云朵开始飘动。此页面主要知识点：溢出隐藏：overflow:hidden;动画：@keyframes 动画名称{0%{}100%{}}过渡动画：transition:要过渡的属性（all代表所有）动画时间延迟时间运动曲线;html代码<body> <div class="box...
复制链接

扫一扫