纯css实现丰富的表情
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html, body { padding: 0; margin: 0; background-color: #f0f0f0; } .container { position: relative; display: flex; width: 100%; height: 100%; flex-flow: row wrap; justify-content: center; align-content: center; } .avatar { width: 200px; height: 200px; border-radius: 20px; margin-right: 5vmax; margin-top: 3vmax; margin-left: 5vmax; margin-bottom: 2vmax; overflow: hidden; opacity: 1; box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.3); } .avatar--green { background: linear-gradient(toright, #bcc8ff, #c466e7); } .avatar--orange { background: linear-gradient(toright, rgba(252, 110, 149, 0.6), #d95413 95%); } .avatar--pinkish { background: linear-gradient(toright, #dabeeb, #b60ebf); } .avatar--blue { background: linear-gradient(toright, #de9eff, #7047fe); } .avatar--magenta { background: linear-gradient(toright, #f8c0e8, #da34dd); } .avatar--skyBlue { background: linear-gradient(toright, #e0e8e9, #397ffe); } .avatar-body { position: relative; left: 50%; top: 70%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50%; height: 80%; box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5); } .avatar-body--round { width: 75%; border-radius: 90%; } .body--green { background: linear-gradient(toright, #e6f4ca, #11513a); border-top-left-radius: 50px; border-top-right-radius: 50px; } .body--pink { background: linear-gradient(125deg, #fbc5d3, #a5156f); } .body--violet { background: linear-gradient(65deg, #ecc1eb, #411695); border-top-left-radius: 50px; border-top-right-radius: 50px; } .body--darkPink { background: linear-gradient(135deg, #ec9ca7, #ae0486); border-top-left-radius: 20px; border-top-right-radius: 20px; } .body--pinkishViolet { background: linear-gradient(45deg, #f295e3, #6008a6); border-top-left-radius: 50px; border-top-right-radius: 50px; } .body--limeGreen { background: linear-gradient(totop, #f4de39, #228d36); border-top-left-radius: 50px; border-top-right-radius: 50px; box-shadow: none; } .avatar-eye { position: absolute; top: 5%; left: 50%; width: 65px; height: 65px; background: linear-gradient(105deg, white, #cb87f4); border-radius: 100%; box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2); margin: 5px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .avatar-eye--orange { background: linear-gradient(tobottom, #fdfdfd, #fac798); } .avatar-eye--green { background: linear-gradient(tobottom, #fdfdfd, #c3efea); } .avatar-eye--violet { background: linear-gradient(tobottom, #fdfdfd, #e6d6f6); } .avatar-eye--magenta { background: linear-gradient(tobottom, #fdfdfd, #d195fd); } .eye--left { left: 10%; } .eye--right { left: 85%; } .eye--center { left: 45%; top: 10%; } .eye--center-top { left: 45%; top: -15%; } .body--violet .avatar-eye { top: -20%; width: 55px; height: 55px; } .body--violet > .eye--left { left: 15%; } .body--violet > .eye--right { left: 80%; } .avatar-eye-pupil { position: absolute; width: 55%; height: 55%; left: 50%; top: 25%; -webkit-transform: translate(-50%); transform: translate(-50%); z-index: 100; border-radius: 100%; } .pupil--purple { background: linear-gradient(135deg, #daabe5, #682d9d 75%); } .pupil--purple::after { content: ''; } .pupil--green { background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%); } .pupil--pink { background: linear-gradient(135deg, #f1a183, #8535cd); } .pupil--limeGreen { background: linear-gradient(135deg, #89e1a0, #3ba8af 75%); } .pupil--orange { background: linear-gradient(135deg, #fbdbb5, #d58138 75%); } .avatar-eye-pupil-blackThing { position: absolute; width: 55%; height: 55%; left: 50%; top: 25%; background: #2c2f32; -webkit-transform: translate(-50%); transform: translate(-50%); border-radius: 100%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); } .avatar-eye-pupil-lightReflection { position: absolute; width: 7px; height: 7px; left: 25%; top: 10%; background: #ebebeb; -webkit-transform: translate(-50%); transform: translate(-50%); border-radius: 100%; box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2); } .avatar-smile { position: absolute; left: 50%; top: 60%; -webkit-transform: translate(-50%); transform: translate(-50%); padding: 0.2em; transition: 0.2s all linear; width: 60px; height: 23px; background: rgba(0, 0, 0, 0.3); border: 2px solid #60a38a; border-radius: 10px; } .body--pink > .avatar-smile { top: 60%; width: 50px; height: 10px; border-color: rgba(243, 166, 222, 0.5); border-radius: 10px; } .body--violet > .avatar-smile { background: #8f3c93; height: 50px; width: 40px; border: 5px solid #c67fe8; top: 20%; border-radius: 100%; } .body--darkPink > .avatar-smile { border: 10px solid #a42883; top: 20%; width: 70px; height: 70px; background: transparent; border-radius: 50%; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; } .body--pinkishViolet > .avatar-smile { border: 10px solid #7b408e; top: 60%; width: 70px; height: 70px; background: transparent; border-radius: 50%; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; } .body--limeGreen > .avatar-smile { background: #1e8124; height: 30px; width: 25px; border: 10px solid #2ca446; top: 40%; border-radius: 100%; } .avatar-tongue { position: absolute; left: 50%; top: 0%; -webkit-transform: translate(-50%); transform: translate(-50%); width: 50%; height: 300%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; background: #b44390; } .avatar-horn { position: absolute; left: 65%; top: -10%; -webki.........完整代码请登录后点击上方下载按钮下载查看
网友评论0