运用CSS实现皮卡丘
预备工作
在开端写皮卡丘以前,我先调查了皮卡丘的整个页面。发明要是要非常不错的实现这个皮卡丘你不克不及像写传统网页那样从左到右布局,而是要从中间布局,由于摆布两边对称。理分明了思绪之后此刻开端编写页面构造。
页面构造如上图所示,当我们编写完html构造,就可以动手去写css。
CSS的实现
在这个地方我们可以临时先停一下,再次理清思绪。这个皮卡丘的最难点的局部在哪里?在于皮卡丘嘴巴上的弧线以及下面椭圆形的舌头。
在实现皮卡丘嘴巴上的弧线时,我发生了两个设法。首先用一个标签包裹实现这个弧线,第二离别用两个标签去包裹实现这两个弧线。终究我选中了第二种。在这里我调查皮卡丘嘴巴上的弧线发明这个弧线就是圆角矩形的四分之一,加上扭转就可以实现这两个弧线。
概括实现如下
.mouth .up { position: relative; top: -20px; z-index: 1;
}.mouth .up .lip { border: 3px solid black; height: 30px; width: 100px; background: #ffe600; border-top-color: transparent; border-right-color: transparent; position: relative; position: absolute; left: 50%; margin-left: -50px;
}.mouth .up .lip.left { border-radius: 0 0 0 35px; transform: rotate(-20deg) translateX(-53px);
}.mouth .up .lip.right { border-radius: 0 0 35px 0; transform: rotate(20deg) translateX(53px);
}.mouth .up .lip::before { content: ''; display: block; width: 7px; height: 30px; position: absolute; bottom: 0; background: #ffe600;
}.mouth .up .lip.left::before { right: -6px;
}.mouth .up .lip.right::before { left: -6px;
}
首先个大难点已经解决,接下来解决第二个难点。怎样实现皮卡丘的下嘴唇。
调查皮卡丘的舌头我发明这现实上是一个椭圆的一局部或者圆角矩形的一局部,那我就需要截取一局部的椭圆或者圆角矩形就能实现皮卡丘的舌头。第二个解决点怎么实现皮卡丘舌头粉色的局部,有了上面的思绪之后,沿着这个思绪继续想,现实上这就是两个圆角矩形或者椭圆形的接壤处实现的。
画的不是太好各位客官见谅了。
概括的代码的实现如下
.mouth .down { height: 180px; position: absolute; top: 5px; width: 100%; overflow: hidden;
}.mouth .down .yuan1 { border: 3px solid black; width: 150px; height: 1000px; position: absolute; bottom: 0; left: 50%; margin-left: -75px; border-radius: 75px/300px; background: #9b000a; overflow: hidden;
}.mouth .down .yuan1 .yuan2 { width: 200px; height: 300px; background: #ff485f; position: absolute; bottom: -160px; left: 50%; margin-left: -100px; border-radius: 100px;
}
这两个难点解决了差未几就完成了整个皮卡丘的一半,剩下的就可以本人去完成了。
结尾
当我写完了皮卡丘的css之后只能感慨于css的奇异,也让我更加深刻的了解了css。在此以前我以为css很简略,但是真正做皮卡丘的时候,还是特殊特殊难,这个难在于需要你用许许多多的办法去实现你想要的结果,这就需要非常不错的根基以及设法,在此谢谢引导我的各位老师和同窗了。
举荐教程:《CSS》
以上就是运用CSS实现皮卡丘的细致内容,更多请关注 百分百源码网 其它相干文章!