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

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
shengmeshi9 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu9 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站
*TQK*10 小时前
✨1.HTML、CSS 和 JavaScript 是什么?
前端·javascript·css·html