css实现程序员日快乐动画效果
代码语言:html
所属分类:动画
代码描述:css实现程序员日快乐动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Amatic+SC"); .footer { bottom: 0; color: white; top: 35rem; font-size: 2rem; } .footer .title { font-family: 'Amatic SC'; text-align: center; } .footer .mod { color: #dc8e3e; } .footer .sub { display: flex; justify-content: space-around; font-size: 1rem; font-family: 'Amatic SC'; } .footer .sub a { color: pink; text-decoration: none; } .footer .sub a:hover { color: white; } body { width: 99%; height: 36rem; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #222; } .container { display: flex; justify-content: center; align-items: center; margin: auto; top: 0; bottom: 0; width: 26rem; border-radius: 26rem; overflow: hidden; height: 26rem; position: relative; } .objects_computer { position: absolute; width: 7rem; height: 5.5rem; background: #bfbfbf; left: 3.8rem; top: 14.8rem; transform: skew(17deg, 0deg); border-radius: 0.6rem 0.6rem 0 0; box-shadow: inset -6px 1px darkgrey; } .objects_computer:after { content: ''; position: absolute; width: 2rem; height: 0.5rem; background: darkgrey; top: 5.1rem; left: 7rem; transform: skew(0deg, 2deg); } .objects_table { position: absolute; width: 22rem; top: 20.4rem; height: 1.4rem; background: #63321f; left: 2rem; box-shadow: 0px -3px #582714; } .objects_table:before { content: ''; width: 19rem; height: 1.2rem; position: absolute; background: #582714; border-radius: 0 1rem; top: 1.4rem; left: 3rem; z-index: 1; } .objects_cup { position: absolute; width: 2.4rem; top: 17.2rem; background: #e67da4; left: 16.8rem; height: 3rem; border-radius: 0.3rem 0.3rem 0 0; z-index: 55; box-shadow: -2px 0px #f36b9d; } .objects_cup:after { content: ''; width: 2rem; height: 2rem; background: #e67da4; position: absolute; top: 0.7rem; left: 0.4rem; border: none; border-radius: 0; z-index: 5; } .objects_cup:before { content: ''; position: absolute; width: 1rem; height: 1.3rem; border: 4px solid #f36b9d; left: 1.6rem; top: 0.8rem; border-radius: 1rem; z-index: 1; } .objects_chair { height: 10.2rem; position: absolute; width: 9.1rem; background: #3c3c3c; left: 16.6rem; top: 10rem; border-radius: 2rem 2rem 0 0; transform: skew(-9deg, 0deg); box-shadow: inset -9px 5px #424242; } .box_1 { position: absolute; width: 5.4rem; height: 6.8rem; left: 1rem; top: 6.7rem; background-color: rgba(99, 102, 115, 0.709804); border-radius: 0.6rem; box-shadow: 1px 3px 5px #00000052; animation: float 2s infinite; } .box_1 div { background: #e67da4; position: absolute; border-radius: 1rem; } .box_1 :nth-child(1) { width: 1.8rem; height: 0.3rem; top: 1.2rem; left: 1.3rem; } .box_1 :nth-child(2) { width: 1rem; height: 0.3rem; top: 1.2rem; left: 3.3rem; } .box_1 :nth-child(3) { width: 1.1rem; height: 0.3rem; top: 2rem; left: 2.1rem; } .box_1 :nth-child(4) { width: 1.4rem; height: 0.3rem; top: 2rem; left: 3.3rem; } .box_1 :nth-child(5) { width: 0.7rem; height: 0.3rem; top: 2.7rem; left: 2.7rem; box-shadow: 1rem 0px #e67da4, 1.8rem 0px #e67da4, -0.5rem 11px #e67da4; } .box_1 :nth-child(6) { width: 1.8rem; height: 0.3rem; top: 4.1rem; left: 1.2rem; box-shadow: 1rem 22px #e67da4, 0rem 43px #e67da4; } .box_1 :nth-child(7) { width: 0.8rem; height: 0.3rem; top: 4.8rem; left: 1.7rem; box-shadow: 0rem 22px #e67da4; } .box_2 { position: absolute; width: 6.4rem; height: 4.4rem; left: 7.3rem; top: 1.7rem; background-color: rgba(99, 102, 115, 0.709804); border-radius: 0.6rem; box-shadow:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0