阅读 210

有趣的前端css特效-仿迪士尼米奇帽子

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

有趣的前端css特效-仿迪士尼米奇帽子

这个图相信大家都不陌生,迪士尼代表人物-米奇 款的帽子,曾经作为开园商品在迪士尼小镇商店畅销一时,当时还是乙方的我们参加培训就送,后面几乎是人手一个了。

Image.png

话不多说,老规矩,用css来给它画出来吧。

1.打底

首先画出帽子的主体部分: 将帽子部分想象成一个不规则的‘椭圆'。那么就比较容易的想到方案 画一个正方形,通过设置边框的弧度就能得到椭圆的帽子主体部分。代码如下

div{
    width: 200px;
    height: 200px;
    border-radius: 0 100% 0 70% ;
    background: #222;
}
复制代码

设置父容器div全屏幕居中显示。(强迫症患者)

 div{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
}
复制代码

那么,帽子主体部分就出现了。 需要注意的是,这是通过设置border-radius的右上角和左下角得到的椭圆,整体图案需要做一定的旋转  div{transform: rotate(-45deg);}

Image [1].png

帽檐缝边的部分用border指定浅一点的颜色补起来。

div{
     border-bottom: 7px solid #3e3e3e; 
     border-left: 7px solid #3e3e3e;
}
复制代码

Image [2].png

2.给帽子加上耳朵

米奇的耳朵是非常圆润的,这里可以将它设置成两个圆。然后分别放置在对应的两侧。

div:before, div:after {
    width: 110px;
    height: 110px;
    top: -102px;
    left: 29px;
    background: #333;
    border-radius: 50%;
    box-shadow: -4px 4px 0 4px #222;//给耳朵打上阴影,使光影效果更加立体。
}
 div:after { 
    top: 56px;
    left: 192px; 
}
复制代码

Image [3].png

3.绘制帽子中心的图案部分

由于各种原因(别问,问就是怕法务,才不承认是技术不精),中间图效果只能是做到形似。代码如下

box-shadow: 
    -4px 4px 0 4px #000, //帽子右侧耳朵阴影
    -144px -45px 0 -44px #222, //鼠头左侧耳朵
    -115px -15px 0 -44px #222, //鼠头右侧耳朵
    -142px -22px 0 -53px #222, //鼠头左侧眼睛光点
    -138px -18px 0 -53px #222, //鼠头右侧眼睛光点
    -143px -17px 0 -54px white, //鼠头鼻尖光点
    -144px -16px 0 -51px #222,  //鼠头鼻子底色
    -142px -23px 0 -50px white, //鼠头左侧眼睛底色
    -137px -18px 0 -50px white, //鼠头右侧眼睛底色
    -151px -9px 0 -54px #e95b4f, //鼠头舌头颜色
    -150px -10px 0 -52px #222, //鼠头嘴巴
    -142px -18px 0 -40px #d3b579, //鼠头大脸盘子
    -141px -19px 0 -36px #222, //鼠鼠脑袋圈圈黑毛
    -141px -19px 0 -28px white, //鼠鼠后小圈底纹
    -141px -18px 0 -11px #e95b4f; //鼠鼠后大圈底纹
复制代码

这里放开border-radius的限制可以更加直观的看到以上box-shadow的效果如下图,看起来有点像杰瑞,哈哈。

Image [4].png

border-radius:50% 将图案全部变成原型。

合上帽子整体部分,再最后加上光影效果 得到下图

div{
    background-image: radial-gradient(circle at 170px 220px,rgba(255,255,255,0) 70%,rgba(255,255,255,0.15) 90%),radial-gradient(circle at 50px 80px,transparent 60%,#000 90%);
    box-shadow: -7px 7px 6px -2px rgb(0 0 0 / 30%);
}
复制代码

Image [5].png


以上,一顶一看就是山寨的杰瑞牌“米奇帽”完成啦。

文章分类
前端
文章标签