CSS 能做出令人叹为观止的动漫人物,让我们一起来欣赏吧!下面是一份典型的 CSS 代码:
body { background-color: #EEE; } .head { width: 100px; height: 100px; border-radius: 50%; background-color: #FFDAB9; position: absolute; top: 50px; left: 50px; Box-shadow: 0 0 20px rgba(0,0.5); transform: rotate(45deg); transform-origin: center center; } .eye { width: 20px; height: 20px; border-radius: 50%; background-color: #000; position: absolute; top: 40px; left: 45px; } .eye::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background-color: #FFF; position: absolute; top: 5px; left: 5px; } .mouth { width: 40px; height: 40px; border-radius: 50%; background-color: #FFF; position: absolute; top: 75px; left: 55px; border: 5px solid #000; transform-origin: center bottom; transform: skewY(-20deg); } .mouth::after { content: ""; display: block; width: 15px; height: 15px; border-radius: 50%; background-color: #000; position: absolute; top: 10px; left: 10px; } .hair { width: 70px; height: 70px; background-color: #A52A2A; position: absolute; top: 30px; left: 30px; transform: rotate(-45deg); transform-origin: bottom center; Box-shadow: 0 0 10px rgba(0,0.5); } .hair::before,.hair::after { content: ""; display: block; width: 50px; height: 50px; background-color: #A52A2A; position: absolute; top: -50px; left: 10px; transform: rotate(45deg); transform-origin: bottom center; Box-shadow: 0 0 10px rgba(0,0.5); } .hair::after { top: -65px; left: 25px; transform: rotate(-45deg); transform-origin: bottom center; Box-shadow: 0 0 10px rgba(0,0.5); } .tie { width: 30px; height: 30px; background-color: #FF0000; position: absolute; top: 130px; left: 70px; border-radius: 50%; border: 5px solid #000; transform: rotate(-45deg); transform-origin: center center; }