css+div实现宇航员太空漂浮动画效果代码
代码语言:html
所属分类:动画
代码描述:css+div实现宇航员太空漂浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap'> <style> body { background-color: #171640; padding: 0; margin: 0; } .wrapper { position: absolute; width: 31.25em; transform: translate(-50%, -50%); top: 50%; left: 50%; } .container { position: relative; height: 31.25em; border-radius: 50%; background-color: rgba(255, 255, 255, 0.05); } a { font-family: "Poppins", sans-serif; display: block; text-align: center; font-size: 1.4em; padding: 1em 0; margin-top: 2em; border-radius: 0.4em; background-color: #fbd31f; color: #171640; text-decoration: none; } .center { transform: translateX(-50%); left: 50%; } .planet { height: 12.5em; width: 12.5em; border-radius: 50%; position: absolute; background-color: #f5d201; top: 2.81em; left: 13.75em; } .planet:before { position: absolute; content: ""; background-color: #fcec8e; height: 1.25em; width: 6.87em; border-radius: 0.62em; top: 3em; left: 4.25em; box-shadow: 1.43em 3.65em 0 -0.25em #fcec8e, -1.25em 4.75em 0 0.12em #fcec8e; } .planet:after { position: absolute; content: ""; background-color: #edb514; height: 0.75em; width: 2.5em; border-radius: 0.46em; top: 1.87em; left: 3em; box-shadow: -1.25em 3.75em 0 0.37em #edb514, 4.06em 8.43em 0 0.12em #edb514; } .shadow { position: absolute; background-color: transparent; box-shadow: 0.93em 0.93em rgba(134, 123, 5, 0.3); height: 12.5em; width: 12.5em; border-radius: 50%; bottom: 0.93em; right: 0.93em; } .astronaut { position: absolute; height: 17.5em; width: 15.62em; top: 7.5em; left: 6.25em; transform: rotate(-30deg); -webkit-animation: float 5s infinite; animation: float 5s infinite; } @-webkit-keyframes float { 50% { transform: rotate(-30deg) translateY(1.87em); } } @keyframes float { 50% { transform: rotate(-30deg) translateY(1.87em); } } .suit { position: absolute; background-color: #e2e9f4; height: 6.25em; width: 6.25em; border-radius: 10%; top: 5.5em; } .helmet { background-color: #e2e9f4; height: 5.8125em; width: 6.25em; border-radius: 45%; position: absolute; top: -5.43em; } .helmet:before { position: absolute; content: ""; background-color: #64c1f7; height: 3.75em; width: 5em; border-radius: 60% 60% 40% 40%; left: 0.62em; top: 0.43em; } .helmet:after { content: ""; position: absolute; background-color: rgba(255, 255, 255, 0.3); height: 0.93em; width: 0.93em; border-radius: 50%; left: 1.25em; top: 1.56em; } .tank { position: absolute; background-color: #aec3d2; height: 7.5em; width: 7.5em; border-radius: 0.62em; top: 5em; } .buttons { background-color: #bdd3f3; width: 3.43em; height: 1.87em; border-radius: 0.5em; position: absolute; top: 1.56em; } .buttons:after { position: absolute; content: ""; height: 0.75em; width: 0.75em; border-radius: 50%; background-color: #1683ed; top: 0.62em; left: 0.25em; box-shadow: 1.12em 0 #fbd31f, 2.25em 0 #e62c1b; } .buttons:before { position: absolute; content: ""; height: 1.25em; width: 1.25em; border-radius: 50%; background-color: #aec3d2; top: 2.5em; left: 1.12em; } .hand-l, .hand-r { p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0