示例

HTML

div.maindiv.humandiv.human__legsdiv.human__bdiv.human__leg.human__leg--leftdiv.human__leg.human__leg--rightdiv.human__armsdiv.human__tdiv.human__arm.human__arm--leftdiv.human__forearm.human__forearm--leftdiv.human__arm.human__arm--rightdiv.human__forearm.human__forearm--rightdiv.human__headdiv.human__helmetdiv.human__facediv.human__ear.human__ear--leftdiv.human__ear.human__ear--rightdiv.bikediv.bike__handlediv.bike__seatdiv.bike__wheeldiv.citydiv.city__b1div.city__b2div.city__b3div.treesdiv.tree.tree--l1div.tree.tree--l2div.tree.tree--l3div.tree.tree--r1div.tree.tree--r2div.tree.tree--r3div.clouds div.cloud                            div.cloud

CSS

/* Variables */
$black-1: #5F2E3C;
$white-1: #FFFFFF;
$green-1: #00B4BC;
$green-2: #008496;
$skin-1: #FFA87F;
$skin-2: #FF8A6F;
$purple-1: #7C5DA8;
$purple-2: #6A4A8D;
$purple-3: #614184;
$purple-4: #4E3480;$animation: .4s infinite linear alternate;/* Reset */
*, *::after, *::before {margin: 0;padding: 0;box-sizing: border-box;
}
/* Generic */
body{width: 100%;height: 100vh;min-width: 800px;min-height: 600px;display: flex;justify-content: center;align-items: center;background-color: $purple-2;
}
.main{display: flex;justify-content: center;position: relative;width: 800px;height: 600px;overflow: hidden;
}
/**/
.human{display: flex;justify-content: center;position: absolute;bottom: 65px;width: 160px;height: 380px;&__legs{position: absolute;bottom: 50px;width: 80px;height: 270px;animation: legs $animation;}&__b{position: absolute;top: 5px;width: 80px;height: 50px;border-radius: 20px;background-image: linear-gradient(to bottom, darken($green-2, 3), $green-2);z-index: 10;}&__leg{display: flex;justify-content: center;position: absolute;top: 0;width: 20px;height: 235px;background-image: linear-gradient(to bottom,$green-2 0%,$green-2 40%,$skin-2 40%,$skin-2 70%,$green-1 70%,$green-1 72%,$white-1 72%,$white-1 74%,$green-1 74%,$green-1 100%);&::before{content: '';position: absolute;bottom: 0;width: 25px;height: 10px;background-color: $black-1;}&::after{content: '';position: absolute;bottom: 0;border-top: 10px solid $white-1;border-left: 10px solid $white-1;border-right: 10px solid transparent;border-bottom: 10px solid transparent;border-radius: 50%;transform: rotateZ(45deg);}&--left{left: 0;animation:  leg $animation;}&--right{right: 0;animation:  leg $animation .4s;}}/* ========== */&__arms{display: flex;justify-content: center;position: absolute;top: 30px;width: 150px;height: 180px;}&__t{position: absolute;top: 3px;width: 80px;height: 60px;border-radius: 25px;overflow: hidden;background-color: $green-2;border-top: 8px solid $green-1;box-shadow: 0 0 4px rgba($black-1, .3);animation: human-t $animation;&::before,&::after{content: '';position: absolute;top: 30%;left: -60%;height: 80px;width: 80px;border: 10px solid $white-1;border-radius: 50%;}&::after{ left: 60%; }}&__arm{position: absolute;bottom: 20px;width: 20px;height: 86px;background-color: $skin-1;border-bottom: 25px solid $green-1;border-radius: 5px;z-index: -2;&--left{left: 0;animation: arm-l $animation;}&--right{right:  0;animation: arm-r $animation;}}&__forearm{position: absolute;width: 20px;height: 90px;background-color: $green-2;border-radius: 10px;z-index: -1;&--left{transform: rotateZ(35deg);left: 20px;animation: forearm-l $animation;}&--right{transform: rotateZ(-35deg);right: 20px;animation: forearm-r $animation;}}/* ========== */&__head{display: flex;justify-content: center;position: absolute;width: 80px;height: 90px;animation: head $animation;}&__helmet{position: absolute;top: -5px;width: 70px;height: 50px;background-image: linear-gradient(to bottom, $green-1 50%, $green-2 50%);border-radius: 50%;&::before,&::after{content: '';position: absolute;bottom: 30px;width: 10px;height: 5px;background-color: $green-2;z-index: 1;animation: glasses $animation;}&::before{left: 10px;border-bottom-left-radius: 10px;}&::after{right: 10px;border-bottom-right-radius: 10px;}}&__face{position: absolute;top: 25px;width: 45px;height: 60px;border-bottom-left-radius: 50%;border-bottom-right-radius: 50%;background-color: $skin-1;border-top: 5px solid $skin-2;border-bottom: 5px solid $black-1;&::before,&::after{content: '';position: absolute;bottom: 30px;width: 22px;height: 12px;background-color: $black-1;z-index: 1;animation: glasses $animation;}&::before{left: -5px;border-bottom-left-radius: 10px;}&::after{right: -5px;border-bottom-right-radius: 10px;}}&__ear{position: absolute;bottom: 25px;border-top: 6px solid $skin-2;border-left: 6px solid $skin-2;border-bottom: 6px solid transparent;border-right: 6px solid transparent;border-radius: 50%;&--left{transform: rotateZ(-45deg);left: -6px;}&--right{transform: rotateZ(135deg);right: -6px;}}
}
/* ========== */
.bike{display: flex;justify-content: center;position: absolute;bottom: 65px;width: 140px;height: 225px;animation: bike $animation;&__handle{position: absolute;top: 10px;width: 140px;height: 50px;border: 10px solid $black-1;border-bottom: 10px solid transparent;border-radius: 20px;&::before,&::after{content: '';position: absolute;bottom: 5px;width: 25px;height: 25px;z-index: 1000;border-radius: 5px;border-bottom: 10px solid $skin-1;border-bottom-left-radius: 10px;border-top-right-radius: 10px;}&::before{left: -15px;border-left: 10px solid $green-1;border-right: 10px solid $skin-1;}&::after{right: -15px;border-left: 10px solid $skin-1;border-right: 10px solid $green-1;}}&__wheel{display: flex;justify-content: center;position: absolute;bottom: 0;width: 20px;height: 160px;border-radius: 10px;background-color: $black-1;&::before{content: '';position: absolute;top: calc(50% - 7px);width:  30px;height: 14px;z-index: -1;border-radius: 20px;background-color: $green-1;}}&__seat{display: flex;justify-content: center;position: absolute;width: 15px;height: 100px;border-radius: 10px;background-color: $purple-1;&::before{content: '';position: absolute;top: -5px;width:  30px;height: 25px;z-index: -1;border-radius: 20px;background-image: linear-gradient(to bottom, $black-1 50%, $purple-2 50%);}}
}
.city{position: absolute;bottom: 65px;width: 300px;height: 30px;background-color: $purple-3;z-index: -1;&::before{content: '';position: absolute;bottom: 30px;right: 0;width: 250px;height: 10px;background-color: $purple-3;}&__b1,&__b2,&__b3{position: absolute;bottom: 0;left: 50px;width: 40px;height: 70px;background-color: $purple-3;}&__b2{left: 100px;height: 60px;}&__b3{left: 200px;height: 80px;}
}
.cloud{position: absolute;top: 200px;left: 60px;display: flex;justify-content: center;width: 85px;height: 20px;z-index: -1;&:nth-of-type(2){left: 80%;top: 100px;}&::before,&::after{content: '';position: absolute;border-radius: 50%;border-top: 20px solid $purple-1;border-left: 20px solid $purple-1;border-bottom: 20px solid transparent;border-right: 20px solid transparent;transform: rotateZ(45deg);}&::after{margin-left: -20px;margin-top: 5px;border-top: 15px solid $purple-1;border-left: 15px solid $purple-1;border-bottom: 15px solid transparent;border-right: 15px solid transparent;}
}.tree{display: flex;justify-content: center;position: absolute;bottom: 265px;left: 0;width: 100px;height: 100px;background-color: $purple-3;border-radius: 50%;&--l1{ animation: tree-l 3s linear infinite; }&--l2{ animation: tree-l 3s linear infinite 1s; }&--l3{ animation: tree-l 3s linear infinite 2s; }&--r1{ animation: tree-r 3s linear infinite; }&--r2{ animation: tree-r 3s linear infinite 1s;}&--r3{ animation: tree-r 3s linear infinite 2s; }&::before{content: '';top: 50px;position: absolute;width: 5px;height: 250px;background-color: $purple-4;}&::after{content: '';top: 125px;left: 55px;position: absolute;width: 50px;height: 50px;border-radius: 50%;background-color: $purple-3;}
}
/* ========== */@keyframes human-t {0%{ transform: rotateZ(-7deg) translateX(-3px); }100%{ transform: rotateZ(7deg) translateX(3px); }
}
@keyframes head {0%{ transform: rotateZ(-10deg) translateX(-3px) translateY(3px); }50%{ transform: rotateZ(0deg) translateX(0px) translateY(0); }100%{ transform: rotateZ(10deg) translateX(3px) translateY(3px); }
}
@keyframes face {0%{ transform: translateX(-2px); }100%{ transform:translateX(2px);}
}
@keyframes glasses {0%{ transform: translateX(-3px); }100%{ transform:translateX(3px); }
}
@keyframes arm-l {0%{left: -10px;bottom: 15px;transform: rotateZ(-5deg) ;transform: top center;}100%{left: 11px;bottom: 20px;transform: rotateZ(5deg) ;transform: top center;}
}
@keyframes forearm-l {0%{top: 0;left: 18px;height: 110px;transform: rotateZ(45deg);}100%{top: 8px;left: 25px;height: 80px;transform: rotateZ(25deg);}
}
@keyframes arm-r {0%{right: 11px;bottom: 18px;transform: rotateZ(-5deg) ;transform: top center;}100%{right: -10px;bottom: 13px;transform: rotateZ(5deg) ;transform: top center;}
}
@keyframes forearm-r {0%{top: 8px;right: 25px;height: 80px;transform: rotateZ(-25deg);}100%{top: 0;right: 18px;height: 110px;transform: rotateZ(-45deg);}
}
@keyframes legs {0%{ transform: rotateZ(-3deg); }100%{ transform: rotateZ(3deg); }
}
@keyframes leg {0%{ top: 0; }100%{ top: 40px; }
}
@keyframes bike {0%{transform: rotateZ(-2.6deg);transform-origin: bottom center;}100%{transform: rotateZ(2.6deg);transform-origin: bottom center;}
}
@keyframes tree-l {0%{bottom: 265px;transform: translateX(-100px) scale(1) ;transform-origin: bottom center;opacity: 1;}100%{bottom: 85px;transform: translateX(200px) scale(.1) ;transform-origin: bottom center;opacity: .3;}
}
@keyframes tree-r {0%{bottom: 265px;transform: translateX(800px) scale(1) ;transform-origin: bottom center;opacity: 1;}100%{bottom: 85px;transform: translateX(500px) scale(.1) ;transform-origin: bottom center;opacity: .3;}
}

JS

/*
Designed by: Valentin Kirilov
Original image: https://dribbble.com/shots/2859750-Tour-de-France
*/

骑自行车（Riding）相关推荐

“远征记”——从燕郊骑自行车回京
朱金灿 <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /> 自打出 ...
马云牛啊从骑自行车到坐迈巴赫只用20年
马云牛啊从骑自行车到坐迈巴赫只用20年打开电视电脑铺天盖地的马云,对事业一句话"他创造了电商神话,今天来谈谈他的车,从自行车到千万座驾. 1995 年的时候马云还在骑行自行车,1995 ...
sql删除快还是update快_下班回家，是骑自行车减肥快还是走路减肥快？
俗话说生命在于运动,在日常生活中,有不少人为了健身而运动,而也有不少人为了减肥而运动,运动方法有很多,比如骑自行车和走路都是不错的运动方式,那么骑自行车减肥还是走路减肥呢?带着疑问,我们一起来看下面 ...
swiper 上滑触发_新知 | 为何红酒杯壁挂“眼泪”，骑自行车不会倒，冰面那么滑？...
pixabay.com 撰文 | 二宗主图片 | 岳岳 ● ● ● 无论是宇宙深处神秘的黑洞的样子,还是微观世界中的亚原子粒子的行为,科学家已经解锁了许多我们甚 ...
苹果新专利针对骑自行车摔倒情况，苹果Find My使自行车免于丢失
苹果公司自 2019 年开始,获得了多项关于"跌倒检测"功能的相关专利.根据美国商标和专利局(USPTO)上周公示的清单,苹果再次介绍了在运动场景下,尤其是户外骑自行车发生跌倒后的 ...
java 交规_在城市里骑自行车，要注意什么交通规则吗？
你这个问题问得有问题啊哪条交通规则不应该注意啊我只能说我的体会首先不要闯红灯更不要抢绿灯这两种都是很明显的作死行为你觉得你骑的快能过去等你到马路中央两边的汽车可都已经刹不住了尤其是开 ...
通过成金快速通道骑自行车回金堂简记
通过成金快速通道骑自行车回金堂简记 <script src=http://busjs.vodone.cn/bus/ownerjs/advjs_36/36921/36921_41619_p5_.j ...
如果你开车正常行驶在马路上？见一垂死之老头骑自行车逆行向你车头撞来。...
如果你开车正常行驶在马路上?见一垂死之老头骑自行车逆行向你车头撞来. 你应该如何处理: 1.立刻刹车,停住 (评语,选本选项的人简直是法盲,对于伟大的道路安全法的严重后果一无所知即使停住,老头撞死在你 ...
经常骑自行车，对膝盖有损伤嘛，怎么办长期骑自行车锻炼，膝盖有痛感是不是受损伤了？
最近经常骑共享单车,骑的有些频繁了.包了月卡,每天早上晚上骑着上下班,路程每天有24公里,感觉膝盖关节处不舒服. 担心会膝盖损伤,也怕这种损伤是终身性的. 下面是在百度找到的关于汽车损伤的提问. 经常 ...

骑自行车（Riding）

骑自行车-动画（Riding）

示例

HTML

CSS

JS

骑自行车（Riding）相关推荐

最新文章

热门文章