css实现卡通飞碟入场出场动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现卡通飞碟入场出场动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0 auto; -webkit-user-select: none; } body { height: 100vh; overflow: hidden; animation: bodycolor 16s infinite; } .container { position: absolute; width: 100%; height: 100%; overflow: hidden; } .spaceship { position: absolute; top: 30%; height: 250px; width: 300px; margin-left: -150px; animation: spaceshipleft 8s infinite; } .spaceship_top { margin: auto; position: absolute; bottom: 0; left: 0; top: 0; right: 0; top: -150px; height: 150px; width: 200px; background-color: #f6a7ba; border-radius: 8rem 8rem 0 0; box-shadow: inset 6px 2px 3px 0 #c2c2c2; } .spaceship_top::before { content: ""; position: absolute; left: 150px; top: 32px; height: 8px; width: 10px; background-color: white; border-radius: 2rem; transform: rotate(42deg); } .spaceship_top::after { content: ""; position: absolute; left: 130px; top: 20px; height: 10px; width: 20px; background-color: white; border-radius: 2rem; transform: rotate(32deg); } .spaceship_middle { margin: auto; position: absolute; bottom: 0; left: 0; top: 0; right: 0; width: 300px; height: 70px; overflow: hidden; border-radius: 5rem; box-shadow: inset 6px 2px 3px 0 #c2c2c2; z-index: 3; animation: colorswap_middle 16s infinite; } .spaceship_bottom { margin: auto; position: absolute; bottom: 0; left: 0; top: 0; right: 0; top: 75px; width: 165px; height: 30px; background-color: #9c0327; border-radius: 0 0 2rem 2rem; z-index: -1; box-shadow: inset 5px 2px 3px 0 #c2c2c2; z-index: 2; } .abduct_hole1 { position: absolute; left: 32px; border: 2px solid white; border-radius: 50%; background: rgba(0, 0, 0, 0); width: 100px; height: 100px; transform: rotateX(75deg); animation: abduct 8s infinite, abductcolor 16s infinite; } .abduct_hole2 { position: absolute; left: 32px; top: 20px; border: 2px solid white; border-radius: 50%; background: rgba(0, 0, 0, 0); width: 100px; height: 100px; transform: rotateX(75deg); animation: abductreverse 8s 0.1s infinite, abductcolor 16s infinite; } .abduct_hole3 { position: absolute; left: 32px; top: 35px; border: 2px solid white; border-radius: 50%; background: rgba(0, 0, 0, 0); width: 100px; height: 100px; transform: rotateX(75deg); animation: abduct 8s 0.2s infinite, abductcolor 16s infinite; } .abduct_hole4 { position: absolute; left: 30px; top: 50px; border: 2px solid white; border-radius: 50%; background: rgba(0, 0, 0, 0); width: 100px; height: 100px; transform: rotateX(75deg); animation: abductreverse 8s infinite, abductcolor 16s infinite; } .abduct_hole5 { position: absolute; left: 32px; top: 70px; border: 2px solid white; border-radius: 50%; background: rgba(0, 0, 0, 0); width: 100px; height: 100px; transform: rotateX(75deg); animation: abductreverse 8s infinite, abductcolor 16s infinite; } .spaceship_balls_1 { position: absolute; top: 10px; height: 50px; width: 50px; border-radius: 50%; animation: moveleft 3s linear infinite, colorswap 16s infinite; box-shadow: inset 6px 2px 3px 0 #c2c2c2; } .spaceship_balls_1::before { content: ""; position: absolute; top: 0; left: 60px; background-color: inherit; width: 50px; height: 50px; border-radius: 50%; box-shadow: inset 6px 2px 3px 0 #c2c2c2; } .spaceship_balls_1::after { content: ""; position: absolute; top: 0; left: 120px; background-color: inherit; width: 50px; height: 50px; border-radius: 50%; box-shadow: inset 6px 2px 3px 0 #c2c2c2; } .spaceship_balls_2 { position: absolute; top: 10px; height: 50px; width: 50px; left: 360px; border-radius: 50%; animation: moveleft 3s linear 0.64s infinite, colorswap 16s infinite; box-shadow: inset 6px 2px 3px 0 #c2c2c2; } .spaceship_balls_2::before { content: ""; position: absolute; top: 0; left: 60px; background-color: inherit; width: 50px; height: 50px; border-radius: 50%; box-shadow: inset 6px 2px 3px 0 #c2c2c2; } .spaceship_balls_2::after { content: ""; position: absolute; top: 0; left: 120px; background-color: inherit; width: 50px; height: 50px; border-radius: 50%; box-shadow: inset 6px 2px 3px 0 #c2c2c2; } .spaceship_balls_3 { position: absolute; top: 10px; height: 50px; width: 50px; left: 720px; border-radius: 50%; animation: moveleft 3s linear 1.28s infinite, colorswap 16s infinite; box-shadow: inset 6px 2px 3px 0 #c2c2c2; } .spaceship_balls_3::before { content: ""; position: absolute; top: 0; left: 60px; background-color: inherit; width: 50px; height: 50px; border-radius: 50%; box-shadow: inset 6px 2px 3px 0 #c2c2c2; } .spaceship_balls_3::after { content: ""; position: absolute; top: 0; left: 120px; background-color: inherit; width: 50px; height: 50px; border-radius: 50%; box-shadow: inset 6px 2px 3px 0 #c2c2c2; } .spaceship_balls_4 { position: absolute; top: 10px; height: 50px; width: 50px; left: 1080px; border-radius: 50%; animation: moveleft 3s linear 1.92s infinite, colorswap 16s infinite; box-shadow: inset 6px 2px 3px 0 #c2c2c2; } .spaceship_balls_4::before { content: ""; position: absolute; top: 0; left: 60px; background-color: inherit; width: 50px; height: 50px; border-radius: 50%; box-shadow: inset 6px 2px 3px 0 #c2c2c2; } .spaceship_balls_4::after { content: ""; position: absolute; top: 0; left: 120px; background-color: inherit; width: 50px; height: 50px; border-radius: 50%; box-shadow: inset 6px 2px 3px 0 #c2c2c2; } .spaceship_balls_5 { position: absolute; top: 10px; height: 50px; width: 50px; left: 1440px; border-radius: 50%; animation: moveleft 3s linear 2.56s infinite, colorswap 16s infinite; box-shadow: inset 6px 2px 3px 0 #c2c2c2; } .spaceship_balls_5::before { content: ""; position: absolute; top: 0; left: 60px; background-color: inherit; width: 50px; height: 50px; border-radius: 50%; box-shadow: inset 6px 2px 3px 0 #c2c2c2; } .spaceship_balls_5::after { content: ""; position: absolute; top: 0; left: 120px; background-color: inherit; width: 50px; height: 50px; border-radius: 50%; box-shadow: inset 6px 2px 3px 0 #c2c2c2; } .robot { text-align: center; width: 300px; position: absolute; left: 50%; margin-left: -150px; margin-top: -200px; transform: scale(0.25); z-index: 1; animation: robotup 16s infinite; } #half { text-align: center; width: 280px; height: 200px; background: #f16385; border: 10px solid #a62a48; border-top-left-radius: 300px; border-top-right-radius: 300px; } #brain { margin: 0 auto; margin-top: 20px; width: 160px; height: 60px; background: #f48aa3; border: 20px solid #d6365c; border-top-left-radius: 200px; border-top-right-radius: 200px; } #head { position: inherit; top: 140px; right: -10px; width: 320px; height: 100px; background: #162736; } #foot { position: inherit; top: 240px; left: 10px; width: 280px; height: 20px; background: #162736; } #le { margin-top: 20px; margin-right: 10px; display: inline-block; width: 33.33333333px; height: 33.33333333px; border: 10px solid #d6365c; border-radius: 50%; background: #f8b1c2; } #re { margin-left: 10px; display: inline-block; width: 33.33333333px; height: 33.33333333px; border: 10px solid #d6365c; border-radius: 50%; background: #f8b1c2; } #lc { margin-right: 10px; display: inline-block; width: 12.5px; height: 12.5px; border-radius: 50%; background: #ee3d67; box-shadow: 0 0 5px #ff0066; -webkit-box-shadow: 0 0 5px #ff0066; -moz-box-shadow: 0 0 5px #ff0066; } #rc { display: inline-block; width: 12.5px; height: 12.5px; border-radius: 50%; background: #ee3d67; box-shadow: 0 0 5px #ff0066; -webkit-box-shadow: 0 0 5px #ff0066; -moz-box-shadow: 0 0 5px #ff0066; } #mouth { z-index: 9999; position: inherit; margin-top: 10px; margin-left: 150px; height: 10px; width: 20px; border-radius: 0 0 90px 90px; -moz-border-radius: 0 0 90px 90px; -webkit-border-radius: 0 0 90px 90px; border-right: 5px solid #ee3d67; border-left: 5px solid #ee3d67; border-bottom: 5px solid #ee3d67; } #leg-1 { display: inline-block; position: relative; top: 60px; left: 10px; width: 100px; height: 20px; background: #162736; transform: rotate(60deg); -ms-transform: rotate(60deg); /* IE 9 */ -webkit-transform: rotate(60deg); /* Safari and Chrome */ border-top-rig.........完整代码请登录后点击上方下载按钮下载查看
网友评论0