<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5鼠标控制骑自行车速度动画 - 网页模板</title>
<style>
.preload {
background-color: #fff;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.preload p {
color: #000;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 18px;
font-family: Helvetica;
letter-spacing: 2px;
}
.container-bike {
cursor: move;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.container-bike .background {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
will-change: transform;
left: -50%;
height: 50%;
width: 300%;
}
.container-bike .background .tree {
position: relative;
height: 100%;
width: 180px;
}
.container-bike .background .tree-img {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMTkuMDMzIDM0Ny41MTIiPjxwYXRoIGZpbGw9IiM2NTZDNDgiIGQ9Ik00My41NCAxNDIuMzR2LTEuMDdjLTEuNiA1LjM0LTIuNDUgMTEtMi40NSAxNi44OCAwIDMyLjQ0IDI2LjMgNTguNzUgNTguNzQgNTguNzUgNi45NCAwIDEzLjYtMS4yIDE5Ljc3LTMuNDItMS41Ny4xLTMuMTUuMTctNC43NS4xNy0zOS4zOCAwLTcxLjMtMzEuOTMtNzEuMy03MS4zeiIvPjxwYXRoIGZpbGw9IiM3QjgyNTAiIGQ9Ik0xNTguNiAxNTguMTVjMC0zMi40NS0yNi4zLTU4Ljc2LTU4Ljc2LTU4Ljc2LTI2LjU4IDAtNDkuMDMgMTcuNjUtNTYuMjggNDEuODdsLS4wMiAxLjA3YzAgMzkuMzggMzEuOTMgNzEuMyA3MS4zIDcxLjMgMS42IDAgMy4yLS4wNSA0Ljc3LS4xNiAyMi43My04LjEgMzktMjkuODIgMzktNTUuMzN6Ii8+PHBhdGggZmlsbD0iIzYwNTY1NyIgZD0iTTEyMy44MyAxNjAuMWwtLjYzLTIyLjk4LTYuMyAxLjk0LTEuMTQgMjA4LjQ1aDEzLjMzbC00Ljc0LTE2OCIvPjxwYXRoIGZpbGw9IiMzQzNDM0MiIGQ9Ik0xMTIuMyAxNDAuNDhsLTcuMTQgMjA3LjAzaDEwLjZsMS4xNC0yMDguNDQiLz48cGF0aCBmaWxsPSIjNjA1NjU3IiBkPSJNMTI0LjI2IDE3NUwxOTUgMTAwbC00LjktNC45LTE3LjMyIDE2LjAzYy0yMy45NCAyNC4xNS01MC43NCA1MS4yOC01MC43NCA1MS4yOGwxLjczLTUuOTYtLjMyLjMtLjAyLS44Mi0yLjQgNy44MiAzLjIzIDExLjI3eiIvPjxwYXRoIGZpbGw9IiMzQzNDM0MiIGQ9Ik0xNzIuNzggMTExLjEzbC00OSA0NS4zLTEuNzQgNS45OHMyNi44LTI3LjEyIDUwLjc0LTUxLjI3eiIvPjxwYXRoIGZpbGw9IiM2MDU2NTciIGQ9Ik0xMTYuOSAxMzkuMjZsNi4zLTEuOTR2LS4yMmwuMTYtLjE3LS4xOC0uMTh2LS4xNGgtLjE1TDYxLjUzIDc4LjZsLTIuOSAyLjg4IDU4LjI3IDU2LjMiLz48cGF0aCBmaWxsPSIjM0MzQzNDIiBkPSJNMTE2LjkgMTM3Ljc1bC01OC4yOC01Ni4zLS4xNC4xNCA1My44NSA1Ny44NC0uMDUgMS4yNCA0LjYtMS40MiIvPjxwYXRoIGZpbGw9IiM2NTZDNDgiIGQ9Ik0xMzMuMTYgMTQwLjZjLTEuNDMgNC4zMy0yLjIgOC45Ni0yLjIgMTMuNzctLjAyIDI0LjMyIDE5LjcgNDQuMDQgNDQuMDMgNDQuMDQgNS4xNSAwIDEwLjEtLjkgMTQuNzItMi41Mi0zMC43OC0uMS01NS43OC0yNC42OC01Ni41Ni01NS4yOHoiLz48cGF0aCBmaWxsPSIjN0I4MjUwIiBkPSJNMjE5LjAzIDE1NC4zN2MwLTI0LjMyLTE5LjcyLTQ0LjA0LTQ0LjA0LTQ0LjA0LTE5LjUyIDAtMzYuMDYgMTIuNy00MS44NCAzMC4yNi43OCAzMC42IDI1LjggNTUuMTggNTYuNTYgNTUuMjggMTcuMDctNi4wNiAyOS4zLTIyLjM1IDI5LjMtNDEuNXoiLz48cGF0aCBmaWxsPSIjNjU2QzQ4IiBkPSJNMi45NSA1OS4wMkMxLjA1IDYzLjkgMCA2OS4yMiAwIDc0Ljc3IDAgOTguOCAxOS41IDExOC4zIDQzLjU0IDExOC4zYzUuOTMgMCAxMS41OC0xLjE4IDE2LjczLTMuMzNDMjkuNSAxMTQuMDMgNC42IDg5LjYyIDIuOTUgNTkuMDJ6Ii8+PHBhdGggZmlsbD0iIzdCODI1MCIgZD0iTTg3LjA4IDc0Ljc3YzAtMjQuMDUtMTkuNS00My41NC00My41NC00My41NC0xOC41IDAtMzQuMjggMTEuNTMtNDAuNiAyNy44IDEuNjcgMzAuNiAyNi41NSA1NSA1Ny4zMyA1NS45NCAxNS43NC02LjU2IDI2LjgtMjIuMSAyNi44LTQwLjJ6Ii8+PHBhdGggZmlsbD0iIzY1NkM0OCIgZD0iTTExNS42NCA4Ni4wNmMwLTEuOTcuMS0zLjkuMjctNS44My0zLjk0IDcuMTYtNi4yIDE1LjQtNi4yIDI0LjE1IDAgMjcuNiAyMi4zOCA1MCA1MCA1MCA5LjkzIDAgMTkuMTgtMi45MiAyNi45Ni03LjktMy4yLjUtNi40OC43OC05LjgzLjc4LTMzLjggMC02MS4yLTI3LjQtNjEuMi02MS4yeiIvPjxwYXRoIGZpbGw9IiM3QjgyNTAiIGQ9Ik0yMDkuNyAxMDQuMzhjMC0yNy42Mi0yMi40LTUwLTUwLTUwLTE4Ljg2IDAtMzUuMjcgMTAuNDQtNDMuOCAyNS44NS0uMTcgMS45Mi0uMjYgMy44Ni0uMjYgNS44MyAwIDMzLjggMjcuNCA2MS4yIDYxLjIgNjEuMiAzLjM0IDAgNi42Mi0uMjggOS44Mi0uOCAxMy44NS04LjkgMjMuMDMtMjQuNCAyMy4wMy00Mi4xeiIvPjxwYXRoIGZpbGw9IiM2NTZDNDgiIGQ9Ik00OC40NSAzOS4yM2MwLTIuNDQuMTQtNC44Ni40LTcuMjQtMy40IDcuMi01LjMgMTUuMjYtNS4zIDIzLjc1IDAgMzAuOCAyNC45NSA1NS43NiA1NS43NCA1NS43NiA5LjI4IDAgMTguMDMtMi4yNyAyNS43My02LjI4LTMuMjIuNDgtNi41LjczLTkuODYuNzMtMzYuODUgMC02Ni43Mi0yOS44Ny02Ni43Mi02Ni43MnoiLz48cGF0aCBmaWxsPSIjN0I4MjUwIiBkPSJNMTU1LjA0IDU1Ljc1QzE1NS4wNCAyNC45NSAxMzAuMDggMCA5OS4zIDAgNzcgMCA1Ny43NiAxMy4xIDQ4Ljg0IDMyYy0uMjYgMi4zNy0uNCA0LjgtLjQgNy4yMyAwIDM2Ljg1IDI5Ljg3IDY2LjcyIDY2LjcyIDY2LjcyIDMuMzUgMCA2LjY0LS4yNSA5Ljg2LS43MyAxNy44NC05LjMgMzAtMjcuOTYgMzAtNDkuNDd6Ii8+PHBhdGggZmlsbD0iIzY1NkM0OCIgZD0iTTYuNyAxMTcuOXYtMS40M2MtMS43MiA0LjY3LTIuNjcgOS43LTIuNjcgMTQuOTggMCAyMy44IDE5LjMgNDMuMSA0My4xIDQzLjEgNS4yNiAwIDEwLjMtLjk2IDE0Ljk3LTIuNy0uNDcuMDItLjk0LjAzLTEuNDIuMDMtMjkuOCAwLTU0LTI0LjE3LTU0LTU0eiIvPjxwYXRoIGZpbGw9IiM3QjgyNTAiIGQ9Ik05MC4yIDEzMS40NWMwLTIzLjgtMTkuMjgtNDMuMS00My4wOC00My4xLTE4LjUzIDAtMzQuMzIgMTEuNy00MC40IDI4LjEyLS4wMi40Ny0uMDMuOTQtLjAzIDEuNDIgMCAyOS44IDI0LjE3IDUzLjk4IDUzLjk4IDUzLjk4LjQ4IDAgLjk1IDAgMS40Mi0uMDIgMTYuNDItNi4xIDI4LjEtMjEuODggMjguMS00MC40eiIvPjwvc3ZnPg==);
position: absolute;
left: 0;
bottom: -40px;
width: 150px;
height: 380px;
background-repeat: no-repeat;
background-position: 0 100%;
}
.container-bike .floor {
background-color: #9DCB84;
will-change: transform;
position: absolute;
top: 50%;
left: -100%;
height: 200%;
width: 400%;
}
.container-bike .bike {
position: absolute;
top: calc(50% - 100px);
left: 50%;
margin-left: -75px;
will-change: transform;
height: 100px;
width: 120px;
}
.container-bike .bike .cyclist {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container-bike .bike .cyclist .body {
background-color: #000;
position: absolute;
top: 26px;
left: 45px;
width: 11px;
height: 15px;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
z-index: 4;
}
.container-bike .bike .cyclist .body::after {
background-color: #000;
content: "";
position: absolute;
top: 2px;
left: 14px;
width: 100%;
height: 100%;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
-webkit-transform-origin: top;
transform-origin: top;
}
.container-bike .bike .cyclist .body-box {
background-color: #ffcc99;
position: absolute;
top: 0px;
left: 25px;
width: 11px;
height: 15px;
}
.container-bike .bike .cyclist .body-box::after {
background-color: #F76363;
content: "";
position: absolute;
top: -1px;
right: -2px;
width: 55%;
height: 19px;
}
.container-bike .bike .cyclist .body-arm {
background-color: #000;
position: absolute;
top: 8px;
left: 13px;
width: 7px;
height: 15px;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
z-index: 3;
}
.container-bike .bike .cyclist .body-arm::after {
background-color: #ffcc99;
content: "";
position: absolute;
top: 16px;
left: 0px;
width: 80%;
height: 100%;
-webkit-transform: rotate(25deg);
transform: rotate(-18deg);
-webkit-transform-origin: top;
transform-origin: top;
}
.container-bike .bike .cyclist .legs-right,
.container-bike .bike .cyclist .legs-left {
background-color: #000;
position: absolute;
top: 35px;
left: 40px;
width: 12px;
height: 33px;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.container-bike .bike .cyclist .legs-right .legs-part,
.container-bike .bike .cyclist .legs-left .legs-part {
background-color: #ffcc99;
position: absolute;
top: 32px;
left: 0;
width: 8px;
height: 28px;
-webkit-transform: rotate(65deg);
transform: rotate(65deg);
-webkit-transform-origin: top center;
transform-origin: top center;
}
.container-bike .bike .cyclist .legs-right .legs-part::after,
.container-bike .bike .cyclist .legs-left .legs-p
HTML5鼠标控制骑自行车速度动画.zip
版权申诉
19 浏览量
2022-11-18
22:14:03
上传
评论
收藏 65KB ZIP 举报
HTML5鼠标控制骑自行车速度动画.zip （2个子文件） 
HTML5鼠标控制骑自行车速度动画 
HTML5鼠标控制骑自行车速度动画.jpg 25KB jiaoben4300 
index.html 161KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
最新资源
- 本科毕业设计基于C# wpf人脸识别的考勤系统的设计与实现源码.zip
- 基于Ruoyi+uniapp实现学生考勤系统 学生考勤源码+项目说明.zip
- feae6bc968ca68a099455d8b8a8dea35
- 基于Pytorch训练CIRAR10上分类算法.zip
- Pytorch-pytorch深度学习教程之Tensorboard.zip
- 基于C++和Python开发yolov8-face作为人脸检测器dlib作为人脸识别器的人脸考勤系统源码+项目说明.zip
- Pytorch-pytorch深度学习教程之变分自动编码器.zip
- Pytorch-pytorch深度学习教程之神经风格迁移.zip
- Pytorch-pytorch深度学习教程之深度残差网络.zip
- Pytorch-pytorch深度学习教程之循环神经网络.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
