likes
comments
collection

我用CSS画了一只可爱的小青蛙

作者站长头像
站长
· 阅读数 18

我用CSS画了一只可爱的小青蛙

大家好,我是小七月,今天我使用CSS绘制了一个Q版的小青蛙,下面来看看我是怎么实现的吧。 项目地址:

看上图的小青蛙,会发现它其实构图很简单,主要是由圆来构成,很显然,我们需要使用到的是border-raduis属性,这个属性我在上一篇文章有详细讲解过,此处就不再多说。然后因为是由很多个元素拼凑出来的,我们需要完全控制每一个元素的位置,所以我们使用到的是绝对定位。下面我们来总结一下关于position的属性(解释参考MDN)。

position属性用于指定一个元素在文档中top``right``bottomleft属性则决定了该元素的最终位置。

取值

  • static

    该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 toprightbottomleft 和 z-index 属性无效。

  • relative

    该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。通常与absolute搭配使用

  • absolute

    元素会被移出正常文档流,并不为元素预留空间,即当不设置left,right,bottom,top等位置信息时,后面的元素会占据该元素的位置,该元素直接漂浮在后来元素的上面,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。该属性除了用于定位,也可以搭配transform: translate(-50%,-50%)来实现水平垂直居中效果。

  • fixed

    元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transformperspective 或 filter 属性非 none 时,容器由视口改为该祖先。

  • sticky

    position:relative和position:fixed的结合体——当元素在屏幕内,表现为relative,就要滚出显示器屏幕的时候,表现为fixed。导航的跟随定位效果(吸顶效果)。需要注意的是设置了该属性的元素的父元素不能设置固定高度,也不能设置除了overflow:visible以外的任何值,否则没有效果。

    总结:关于小青蛙的绘制,本身不难,重要的是在于细心和耐心,因为每个位置都需要自己慢慢的调整,我在做的时候直接打开开发者工具,然后慢慢调整关于left和top的值,直到形状出来了为止。