css实现自动自行车骑行动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现自动自行车骑行动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, .bike { display: flex; justify-content: center; align-items: center; } body { background: #7c606b; margin: 0; height: 100vh; } .bike { position: relative; height: 100%; width: 700px; min-height: 700px; min-width: 700px; max-height: 700px; max-width: 700px; } .frame { /* main bike frame */ position: absolute; top: 35.7%; left: 35.7%; height: 200px; width: 200px; box-sizing: border-box; background: transparent; border-left: 10px solid #fcbcb8; border-right: 10px solid #fcbcb8; transform: rotate(-25deg); background-image: linear-gradient(-30deg, transparent 21%, #fcbcb8 21%, #fcbcb8 25%, transparent 25%), linear-gradient(180deg, transparent 45%, #fcbcb8 45%, #fcbcb8 50%, transparent 50%); /* frame extending over front wheel*/ box-shadow: 95px 165px 0 -95px #fcbcb8, 95px 160px 0 -95px #fcbcb8, 95px 155px 0 -95px #fcbcb8, 95px 150px 0 -95px #fcbcb8, 95px 145px 0 -95px #fcbcb8, 95px 140px 0 -95px #fcbcb8, 95px 135px 0 -95px #fcbcb8, 95px 130px 0 -95px #fcbcb8, 95px 125px 0 -95px #fcbcb8, 95px 120px 0 -95px #fcbcb8, 95px 110px 0 -95px #fcbcb8, 95px 105px 0 -95px #fcbcb8; } .frame:before, .frame:after { position: absolute; content: ""; } .frame:before { /* back frame for crate */ height: 130px; width: 100px; top: 5%; right: 100%; background: transparent; border-left: 10px solid #fcbcb8; background-image: linear-gradient(25deg, transparent 68%, #fcbcb8 68%, #fcbcb8 74%, transparent 74%), linear-gradient(-30deg, transparent 39%, #fcbcb8 39%, #fcbcb8 45%, transparent 45%); } .frame:after { /* mud guard */ height: 230px; width: 55px; background: #fcbcb8; transform: rotate(-65deg); top: 25%; left: -30%; border-radius: 50% 50% 50% 50%/100% 100% 20% 20%; background-image: radial-gradient(circle at 50% 85%, #efa7a7 8%, transparent 8%); box-shadow: inset 0px 0px 0 5px #efa7a7; } .wheel { /* skirt guard on top of wheel */ position: absolute; height: 170px; width: 170px; border-radius: 50%; top: 52%; left: 12%; border: 10px solid transparent; border-top: 10px solid #fcbcb8; border-left: 10px solid #fcbcb8; transform: rotate(40deg); } .wheel:before { /* actual wheels */ content: ""; position: absolute; height: 140px; width: 140px; border-radius: 50%; top: 3%; left: 3%; border: 10px solid #efefef; box-shadow: inset 0px 0px 0 6px #efa7a7; -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; background-image: linear-gradient(292deg, transparent 49%, #fcbcb8 49%, #efa7a7 51%, transparent 51%), linear-gradient(248deg, transparent 49%, #fcbcb8 49%, #efa7a7 51%, transparent 51%), linear-gradient(202deg, transparent 49%, #fcbcb8 49%, #efa7a7 51%, transparent 51%), linear-gradient(157deg, transparent 49%, #fcbcb8 49%, #efa7a7 51%, transparent 51%), linear-gradient(135deg, transparent 49%, #fcbcb8 49%, #efa7a7 51%, transparent 51%), linear-gradient(45deg, transparent 49%, pink 49%, #efa7a7 51%, transparent 51%), linear-gradient(to left, transparent 49%, #fcbcb8 49%, #efa7a7 51%, transparent 51%), linear-gradient(to bottom, transparent 49%, #fcbcb8 49%, #efa7a7 51%, transparent 51%); } .wheel + .wheel { /* front wheel */ left: 58.5%; transform: rotate(12deg); } .crate { position: absolute; height: 60px; width: 115px; left: 10%; bottom: 49%; border-bottom: 8.5px solid #fcbcb8; background-image: radial-gradient(7% 12% at 11% 20%, #ffc426 50%, transparent 50%), radial-gradient(7% 12% at 11% 50%, #ffc426 50%, transparent 50%), radial-gradient(7% 12% at 11% 82%, #ffc426 50%, transparent 50%), radial-gradient(7% 12% at 88% 20%, #ffc426 50%, transparent 50%), radial-gradient(7% 12% at 88% 50%, #ffc426 50%, transparent 50%), radial-gradient(7% 12% at 88% 82%, #ffc426 50%, transparent 50%), linear-gradient(to bottom, transparent 37%, #ffd972 37%, #ffd972 65%, transparent 65%), linear-gradient(to top, transparent 7%, #ffd972 7%, #ffd972 30%, transparent 30%), linear-gradient(to bottom, transparent 7%, #ffd972 7%, #ffd972 32%, transparent 32%), linear-gradient(to right, transparent 5%, #ffd972 5%, #ffd972 19%, transparent 19%), linear-gradient(to left, transparent 5%, #ffd972 5%, #ffd972 19%, transparent 19%); } .light { /* metal.........完整代码请登录后点击上方下载按钮下载查看
网友评论0