HTML+CSS+JavaScript网页制作案例教程第2版-黑马程序员-第8章动手实践
文章目录
- HTML+CSS+JavaScript网页制作案例教程第2版-黑马程序员-第8章动手实践
- 效果图
- 代码
- 素材
效果图
代码
<!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
