hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 前端开发 - 正文 君子好学,自强不息!

使用CSS实现皮卡丘_WEB前端开发

2020-06-18前端开发ki4网9°c
A+ A-

使用 CSS 实现骨架屏_WEB前端开发

在加载网络数据时,为了提升用户体验,通常会使用一个转圈圈的loading动画,或者使用Skeleton Screen占位。相比与loading动画,Skeleton Screen的效果要更生动,实现起来来也很简单。

前言

当我学完css和js后,冒出来一个想法。自己去实现一个可爱的卡通人物。于是我就去codepen找素材,最终选择了皮卡丘,如下图。

准备工作

在开始写皮卡丘之前,我先观察了皮卡丘的整个页面。发现如果要很好的实现这个皮卡丘你不能像写传统网页那样从左到右布局,而是要从中间布局,因为左右两边对称。理清楚了思路之后现在开始编写页面结构。

    <p class="skin">
        <p class="eye left"></p>
        <p class="eye right"></p>
        <p class="nose">
            <p class="yuan"></p>
        </p>
        <p class="mouth ">
            <p class="up">
                <p class="lip left"></p>
                <p class="lip right"></p>
            </p>
            <p class="down">
                <p class="yuan1">
                    <p class="yuan2"></p>
                </p>
            </p>
        </p>
        <p class="mouth "></p>
        <p class="face left">
            <img src="src/img/flash.gif" alt="flash">
        </p>
        <p class="face right">
            <img src="src/img/flash.gif" alt="flash">
        </p>
    </p>

页面结构如上图所示,当我们编写完html结构,就可以动手去写css。

CSS的实现

在这个地方我们可以暂时先停一下,再次理清思路。这个皮卡丘的最难点的部分在哪里?在于皮卡丘嘴巴上的弧线以及下面椭圆形的舌头。

在实现皮卡丘嘴巴上的弧线时,我产生了两个想法。第一用一个标签包裹实现这个弧线,第二分别用两个标签去包裹实现这两个弧线。最终我选择了第二种。在这里我观察皮卡丘嘴巴上的弧线发现这个弧线就是圆角矩形的四分之一,加上旋转就可以实现这两个弧线。

具体实现如下

js怎么获取网站的url_WEB前端开发

js获取网站的url的方法是:1、使用【document.documentURI;】来获取网站的url;2、使用【document.URL;】来获取网站的url。

.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实现皮卡丘的详细内容,更多请关注ki4网其它相关文章!

JS内置对象 Math 和 Date 的详解_WEB前端开发

JS内置对象Math与Date Math 对象Math是 JavaScript 的原生对象,提供各种数学功能。

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
使用CSS实现皮卡丘_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>