div+css布局实现睡觉中的圣诞老人效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现睡觉中的圣诞老人效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { width: 100%; height: 100%; } * { box-sizing: border-box; } .snores { position: absolute; left: 45%; top: 45%; font-family: cursive; } .snore { font-size: 28px; color: #eeeff1; position: absolute; top: 40px; } .snore1 { -webkit-animation: snore-anim 3s linear 0s infinite; animation: snore-anim 3s linear 0s infinite; } .snore2 { -webkit-animation: snore-anim 3s linear 1s infinite; animation: snore-anim 3s linear 1s infinite; } .snore3 { -webkit-animation: snore-anim 3s linear 2s infinite; animation: snore-anim 3s linear 2s infinite; } @-webkit-keyframes snore-anim { 0% { opacity: 1; transform: translate(0,0) scale(0.5); } 50% { opacity: 0.7; transform: translate(20px, -70px) scale(1.2); } 100% { opacity: 0; transform: translate(50px, -140px) scale(0.5); } } @keyframes snore-anim { 0% { opacity: 1; transform: translate(0,0) scale(0.5); } 50% { opacity: 0.7; transform: translate(20px, -70px) scale(1.2); } 100% { opacity: 0; transform: translate(50px, -140px) scale(0.5); } } .disc { background-color: #c0c4c7; border-radius: 50%; width: 285px; height: 45px; position: absolute; left: -55px; bottom: -35px; z-index: -2; } .circular-bg { background-color: #EEEEEE; border-radius: 50%; width: 500px;height: 500px; box-shadow: 0 550px 0 -250px #093D55 inset; border: 1px solid; position: relative; z-index: 5; margin: 20px auto; } .moon { width: 80px; height: 80px; box-shadow: -40px 0px 0 0 #fff inset; border-radius: 50%; background-color: #093D55; position: absolute; right: 130px; top: 50px; } .santa { position: absolute; left: 35%; bottom: 25%; } .hat-space { width: 75px; height: 100px; box-shadow: 30px 0 0 0 #fff inset; border-radius: 50%; background-color: transparent; position: absolute; left: 45px; bottom: -18px; transform: rotate(35deg); } .hat { width: 100px; height: 65px; background-color: #DA4642; border-radius: 100% 20% 20% 20%; position: absolute; left: -60px; bottom: 20px; transform: rotate(-15deg); } .furr { width: 35px; height: 35px; border-radius: 50%; background-color: #fff; position: absolute; bottom: -10px; right: 40px; } .face { width: 60px; height: 90px; box-shadow: 30px 0px 0 0 #F5CFC1 inset; border-radius: 50%; background-color: transparent; position: absolute; left: 10px; bottom: 10px; transform: rotate(20deg); } .eyebrows { width: 10px; height: 23px; border-radius: 50%; background-color: transparent; position: absolute; transform: rotate(-15deg); -webkit-animation: eye-scale ease-in-out 1.5s infinite; animation: eye-scale ease-in-out 1.5s infinite; } @-webkit-keyframes eye-scale { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } @keyframes eye-scale { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } .eyebrows--left { left: 10px; bottom: 10px; box-shadow: 5px 0px 0 0 #fff inset, 8px 0px 0 -4px #000 ; } .eyebrows--right { left: 10px; bottom: 50px; box-shadow: 5px 0px 0 0 #fff inset, 8px 0px 0 -4px #000 ; transform: rotate(10deg); } .nose { width: 1px; height: 1px; border-radius: 50%; background-color: transparent; position: absolute; box-shadow: 5px -8px 0 2.5px #F5CFC1,10px -12px 0 12px #edb39e; left: 23px; bottom: 27px; z-index:1; } .beard { width: 65px; height: 65px; border-radius: 50%; background-color: #fff; position: absolute; top: -4px; left: 29px; transform: rotate(25deg); box-shadow: 15px 40px 0 -5px #fff, 35px 40px 0 -3px #fff, 20px -15px 0 0px #fff; } .beard--left { width: 30px; height: 15px; border-radius: 0 0 50% 50%; background-color: #fff; position: absolute; right: 15px; bottom: -52px; transform: rotate(-30deg); } .beard--right { width: 30px; height: 15px; border-radius:50% 50% 0 0; background-color: #fff; position: absolute; right: 55px; bottom: 40px; transform: rotate(-10deg); } .mouth { width: 12px; height: 12px; border-radius:50%; background-color: #F2ABA1; position: absolute; right: -5px; bottom: 30px; -webkit-animation: mouth-scale ease-in-out 1.5s infinite; animation: mouth-scale ease-in-out 1.5s infinite; } @-webkit-keyframes mouth-scale { 0% { transform: scale(1); } 100% { transform: scale(1.4); } } @keyframes mouth-scale { 0% { transform: scale(1); } 100% { transform: scale(1.4); } } @-webkit-keyframes arm-anim { 0% { transform: rotate(-25deg); } 30% { width: 30px; height: 65px; transform: rotate(-85deg) translate(10px, 10px); border-radius: 0 80% 80% 0; border: none; box-shadow:-2px 10px 0 -3px #fff, -20px 8px 0 0 #B03331 inset, -20px -10px 0 0 #B03331 inset, -20px 15px 0 0 #B03331 inset; } 70% { width: 30px; height: 65px; transform: rotate(-85deg) translate(10px, 10px); border-radius: 0 80% 80% 0; border: none; box-shadow:-2px 10px 0 -3px #fff, -20px 8px 0 0 #B03331 inset, -20px -10px 0 0 #B03331 inset, -20px 15px 0 0 #B03331 inset; } 100% { width: 26px; height: 65px; border-radius: 20px 20px 0 0; background-color: transparent; transform: rotate(-25deg); box-shadow: 0px 8px 0 0 #fff, -26px 8px 0 0 #B03331 inset; } } @keyframes arm-anim { 0% { transform: rotate(-25deg); } 30% { width: 30px; height: 65px; transform: rotate(-85deg) translate(10px, 10px); border-radius: 0 80% 80% 0; border: none; box-shadow:-2px 10px 0 -3px #fff, -20px 8px 0 0 #B03331 inset, -20px -10px 0 0 #B03331 inset, -20px 15px 0 0 #B03331 inset; } 70% { width: 30px; height: 65px; transform: rotate(-85deg) translate(10px, 10px); border-radius: 0 80% 80% 0; border: none; box-shadow:-2px 10px 0 -3px #fff, -20px 8px 0 0 #B03331 inset, -20px -10px 0 0 #B03331 inset, -20px 15px 0 0 #B03331 inset; } 100% { width: 26px; height: 65px; border-radius: 20px 20px 0 0; background-color: transparent; transform: rotate(-25deg); box-shadow: 0px 8px 0 0 #fff, -26px 8px 0 0 #B03331 inset; } } .hand--up { position: absolute; left: 95px; bottom: 85px; } .arm--right { width: 26px; height: 65px; border-radius: 20px 20px 0 0; background-color: transparent; position: absolute; transform: rotate(-25deg); box-shadow: 0px 8px 0 0 #fff, -26px 8px 0 0 #B03331 inset; -webkit-animation: arm-anim 6s linear 20ms infinite; animation: arm-anim 6s linear 20ms infinite; transform-origin: 0 15px; } .hand--right { width: 18px; height: 25px; border-radius: 0 0 50px 20px; background-color: #4C4C4C; position: absolute; transform: rotate(-20deg); transform-origin: 0 0; -webkit-animation: hand-anim 6s linear 20ms infinite; animation: hand-anim 6s linear 20ms infinite; } @-webkit-keyframes hand-anim { 0% { transform: scale(1) translate(30px,64px) rotate(-25deg); } 15% { transform: scale(1) translate(55px, 45px) rotate(-55deg); } 30% { transform: scale(1) translate(65px, 8px) rotate(-85deg); } 40% { transform: scaleX(0.8) translate(80px, 8px) rotate(-85deg); } 50% { transform: scaleX(1) translate(65px, 8px) rotate(-85deg); } 60% { transform: scaleX(0.8) translate(80px, 8px) rotate(-85deg); } 70% { transform: scale(1) translate(65px, 8px) rotate(-85deg); } 85% { transform: scale(1) translate(55px, 45px) rotate(-55deg); } 100% { transform: scale(1) translate(30px,64px) rotate(-25deg); } } @keyframes hand-anim { 0% { transform: scale(1) translate(30px,64px) rotate(-25deg); } 15% { transform: scale(1) translate(55px, 45px) rotate(-55deg); } 30% { transform: scale(1) translate(65px, 8px) rotate(-85deg); } 40% { transform: scaleX(0.8) translate(80px, 8px) rotate(-85deg); } 50% { transform: scaleX(1) translate(65px, 8px) rotate(-85deg); } 60% { transform: scaleX(0.8) translate(80px, 8px) rotate(-85deg); } 70% { transform: scale(1) translate(65px, 8px) rotate(-85deg); } 85% { transform: scale(1) translate(55px, 45px) rotate(-55deg); } 100% { transform: scale(1) translate(30px,64px) rotate(-25deg); } } .hand--right:before { content: ''; width: 10px; height: 15px; border-radius: 5px 0 50% 50%; background-color: #4C4C4C; position: absolute; left: -5px; bottom: 10px; transform: rotate(30deg); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0