纯CSS3自行车

59580
59580 发布于 6 天前 浏览:2200 类型:原创 - 随笔 分类:HTML/CSS - JavaScript 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>自行车</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0
			}
			
			ol,
			ul {
				list-style: none/*去掉圆点或数字*/
			}
			
			.cycle-outer {
				width: 534px;
				height: 260px;
				position: absolute;
				/*绝对定位*/
				top: 50%;
				/*距离顶部*/
				margin: -160px 0 0 -267px;
				/*距离外边距*/
				left: 50%;
			}
			
			.cycle-wrapper {
				width: 534px;
				height: 260px;
				margin: 0 auto;
				position: relative;
				/*相对定位*/
			}
			
			.cycle-wheel-front {
				/*前轮*/
				margin: 100px 0 0 330px;
			}
			
			.cycle-wheel-back {
				/*后轮*/
				margin: 100px 0 0 0px;
			}
			
			.cycle-wheel-outer {
				background: transparent;
				border: 5px solid #aaa;
				border-radius: 50%;
				/*画外轮圆圈*/
				width: 190px;
				height: 190px;
				position: absolute;
				margin-top: 5px;
				animation: wheel-rotate 2s linear infinite;
				/*定义动画*/
			}
			/*轮胎开始旋转*/
			@keyframes wheel-rotate {
				from {
					transform: rotate(0deg);
				}
				to {
					transform: rotate(360deg);
				}
			}
			
			.cycle-wheel-outer:after {
				/*插入内轮胎圆圈*/
				background: transparent;
				border: 4px solid #EF9058;
				border-radius: 50%;
				width: 176px;
				height: 176px;
				position: absolute;
				margin: 3px;
				content: "";
			}
			
			.spoke {
				/*开始画车轮线条*/
				position: absolute;
				width: 1px;
				height: 200px;
				background: #ccc;
				margin: -5px 0 0 95px;
				z-index: 0;
			}
			
			.spoke:after {
				/*在后面插入两条*/
				content: "";
				position: absolute;
				width: 1px;
				height: 200px;
				background: #ccc;
				transform: rotate(120deg);
			}
			
			.spoke:before {
				/*在前面插入两条*/
				content: "";
				position: absolute;
				width: 1px;
				height: 200px;
				background: #ccc;
				transform: rotate(240deg);
			}
			/*轮胎线条完成*/
			
			.spoke-container li:nth-child(2) {
				/*中心点旋转*/
				transform: rotate(30deg);
			}
			
			.inner-disc {
				/*画中心轴圆点*/
				background: #666;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				margin: -10px 0 0 -10px;
				top: 50%;
			}
			/*.cycle-wheel-back .inner-disc:after {
				content: "";
				background: #666;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				margin: -10px 0 0 -10px;
				top: 50%;
			}*/
			
			.inner-disc-2 {
				/*画轮胎中心轴的圆圈*/
				background: transparent;
				width: 6px;
				height: 6px;
				border: 2px solid #FFF;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				margin: -5px 0 0 -5px;
				top: 50%;
			}
			
			.cycle-wheel-back .inner-disc-2:after {
				/*插入后轮轴心齿轮*/
				content: "";
				background: transparent;
				width: 18px;
				height: 18px;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				margin: -13px 0 0 -13px;
				top: 50%;
				border: 4px dotted #666;
			}
			.cycle-body {
				margin-left: 125px;
			}
			.front-wheel-frame {/*前叉*/
				background: #5E999B;
				width: 8px;
				height: 180px;
				position: absolute;
				z-index: 2;
				transform: rotate(-25deg);
				margin: -72px 0 0 260px;
			}
			.top-frame {/*上管*/
				background: #5E999B;
				width: 180px;
				height: 8px;
				position: absolute;
				z-index: 2;
				margin: -20px 0 0 62px;
				transform: rotate(-8deg);
			}
			.front-frame {/*下管*/
				background: #5E999B;
				width: 8px;
				height: 160px;
				position: absolute;
				z-index: 2;
				transform: rotate(41deg);
				margin: -36px 0 0 189px;
			}
			.center-frame { /*坐杆*/
				background: #5E999B;
				width: 8px;
				height: 205px;
				position: absolute;
				z-index: 2;
				transform: rotate(-33deg);
				margin: -84px 0 0 75px;
			}
			.back-frame {/*后管*/
				background: #5E999B;
				width: 8px;
				height: 136px;
				position: absolute;
				z-index: 2;
				transform: rotate(39deg);
				margin: -23px 0 0 19px;
			}
			.bottom-frame {/*后叉or平管*/
				background: #5E999B;
				width: 159px;
				height: 8px;
				position: absolute;
				z-index: 2;
				margin: 100px 0 0 -16px;
			}
			.handlebar-front {/*车把*/
				width: 60px;
				height: 8px;
				background: #5E999B;
				z-index: 2;
				position: absolute;
				margin: -68px 0 0 222px;
				border-top-left-radius: 3px;
				border-bottom-left-radius: 3px;
			}
			.handlebar-curve {/*车把手*/
				width: 40px;
				height: 40px;
				border: 8px solid #666;
				border-top-right-radius: 100%;
				border-bottom-right-radius: 100%;
				border-bottom-left-radius: 100%;
				background: transparent;
				position: absolute;
				margin: -68px 0 0 258px;
				border-left: 8px solid transparent;
				border-top: 8px solid #666;
				border-bottom: 8px solid #666;
			}
			/*座垫*/
			.seat { 
				width: 50px;
				height: 10px;
				background: #666;
				border-radius: 44%;
				position: absolute;
				margin: -73px 0 0 15px;
			}
			
			.seat:after {
				width: 0px;
				height: 0px;
				border-style: solid;
				border-width: 0 40px 16px 40px;
				border-color: transparent transparent #666 transparent;
				content: "";
				position: absolute;
				z-index: 3;
				transform: rotate(-12deg);
				position: absolute;
				border-radius: 100%;
				margin: 0 0 0 -26px;
			}
			.seat:before {
				width: 0px;
				height: 0px;
				border-style: solid;
				border-width: 0 40px 16px 40px;
				border-color: transparent transparent #666 transparent;
				content: "";
				position: absolute;
				z-index: 3;
				transform: rotate(179deg);
				position: absolute;
				border-radius: 100%;
				margin: 0 0 0 -26px;
			}
			.seat span {
				width: 32px;
				height: 19px;
				background: #666;
				border-radius: 100%;
				position: absolute;
				margin: 1px 0 0 -22px;
				transform: rotate(-11deg);
			}
			/*去掉中心轴的*/
			.chain-rotation {
				position: absolute;
				z-index: 16;
			}
			/*中心轴*/
			.chain-disc-inner {
				background: #666;
				width: 18px;
				height: 18px;
				border-radius: 50%;
				position: absolute;
				margin: 2px;
				z-index: 4;
			}
			.chain-disc-outer {
				background: #FFF;
				width: 22px;
				height: 22px;
				border: 5px solid #666;
				border-radius: 50%;
				position: absolute;
				margin: 87px 0 0 250px;
				z-index: 3;
				content: "";
			}
			/*牙盘*/
			.chain-rods {
				height: 70px;
				width: 6px;
				background: #666;
				position: absolute;
				margin: 67px 0 0 263px;
				z-index: 15;
				animation: wheel-rotate 2s linear infinite;
			}
			.chain-rods:before {
				content: "";
				height: 70px;
				width: 6px;
				background: #666;
				position: absolute;
				transform: rotate(120deg);
			}
			.chain-rods:after {
				content: "";
				height: 70px;
				width: 6px;
				background: #666;
				position: absolute;
				transform: rotate(240deg);
				-webkit-transform: rotate(240deg);
				-moz-transform: rotate(240deg);
			}
			.outer-axle {
				height: 70px;
				width: 70px;
				border-radius: 50%;
				background: transparent;
				border: 5px solid #666;
				position: absolute;
				margin: 62px 0 0 226px;
				z-index: 3;
			}
			
			.outer-axle:after {
				content: "";
				height: 74px;
				width: 74px;
				border-radius: 50%;
				background: transparent;
				border: 5px dotted #666;
				margin: -7px;
				position: absolute;
				z-index: 3;
				animation: wheel-rotate 2s linear infinite;
			}
			/*车链子*/
			.chain-up {
				background-color: transparent;
				background-size: 8px 2px;
				background-position: 0 0, 30px 30px;
				width: 155px;
				height: 4px;
				position: absolute;
				z-index: 9;
				background: #EEE;
				transform: rotate(-11deg);
				margin: 76px 0 0 98px;
			}
			.chain-up:before {
				content: "";
				background-color: transparent;
				background-image: linear-gradient(90deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666);
				background-size: 8px 2px;
				background-position: 0 0, 30px 30px;
				width: 155px;
				height: 4px;
				animation: chainUp 2s linear infinite;
				position: absolute;
				z-index: 10;
			}
			.chain-bottom {
				background-color: transparent;
				background-size: 8px 2px;
				background-position: 0 0, 30px 30px;
				width: 155px;
				height: 4px;
				position: absolute;
				z-index: 9;
				background: #EEE;
				-webkit-transform: rotate(9deg);
				-moz-transform: rotate(9deg);
				transform: rotate(9deg);
				margin: 127px 0 0 98px;
			}
			
			.chain-bottom:before {
				content: "";
				background-color: transparent;
				background-image: linear-gradient(90deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666);
				background-size: 8px 2px;
				background-position: 0 0, 30px 30px;
				width: 155px;
				height: 4px;
				animation: chainDown 2s linear infinite;
				position: absolute;
				z-index: 10;
			}
			/*脚踏*/
			.pedal-rod {
				height: 120px;
				width: 6px;
				background: #666;
				position: absolute;
				margin: -25px 0 0 0px;
			}
			
			.pedal-rod:before {
				width: 40px;
				height: 10px;
				background: #666;
				position: absolute;
				margin: 10px;
				content: "";
				margin: -7px -17px;
				animation: pedal1 2s linear infinite;
			}
			
			.pedal-rod:after {
				width: 40px;
				height: 10px;
				background: #666;
				position: absolute;
				margin: 10px;
				content: "";
				margin: 119px -17px;
				animation: pedal2 2s linear infinite;
			}
			/*水壶架*/
			.bottle-holder {
				width: 20px;
				height: 36px;
				background: #daeded;
				border: 3px solid #5E999B;
				position: absolute;
				margin: 54px 0 0 -25px;
			}
			
			.bottle-holder:after {
				width: 20px;
				height: 3px;
				content: "";
				background: #5E999B;
				position: absolute;
				margin: 24px 0 0 0px;
			}
			/*水壶*/
			.bottle-holder:before {
				background-color: #daeded;
				width: 18px;
				height: 10px;
				border-radius: 30% / 100%;
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
				content: "";
				position: absolute;
				margin-top: -13px;
				border: 1px solid #98baba;
				border-bottom: 0;
			}
			.bottle-holder span {
				position: absolute;
				width: 9px;
				height: 4px;
				background: #666;
				margin: -17px 0 0 5px;
			}
			/*车链子动画*/
			@keyframes chainUp {
				0% {
					background-position: 0 25%;
				}
				100% {
					background-position: 100% 0;
				}
			}
			@keyframes chainDown {
				0% {
					background-position: 100% 0;
				}
				100% {
					background-position: 0 25%;
				}
			}
			/*脚踏动画*/
			@keyframes pedal1 {
				0% {
					transform: rotate(00deg);
				}
				25% {
					transform: rotate(-140deg);
				}
				50% {
					transform: rotate(-180deg);
				}
				75% {
					transform: rotate(-240deg);
				}
				100% {
					transform: rotate(-360deg);
				}
			}
			@keyframes pedal2 {
				0% {
					transform: rotate(00deg);
				}
				25% {
					transform: rotate(-60deg);
				}
				50% {
					transform: rotate(-180deg);
				}
				75% {
					transform: rotate(-340deg);
				}
				100% {
					transform: rotate(-360deg);
				}
			}
		</style>
	</head>

	<body>
		<div class="cycle-outer">
			<div class="cycle-wrapper">
				<!--
                	描述:车架
                -->
				<div class="cycle-body">
					<div class="seat">
						<span></span>
					</div>
					<div class="front-wheel-frame"></div>
					
					<div class="top-frame"></div>
					<div class="front-frame">
						<div class="bottle-holder">
							<span></span>
						</div>
					</div>
					<div class="center-frame"></div>
					<div class="back-frame"></div>
					<div class="bottom-frame"></div>
					<div class="handlebar-front"></div>
					<div class="handlebar-curve"></div>
				</div>
				<!--
                	描述:后轮
                -->
				<div class="cycle-wheel cycle-wheel-back">
					<div class="cycle-wheel-outer">
						<div class="cycle-wheel-inner">
							<div class="cycle-wheel-inner-padding">
								<ul class="spoke-container">
									<li class="spoke"></li>
									<li class="spoke"></li>
								</ul>
								<div class="inner-disc"></div>
								<div class="inner-disc-2"></div>
							</div>
						</div>
					</div>
				</div>
				<!--
                	描述:前轮
                -->
				<div class="cycle-wheel cycle-wheel-front">
					<div class="cycle-wheel-outer">
						<div class="cycle-wheel-inner">
							<div class="cycle-wheel-inner-padding">
								<ul class="spoke-container">
									<li class="spoke"></li>
									<li class="spoke"></li>
								</ul>
								<div class="inner-disc"></div>
								<div class="inner-disc-2"></div>
							</div>
						</div>
					</div>
				</div>
				<!--
                	描述:中心轴  车链子 牙盘 水壶架  水壶   脚踏
                -->
				<div class="chain-up"></div>
				<div class="chain-bottom"></div>
				<div class="chain-rotation">
					<div class="outer-axle"></div>
					<div class="chain-disc-outer">
						<div class="chain-disc-inner"></div>
					</div>

				</div>
				<div class="chain-rods">
					<div class="pedal-rod"></div>
				</div>
			</div>
		</div>

		<div style="text-align:center;clear:both;">
	</body>

</html>
标签:
z
给个赞 71 人点赞
收藏 51 人收藏
评论 已有 15 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
jinjidexiaowen
jinjidexiaowen5 天前5F
还是辆死飞emoticon
举报 支持 (1) 回复 (0)
最新评论
艾瑞卡
艾瑞卡4 天前15F
这个我好像在哪儿看到过
举报 支持 (0) 回复 (0)
hbxywdk
hbxywdk5 天前14F
你咋这么牛逼捏
举报 支持 (0) 回复 (0)
59580
595805 天前13F
恩,前面和后面齿轮都是用障眼法,都停止的时候没那么长,刚好对接,没绕圈,动起来不仔细看,看不出来 //@hugeannexemoticon仔细一看,后面的小齿轮。。。不对劲啊!要不是层问题,就是缺齿了。
举报 支持 (0) 回复 (0)
hugeannex
hugeannex5 天前12F
emoticon仔细一看,后面的小齿轮。。。不对劲啊!要不是层问题,就是缺齿了。
举报 支持 (0) 回复 (1)
hugeannex
hugeannex5 天前11F
emoticon感觉还可以。 //@老姚:可以研究研究,估计挺费时间的。话说大神你canvas溜 //@hugeannex:这个任务就交给你了 //@老姚:挺帅的,是不是可以用canvas再实现一遍
举报 支持 (0) 回复 (0)
daiping2008
daiping20085 天前10F
厉害了word哥
举报 支持 (0) 回复 (0)
单先生
单先生5 天前9F
没时间解释了。抓紧上车
举报 支持 (0) 回复 (0)
老姚
老姚5 天前8F
可以研究研究,估计挺费时间的。话说大神你canvas溜 //@hugeannex:这个任务就交给你了 //@老姚:挺帅的,是不是可以用canvas再实现一遍
举报 支持 (0) 回复 (1)
wuzhe128520
wuzhe1285205 天前7F
厉害了word哥
举报 支持 (0) 回复 (0)
hugeannex
hugeannex5 天前6F
这个任务就交给你了 //@老姚:挺帅的,是不是可以用canvas再实现一遍
举报 支持 (0) 回复 (1)
jinjidexiaowen
jinjidexiaowen5 天前5F
还是辆死飞emoticon
举报 支持 (1) 回复 (0)
15617602337
156176023375 天前4F
举报 支持 (0) 回复 (0)
dfmily27
dfmily275 天前3F
厉害了。。
举报 支持 (0) 回复 (0)
59580
595805 天前2F
canvas我不会,我主要做java和ExtJs的,平时有空看看css3和html5觉得动画好酷 //@老姚:挺帅的,是不是可以用canvas再实现一遍
举报 支持 (0) 回复 (0)
老姚
老姚5 天前1F
挺帅的,是不是可以用canvas再实现一遍
举报 支持 (0) 回复 (2)
59580 59580 作者

作者最新