body { background-color:#12172a; } .head { margin:100px auto 0; width:400px; height:400px; background-image:radial-gradient(#f7e4aa 150px,#e6ba63); border-radius:50%; position:relative; } .leftmei,.rightmei { height:150px; width:80px; position:absolute; top:0; border-radius:40px/75px; /*transform:rotateZ(0deg); */ animation:mei 0.2s infinite alternate; -webkit-animation:mei 0.2s infinite alternate; } .leftmei { background-image:radial-gradient(50px 75px at 35px 90px,transparent 99%,#000 60%); left:50px; -webkit-transform:rotateZ(-10deg); transform:rotateZ(-10deg); } .rightmei { background-image:radial-gradient(50px 75px at 45px 90px,transparent 99%,#000 60%); right:50px; transform:rotateZ(10deg); -webkit-transform:rotateZ(10deg); } .lefteye,.righteye { width:150px; height:50px; border-color:#000; border-top-style:solid; /*border-bottom-style:solid; */ /* border-bottom-style:hidden; */ position:absolute; top:80px; background-image:radial-gradient(75px 20px at bottom center,transparent 99%,#000 99%,#fff 60%); border-radius:75px/25px; box-shadow:5px 48px 10px -10px pink; } .righteye { right:0; } .lefteye .eyeball,.righteye .eyeball { width:25px; height:25px; background-color:#000000; border-radius:50%; margin:10px; animation:ball 3s; -webkit-animation:ball 3s ease-out infinite; } .mouth { width:300px; height:150px; margin:200px 50px; /*background:#000; */ position:absolute; overflow:hidden; } .mouth::before { content:""; width:300px; height:300px; background-color:#865a1b; border-radius:50%; position:absolute; top:-150px; } .mouth::after { content:""; width:300px; height:300px; background-color:#f7e4aa; position:absolute; top:-160px; border-radius:50%; } @-webkit-keyframes mei { 100% { top:-10px; -webkit-transform:rotateZ(0deg); } }@keyframes mei { 100% { top:-10px; transform:rotateZ(0deg); } }@keyframes ball { 0% { margin:10px; } 70% { margin:10px 125px 0; } 100% { margin:10px; } }@-webkit-keyframes ball { 70% { margin:10px 125px 0; } 100% { margin:10px; } }
挺简单的纯css动画眼睛、眉毛是用渐变画的