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

相关推荐
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
画月的亮3 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119403 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
工业甲酰苯胺6 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689976 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
lonelyhiker8 小时前
javascript的原型链
开发语言·javascript·原型模式
MarkHD9 小时前
第十六天 HarmonyOS WebView开发实战:从加载网页到与JavaScript交互
javascript·交互·harmonyos
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek