使用 css 代码画一只玉兔,迎中秋佳节
前言:中秋佳节,大家都在讨论月饼啊、嫦娥啊,但我们怎么能忘了可爱的玉兔呢。今天我们就来用 css 画一只玉兔出来。
演示:
代码
HTML代表
<div class="container"> <div class="rabbit"> <div class="head"> <div class="left-ear ear"></div> <div class="right-ear ear"></div> <div class="left-eye eye"></div> <div class="right-eye eye"></div> <div class="nose"></div> </div> <div class="body"> <div class="left-hand hand"></div> <div class="right-hand hand"></div> <div class="left-leg hand"></div> <div class="right-leg hand"></div> <div class="tail"></div> </div> </div> </div>
CSS代码
body { height: 100vh; width: 100vw; padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; } .rabbit { position: relative; } .head { position: absolute; height: 50px; width: 50px; border-radius: 50%; border: 1px solid #000; z-index: 333; } .ear { position: absolute; border: 1px solid #000; border-bottom: none; border-top-left-radius: 50%; border-top-right-radius: 50%; transform: skewX(20deg); background-color: #fff; width: 12px; top: -40px; } .ear::after { content: ''; width: 6px; width: 50%; height: 84%; border-radius: 10px; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); top: 5px; background-color: pink; } .left-ear { left:-4px; height: 50px; transform: skewX(20deg); } .right-ear { right:14px; height: 45px; transform: skewX(10deg); } .eye { position: absolute; top: 32%; width: 8px; height: 10px; border-radius: 50%; transform: skewX(4deg); background-color: rgba(0, 0, 0, 0.896); } .eye::after { position: absolute; content: ''; width: 4px; height: 4px; border-radius: 50%; transform: skewX(4deg); background-color: #fff; } .left-eye { left: 14px; } .right-eye { right: 6px; } .nose { position: absolute; bottom: 10px; left: 60%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.325); } .body { border: 1px solid #000; width: 80px; height: 60px; border-radius: 46%; position: absolute; top: -0px; left: -82px; z-index: -3; } .hand { position: absolute; bottom: -10px; height: 20px; width: 10px; border-radius: 40%; border: 1px solid #000; transform: skewX(10deg); } .right-hand { transform: skewX(26deg); right: 8px; animation: leg 0.5s alternate infinite; } .left-hand { right: 21px; animation: leg 0.5s alternate infinite; } .right-leg { left: 15px; transform: skewX(-26deg); animation: hand 0.5s alternate infinite; } .left-leg { left: 26px; transform: skewX(-10deg); animation: hand 0.5s alternate infinite; } .tail { position: absolute; left: -10px; top: 3px; height: 14px; width: 14px; border-radius: 50%; border: 1px solid #000; } @keyframes hand { 0% { transform: rotate(0deg); } 100% { transform: rotate(60deg); } } @keyframes leg { 0% { transform: rotate(0deg); } 100% { transform: rotate(-60deg); } }
涉及知识点
position
relative
相对定位是一个非常容易理解的概念,如果将一个元素设置为相对定位,可以设置其水平位置和垂直位置,这个元素相对于元素的起点开始移动。需要注意的一个地方是,相对定位的元素虽然位移了,但是原本位置的空间 仍是被占据的 。
absolute
绝对定位,绝对定位是相对于非 static
定位的元素来说的,如果没有,则默认为 body
。工作中我们经常的使用 relative
给父元素,子元素设置为 absolute
来设置子元素的位置。
伪元素 ::after
用来向选中的元素后插入一个内容,通常配合 content
属性使用,来指定要插入的内容。
transform 变换
transform
向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
rotate
:用来将元素旋转给定的角度。可以按照度数、刻度、弧度或转角设置角度。本文使用角度设置,单位为 deg
。
transform
:本文中使用到了 skewX
倾斜,translateX
沿 x
轴移动。使用绝对定位搭配 translateX
还可以实现未知宽度的横向居中。skewX
向 x
轴倾斜一定的角度。
结语
代码虽然简单,但也是学以致用的一种体现,多结合不同的技巧,可以更好的帮助我们理解。
作者:CatWatermelon 来源:稀土掘金
赞助商链接![设计达人微信交流社区:shejidaren888](http://images.shejidaren.com/banner/shejidaren-weixin-single.png)
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。