利用纯CSS3实现动态的自行车特效源码
前端 / 管理员 发布于 7年前 164
首先来看看实现的效果图（静态）：
实例源码：
<!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>总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以交流。
- 相关文章
- 使用 Alpine.js 排序插件对元素进行排序(0个评论)
- 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
- 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
- 使用mock-server实现模拟接口对接流程步骤(0个评论)
- vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
- 近期文章
- 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
- 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
- gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
- 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
- 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
- Laravel从Accel获得5700万美元A轮融资(0个评论)
- 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
- 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
- PHP 8.4 Alpha 1现已发布！(0个评论)
- Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
- 近期评论
-
122 在
学历：一种延缓就业设计，生活需求下的权衡之选中评论 工作几年后，报名考研了，到现在还没认真学习备考，迷茫中。作为一名北漂互联网打工人.. -
123 在
Clash for Windows作者删库跑路了，github已404中评论 按理说只要你在国内，所有的流量进出都在监控范围内，不管你怎么隐藏也没用，想搞你分.. -
原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了，今天刚看，已经添加。.. -
博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了，可以看看近期评论的其他文章.. -
1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开，博主百忙中能否发个APP下载链接，佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号
