css实现卡通恐龙动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现卡通恐龙动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { overflow: hidden; } .tRex { position: absolute; font-size: 56vh; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; opacity: 0; cursor:default; } .t-Rex { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; background: lightgrey; height: 70vh; width: 70vh; border-radius: 100%; box-shadow: 5px 15px 15px; border:3vh solid black; animation: wiggle4 5s linear infinite; } .snout { position: absolute; top: 18.5%; left: 12%; border-radius: 12px 23px 0px 0px; background-color: green; height: 8.5%; width: 25.5%; z-index: 50; overflow: hidden; } .headMark1 { position: absolute; height: 40%; width: 25%; right: -2%; background-color: darkgreen; top: 30%; border-radius: 50px; } .headMark2 { position: absolute; height: 10%; width: 70%; right: -8%; background-color: darkgreen; top: 2%; border-radius: 50px; z-index: 1000; } .nostril { position: absolute; top: 21%; left: 15%; border-radius: 100%; background-color: darkblue; height: 3%; width: 3%; z-index: 100; } .eye { position: absolute; top: 18.5%; left: 23.2%; border-radius: 0px 0px 50px 50px; background-color: darkgreen; height: 5.5%; width: 8.5%; z-index: 70; } .eyeball { position: absolute; top: 18.5%; left: 26%; border-radius: 0px 0px 50px 50px; background-color: darkblue; height: 3%; width: 3%; z-index: 100; } .eyelid { position: absolute; top: 15.75%; left: 23.2%; border-radius: 35px 35px 0px 0px; background-color: green; height: 3%; width: 8.5%; z-index: 105; } .jaw { position: absolute; top: 29.5%; left: 15%; border-radius: 0px 0px 35px 35px; background-color: green; height: 3%; width: 14%; z-index: 100; animation: wiggle3 250ms infinite; } .jawHinge { position: absolute; top: 24.5%; left: 24.75%; border-radius: 0px 0px 35px 35px; background-color: green; height: 7%; width: 4.25%; z-index: 100; } .tooth1 { left: 12%; } .tooth2 { left: 14.5%; } .tooth3 { left: 17.5%; } .tooth4 { left: 20.25%; } .tooth1, .tooth2, .tooth3, .tooth4 { width: 5%; height: 0; padding-left: 3%; padding-top: 3%; overflow: hidden; position: absolute; top: 26.8%; z-index: 101; } .tooth1 div, .tooth2 div, .tooth3 div, .tooth4 div { width: 0; height: 0; margin-left: -500px; margin-top: -500px; border-left: 500px solid transparent; border-right: 0px solid transparent; border-top: 500px solid white; z-index: 101; } .neck { position: absolute; top: 26.5%; left: 28.75%; border-radius: 0px 0px 0px 50%; background-color: green; height: 30.5%; width: 8.75%; z-index: 100; overflow: hidden; } .neck2 { background: radial-gradient( circle at 110% -5%, rgba(0, 0, 0, 0) 70%, green 0px ); background-position: top right; height: 8%; width: 8%; position: absolute; top: 35%; left: 37.25%; outline:none; z-index: 101; } .innerNeck { position: absolute; top: 29.75%; left: 28.75%; border-radius: 0px 50px 0px 100%; background-color: darkblue; height: 25.5%; width: 6%; z-index: 101; } .mainBody { position: absolute; top: 42.4%; left: 34.75%; border-radius: 0px 75% 0px 90%; background-color: green; height: 21%; width: 21%; z-index: 101; } .mainBodyInner { position: absolute; top: 42.5%; left: 28.75%; border-radius: 0px 75% 0px 90%; background-color: darkblue; height: 28%; width: 33%; z-index: 100; } .mainBodyOuter { position: absolute; top: 47%; left: 40%; background-color: green; height: 12.5%; width: 31%; transform: rotate(18deg); z-index: 101; overflow: hidden; } .bodyMark1, .bodyMark2, .bodyMark3, .bodyMark4 { position: absolute; height: 60%; width: 20%; background-color: darkgreen; z-index: 102; border-radius: 0 0 50px 50px; transform: rotate(9deg); top: -5%; } .bodyMark1 { left: 0%; } .bodyMark2 { left: 25%; } .bodyMark3 { left: 50%; } .bodyMark4 { left: 75%; } .arm1, .arm2 { position: absolute; border-radius: 50px 0px 0px 0px; background-color: green; height: 3%; width: 11.5%; } .arm1 { left: 23.25%; top: 52%; z-index: 101; } .arm1Upper { position: relative; top: -375%; left: 75%; width: 25%; height: 375%; background-color: green; border-radius: 35px 0px 0px 0px; z-index: 102; } .arm2 { left: 21.25%; top: 46%; transform: rotate(45deg); z-index: 40; } .hand { position: relative; top: 95%; width: 25%; height: 100%; background-color: white; border-radius: 0px 0px 0px 35px; } .foot1, .foot2 { position: absolute; top: 91.5%; border-radius: 35px 0px 0px 0px; background-color: white; height: 3%; width: 6%; z-index: 100; } .foot1 { left: 37.2%; } .foot2 { left: 48.5%; } .tailInner { background: radial-gradient( circle at 30% 50%, rgba(0, 0, 0, 0) 58%, darkblue 0px ); background-position: top right; height: 25%; width: 25%; border-radius: 100%; position: absolute; top: 68%; left: 57%; z-index: 101; } .tailInner2 { background: radial-gradient( circle at 30% 85%, rgba(0, 0, 0, 0) 59%, darkblue 0px ); background-position: top right; height: 28%; width: 28%; border-radius: 100%; position: absolute; top: 63%; left: 54.5%; z-index: 101; } .tailOuter1 { background: radial-gradient( circle at 30% 58%, rgba(0, 0, 0, 0) 58%, green 0px ); background-position: top right; height: 35%; width: 35%; border-radius: 100%; position: absolute; top: 56%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0