HTML+CSS+JavaScript网页制作案例教程第2版-黑马程序员-第8章动手实践

HTML+CSS+JavaScript网页制作案例教程第2版-黑马程序员-第8章动手实践

文章目录

效果图


代码

html 复制代码
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>风车</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        div {
            width: 1024px;
            height: 606px;
            position: relative;
            background: url(./images/bg02.jpg) no-repeat;
        }
        .fc {
            display: inline-block;
            width: 427px;
            height: 430px;
            background: url(./images/fc.png) no-repeat;
            position: absolute;
            left: 37%;
            top: 28%;
            animation: rotate1 10s linear 0s infinite;
            /* rotate1 的动画,持续时间为 10 秒,速度曲线为线性(匀速),延迟时间为 0 秒,且无限次循环。 */
        }
/* 定义一个名为 rotate1 的关键帧动画。从 -360deg 旋转到 0deg,即顺时针旋转一圈。 */
        @keyframes rotate1 {
            from {
                transform: rotate(-360deg);
            }

            to {
                transform: rotate(0);
            }
        }
    </style>
</head>

<body>
    <div>
        <span class="fc"></span>
    </div>
</body>

</html>

素材

自己右键下载保存吧

fc.png

bg02.jpg

相关推荐
Myli_ing24 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风27 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave34 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟36 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
旭日猎鹰3 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
一条晒干的咸魚4 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单