运用css3圆角制作一只叮当猫

最新推荐文章于 2021-08-04 00:03:40 发布
最新推荐文章于 2021-08-04 00:03:40 发布
阅读量240 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mavis2/article/details/105022566
版权

1.了解border-radius属性

  • border-radius:0px;一个值时调四个角的圆角
  • border-radius:0px 0px;两个值时调左上右下、右上左下
  • border-radius:0px 0px 0px;三个值时调左上、右上左下、右下
  • border-radius:0px 0px 0px 0px;四个值时调左上、右上、右下、左上
  • border-radius:0px 0px 0px 0px / 0xp 0px 0px 0px;
    / 前面代表x轴的左上、右上、右下、左上，/ 后面代表y轴的左上、右上、右下、左上
  • 如果想调正圆则需要一个正方形，四个角都调成一样

2.叮当猫头部

熟悉了圆角的属性我们就可以通过浏览器来调出想要的圆角形状了。

/* 叮当猫头部 */
.wrap .head{
width: 310px;height: 262px;border: 2px solid #000;margin: 10px auto 0px;
background: #08b9e3;position: relative;z-index: 4;
border-radius:170px 168px 90px 90px/170px 168px 130px 130px ;
}

在这里插入图片描述

3.叮当猫的脸

脸部的制作和头部差不多

/* 叮当猫的脸 */
.wrap .head .face{
width: 268px;height: 180px;border: 2px solid #000;
position: absolute;bottom: 0px;left: 50%;
margin-left: -134px ;background-color: #fff;
border-radius: 120px 120px 68px 68px/115px 115px 87px 87px;
}

在这里插入图片描述

4.叮当猫的眼睛和鼻子

这部分我是通过定位把眼睛和鼻子移动到需要的位置，鼻子部分则是我前面说的制作正圆的方法做的。

/* 叮当猫的眼睛 */
.wrap .head .eyes{
    width: 72px;height: 88px;border: 2px solid #000;
    position: absolute;top: 42px;left: 81px;;background-color: #fff;
    border-radius: 36px 42px 40px 40px/36px 44px 37px 44px
}
.wrap .head .eyes span{
    width: 10px;height: 10px;border-radius: 50%;background-color: #000;display: block;
    position: absolute;bottom: 18px;right: 14px;
    }
.wrap .head .eyes2{
    width: 72px;height: 88px;border: 2px solid #000;
    position: absolute;top: 42px;right: 80px;background-color: #fff;
    border-radius: 42px 36px 40px 40px/44px 36px 44px 37px;
}
.wrap .head .eyes2 span{
    width: 10px;height: 10px;border-radius: 50%;background-color: #000;display: block;
    position: absolute;bottom: 18px;left: 14px;
    }
/* 叮当猫的鼻子 */
.wrap .head .nose{
    width: 32px;height: 32px;border: 2px solid #000;border-radius: 50%;
    position: absolute;top: 118px; left: 50%;margin-left: -16px;
    background-color: #ca3e01;
}

在这里插入图片描述

5.叮当猫的毛和嘴巴

叮当猫的胡须我用了 transform: skewY(-16deg)；倾斜的效果，还加了一个动画效果，可惜你们看不到QAQ。

/* 叮当猫的嘴巴 */
.wrap .head .mouth{
    width: 84px;height: 90px;border-left: 2px solid #000;border-bottom: 2px solid #000;
    position: absolute;top: 154px;right: 68px;
    border-radius: 0px 0px 83px 0px/0px 0px 36px 0px;
}
.wrap .head .mouth2{
    width: 84px;height: 90px;border-bottom: 2px solid #000;
    position: absolute;top: 154px;left: 72px;
    border-radius: 0px 0px 0px 83px/0px 0px 0px 36px;
}
/* 叮当猫的毛 */
.wrap .head .mao{
width: 58px;height: 64px;position: absolute;top: 126px;right: 42px;
animation: hz 0.5s infinite;
}
.wrap .head .mao span{margin-top: 18px;}
.wrap .head .mao :first-child{
display: block;border-bottom: 2px solid #000;transform: skewY(-16deg);
}
.wrap .head .mao :nth-child(2){display: block;border-bottom: 2px solid #000;}
.wrap .head .mao :nth-child(3){
display: block;border-bottom: 2px solid #000;transform: skewY(16deg);
}
.wrap .head .mao2{
width: 58px;height: 64px;position: absolute;top: 126px;left: 42px;
animation: hz1 0.5s infinite;
}
.wrap .head .mao2 span{margin-top: 18px;}
.wrap .head .mao2 :first-child{
display: block;border-bottom: 2px solid #000;transform: skewY(16deg);
}
.wrap .head .mao2 :nth-child(2){display: block;border-bottom: 2px solid #000;}
.wrap .head .mao2 :nth-child(3){
display: block;border-bottom: 2px solid #000;transform: skewY(-16deg);
}
@keyframes hz {from{transform: translateX(0px);}to{transform: translateX(-10px);}}
@keyframes hz1 {from{transform: translateX(0px);}to{transform: translateX(10px);}}

在这里插入图片描述

6.叮当猫的铃铛部分

/* 叮当猫的铃铛部分 */
.wrap .xq{
    width: 230px;height: 22px;border: solid 2px #000;z-index: 4;
    background: #af2a01;position: absolute;top:310px;left: 50%;margin-left: -115px;
    border-radius: 50px;
}
.wrap .xq .dd{
    width: 26px;height: 26px;background: #f5ed26;border: 2px solid #000;
    position: absolute;bottom: -12px;left: 100px;z-index: 4;
    border-radius: 50px;
}
.wrap .xq .dd span{display: block;}
.wrap .xq .dd :nth-child(1){
    width: 24px;height: 2px;border: 2px solid #474747;margin-top: 8px;border-radius: 10px;
   
}
.wrap .xq .dd :nth-child(2){
    width: 6px;height: 6px;background: #000;position: absolute;bottom: 6px;left: 50%;
    margin-left: -3px;border-radius: 50%;

}
.wrap .xq .dd :nth-child(3){
    background: black;height: 2px;width: 10px;transform: rotate(90deg);
    position: absolute;bottom: 2px;left: 50%;margin-left: -5px;
}

在这里插入图片描述

7.完成叮当猫

叮当猫的身体部分与上面的操作差不多，我就不放代码了。要注意的是z-index:;定位层级的关系，其他的都是慢慢调圆角需要的是时间罢了。

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{width: 400px;height: 500px;margin: 40px auto;background: pink;overflow: hidden;}

/* 叮当猫头部 */
.wrap .head{
    width: 310px;height: 262px;border: 2px solid #000;margin: 10px auto 0px;
border-radius:170px 168px 90px 90px/170px 168px 130px 130px ;background: #08b9e3;position: relative;z-index: 4;
}
/* 叮当猫的脸 */
.wrap .head .face{width: 268px;height: 180px;border: 2px solid #000;position: absolute;bottom: 0px;left: 50%;
margin-left: -134px ;border-radius: 120px 120px 68px 68px/115px 115px 87px 87px;background-color: #fff;
}
/* 叮当猫的眼睛 */
.wrap .head .eyes{
    width: 72px;height: 88px;border: 2px solid #000;position: absolute;top: 42px;left: 81px;
    border-radius: 36px 42px 40px 40px/36px 44px 37px 44px;background-color: #fff;
}
.wrap .head .eyes span{
    width: 10px;height: 10px;border-radius: 50%;background-color: #000;display: block;position: absolute;bottom: 18px;
    right: 14px;
    }
.wrap .head .eyes2{
    width: 72px;height: 88px;border: 2px solid #000;position: absolute;top: 42px;right: 80px;
    border-radius: 42px 36px 40px 40px/44px 36px 44px 37px;background-color: #fff;
}
.wrap .head .eyes2 span{
    width: 10px;height: 10px;border-radius: 50%;background-color: #000;display: block;position: absolute;bottom: 18px;
    left: 14px;
    }
/* 叮当猫的鼻子 */
.wrap .head .nose{
    width: 32px;height: 32px;border: 2px solid #000;border-radius: 50%;position: absolute;top: 118px; left: 50%;margin-left: -16px;background-color: #ca3e01;
}
/* 叮当猫的嘴巴 */
.wrap .head .mouth{
    width: 84px;height: 90px;border-left: 2px solid #000;border-bottom: 2px solid #000;
    border-radius: 0px 0px 83px 0px/0px 0px 36px 0px;position: absolute;top: 154px;right: 68px;
}
.wrap .head .mouth2{
    width: 84px;height: 90px;border-bottom: 2px solid #000;
    border-radius: 0px 0px 0px 83px/0px 0px 0px 36px;position: absolute;top: 154px;left: 72px;
}
/* 叮当猫的毛 */
.wrap .head .mao{width: 58px;height: 64px;position: absolute;top: 126px;right: 42px;animation: hz 0.5s infinite;}
.wrap .head .mao span{margin-top: 18px;}
.wrap .head .mao :first-child{display: block;border-bottom: 2px solid #000;transform: skewY(-16deg);}
.wrap .head .mao :nth-child(2){display: block;border-bottom: 2px solid #000;}
.wrap .head .mao :nth-child(3){display: block;border-bottom: 2px solid #000;transform: skewY(16deg);}
.wrap .head .mao2{width: 58px;height: 64px;position: absolute;top: 126px;left: 42px;animation: hz1 0.5s infinite;}
.wrap .head .mao2 span{margin-top: 18px;}
.wrap .head .mao2 :first-child{display: block;border-bottom: 2px solid #000;transform: skewY(16deg);}
.wrap .head .mao2 :nth-child(2){display: block;border-bottom: 2px solid #000;}
.wrap .head .mao2 :nth-child(3){display: block;border-bottom: 2px solid #000;transform: skewY(-16deg);}
@keyframes hz {from{transform: translateX(0px);}to{transform: translateX(-10px);}}
@keyframes hz1 {from{transform: translateX(0px);}to{transform: translateX(10px);}}

/* 叮当猫的铃铛部分 */
.wrap .xq{
    width: 230px;height: 22px;border: solid 2px #000;border-radius: 50px;z-index: 4;
    background: #af2a01;position: absolute;top:310px;left: 50%;margin-left: -115px;
}
.wrap .xq .dd{
    width: 26px;height: 26px;background: #f5ed26;border: 2px solid #000;border-radius: 50px;
    position: absolute;bottom: -12px;left: 100px;z-index: 4;
}
.wrap .xq .dd span{display: block;}
.wrap .xq .dd :nth-child(1){
    width: 24px;height: 2px;border: 2px solid #474747;margin-top: 8px;border-radius: 10px;
   
}
.wrap .xq .dd :nth-child(2){
    width: 6px;height: 6px;background: #000;position: absolute;bottom: 6px;left: 50%;margin-left: -3px;
    border-radius: 50%;
}
.wrap .xq .dd :nth-child(3){
    background: black;height: 2px;width: 10px;transform: rotate(90deg);position: absolute;bottom: 2px;left: 50%;margin-left: -5px;
}


/* 叮当猫的身体部分 */
.wrap .body{
    width: 222px;height: 44px;background: #08b9e3;position: absolute;top: 336px;left: 50%;margin-left: -111px;z-index: 2;
}

.wrap .body1{
    width: 220px;height: 100px;border: 2px solid #000;border-top: none;background: #08b9e3;
    position: absolute;top: 380px;left: 50%;margin-left: -112px;z-index: 2;
}
.wrap .body1 :nth-child(1){
    width: 20px;height: 20px;border:2px solid #000;border-radius: 50%;display: block;position: absolute;bottom: -12px;left: 50%;margin-left: -12px;background: pink;
}
.wrap .body1 :nth-child(2){
    width: 20px;height: 7px;border:2px solid transparent;display: block;position: absolute;bottom: -13px;left: 50%;margin-left:-12px;background: pink;
}

.wrap .body2{
    width: 152px;height: 152px;border: 2px solid #000;border-radius: 50%;position: absolute;top: 300px;left: 50%;margin-left: -76px;z-index: 3;background: #fff;
}
.wrap .body2 div{
    width: 120px;height: 120px;border-radius: 50%;position: absolute;top: 20px;left: 50%;margin-left: -60px;
    border: 2px solid #000;z-index: 3;
}
.wrap .body2 span{width: 124px;height: 70px;border-bottom: 2px solid #000;display: block;background: #08b9e3;position: absolute;top: 18px;left: 16px;z-index: 4;background: #fff;}

/* 叮当猫的手 */
.wrap .hand{
    width: 40px;height: 80px;border: 2px solid #000;transform: rotate(56deg);margin-left: 50px;margin-top: 12px;
    position: relative;z-index: 1;background: #08b9e3;
}
.wrap .hand span{width: 60px;height: 60px;border: 2px solid #000;background-color: #fff;position: absolute;bottom: -26px;
left: -12px;border-radius: 50%;}

.wrap .hand1{
    width: 40px;height: 80px;border: 2px solid #000;transform: rotate(-56deg);margin-left: 305px;margin-top: -83px;
    position: relative;z-index: 1;background: #08b9e3;
}
.wrap .hand1 span{width: 60px;height: 60px;border: 2px solid #000;background-color: #fff;position: absolute;bottom: -26px;
left: -12px;border-radius: 50%;}

/* 叮当猫的脚 */
.wrap .foot{
    width: 126px;height: 30px;border: 2px solid #000;background: #fff;margin-top: 67px;margin-left: 68px;
    position: absolute;z-index: 10;border-radius: 38px 24px 50px 25px/31px 27px 29px 19px;;
}
.wrap .foot1{
    width: 126px;height: 30px;border: 2px solid #000;background: #fff;margin-top: 67px;margin-left: 202px;
    position: absolute;z-index: 10;border-radius: 24px 38px 25px 50px/27px 31px 19px 29px;;
}

    </style>
</head>
<body>
    <div class="wrap">
        <!-- 叮当猫的头部 -->
        <div class="head">
            <div class="face"></div>
            <div class="eyes"><span></span></div>
            <div class="eyes2"><span></span></div>
            <div class="nose"></div>
            <div class="mouth"></div>
            <div class="mouth2"></div>
            <div class="mao">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="mao2">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <!-- 叮当猫的铃铛 -->
        <div class="xq">
            <div class="dd">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <!-- 叮当猫的身体 -->
        <div class="body">
  
        </div>
        <div class="body1">
            <span></span>
            <span></span>
        </div>
        <div class="body2">
            <div></div>
            <span></span>
        </div>
        <!-- 叮当猫的手 -->
        <div class="hand">
            <span></span>
        </div>
        <div class="hand1">
            <span></span>
        </div>
        <!-- 叮当猫的脚 -->
        <div class="foot">

        </div>
        <div class="foot1">

        </div>
    </div>
</body>
</html>
Mavis2
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
圆角--叮当猫头部的做法
u013849242的博客
04-14 295
今天学习了HTML圆角，并能够利用圆角制作一些简单的东西，一下是我制作的叮当猫头部（不足之处还请多多留言哦） 先丢一张效果图（有点丑哈） 1.制作叮当猫头部，首先是将其分为两个部分，蓝色和中间的白脸部分。蓝色部分我是使用两个圆，一个蓝色的和一个白色的挤出一个月牙形的轮廓。当然也可以用圆角，以下是两种写法的代码： （1）两个圆： #head{width: 500px; height: 500px;...
利用css3画叮当猫
止水Itachi
03-23 173
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .tou{ width: 300px; height: 280px; backgro...
【CSS】用CSS3画出一个叮当猫
学习永不晚
06-06 661
  &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;哆啦A梦&lt;/title&gt; &lt;style&gt; .wrapper{margin: 50px 0 0 500px;} .dlam{position: relative;}
纯css饼图,使用css3画饼图
weixin_29008691的博客
08-04 1172
CSS3 Gradient介绍参考地址：效果图：html:css:.colorWheel {position: relative;width: 16em;height: 16em;background: linear-gradient(36deg, #7c1 42%, transparent 42%),linear-gradient(72deg, #999 75.48%, transparent ...
重学css 0x3 CSS效果
cell的博客
02-24 189
box-shadow 营造层次感（立体感） 充当没有宽度的边框 特殊效果 /* x偏移量 | y偏移量 | 阴影颜色 */ box-shadow: 60px -16px teal; /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */ box-shadow: 10px 5px 5px black; /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | ...
CSS3画图
刘望的博客
05-03 197
众所周知，用CSS3的圆角、转换可以画出各种不同的形状，制作不同的图案，早些前先驱者已画出经典的叮当猫，iphone手机等展示CSS3的强大实力，趁最近有空我也对CSS3进行了一些实践，颇有收获。 用border边框属性可以画出各种三角形，矩形，用border-radius可以画出何种圆形、扇形、圆弧型，利用内置阴影外置阴影可以有各种投影效果，只要你去尝试就好发现可以出来各种形状 结合实践
关于用CSS3画图形的一些思考
weixin_30484247的博客
11-19 76
　　众所周知，用CSS3的圆角、转换可以画出各种不同的形状，制作不同的图案，早些前先驱者已画出经典的叮当猫，iphone手机等展示CSS3的强大实力，趁最近有空我也对CSS3进行了一些实践，颇有收获。 用border边框属性可以画出各种三角形，矩形，用border-radius可以画出何种圆形、扇形、圆弧型，利用内置阴影外置阴影可以有各种投影效果，只要你去尝试就好发现可以出来各种形状 结合...
HTML5&CSS3学习
binyao02123202的专栏
05-15 1003
HTML5&CSS3 【探索HTML5第二弹04】响应式布局（上），让我们一起来响应式布局吧 摘要: 前言第一次看到响应式布局这个东西的时候，我还以为又出了新东西呢，稍微研究了下才发现其实也是现有资源的组合而出的创新，中国什么时候也搞一个这种创新呢？所谓响应式布局，大意是在不同设备上（不同尺寸下）都能以比较合理的方式显示，大家千万不要觉得iphone上的显示感觉还不差，我们就说
HTML CSS 面试题解（不定期更新）
材女的进击
09-18 376
1. HTML基础强化 HTML重要属性 a [href,target] img [src,alt] table td [colspan,rowspan] form[target,method,enctype] input[type,value] button[type] select>option[value] label[for] HTML语义化标签 代码结构清晰，易于阅读，像是...
如何使用CSS3画出一个叮当猫
10-23
本文将深入探讨如何使用CSS3来绘制一个叮当猫的形象，包括其头部、脸部特征、身体及四肢。 首先，我们需要在HTML中设置基础的结构，这将作为叮当猫各个部分的容器。代码片段中展示了叮当猫各个部位的div元素，如...
新增CSS3绘制叮当猫DEMO.zip
08-25
《CSS3绘制叮当猫DEMO》是一个使用JavaScript前端技术实现的创新项目，它展示了如何利用现代Web技术来创建生动有趣的交互式图形。这个案例主要依赖于CSS3的强大功能，尤其是其在2D绘图方面的特性，使得我们可以不...
超可爱的CSS3叮当猫动画特效
08-23
本篇文章将深入探讨“超可爱的CSS3叮当猫动画特效”这一主题，这是一项利用CSS3特性实现的创新性动画设计。 首先，我们要明白CSS3新增了许多功能，其中最引人注目的是动画（Animations）和过渡（Transitions）。...
叮当猫.py
03-17
python绘图源码，简单可运行，放心下载，感兴趣的朋友可以下载玩一玩
NET语言程序设计课件-第2章 Visual C#.NET语法基础.ppt
最新发布
08-08
Visual C# .NET是一门面向对象的程序设计语言，是当前流行的.NET系列的语言。 本课程以Visual Studio为程序设计环境，对C#进行了全面阐述。 本电子课件适用于课程讲解或者课程分析参考使用。
[毕业设计]PHP图书借阅与归还管理系统(源代码+论文).zip
08-08
[毕业设计]PHP图书借阅与归还管理系统(源代码+论文)
ssm_012_mysql宝康药房销售管理系统.zip
08-08
随着我国市场经济的蓬勃发展和人们对医药产品需求的迅速增加，医药销售行业正处于一个高速发展的时期。行业的快速发展必然导致竞争的加剧，面对药品销售业日益严酷的竟争现实，加强管理、提高工作效率和改善服务质量成了急待解决的问题。而解决这些问题的关键措施之一就是利用计算机等现代信息技术，建立实用、先进、高效的药房销售管理系统，引进创新的经营机制，实现药品销售过程的全面信息化管理，以适应企业生存和发展的新形势。因此，开发一个宝康药房销售管理系统是十分必要的。 根据需求，确定系统采用JSP技术，SSM框架，JAVA作为编程语言，MySQL作为数据库。整个系统要操作方便、易于维护、灵活实用。主要实现了频道维护、新闻维护、药品维护、订单维护、系统管理等功能。
excel基本操作.pptx
08-08
excel基本操作.pptx
[毕业设计]PHP物业管理系统网站开发(源代码+论文).zip
08-08
[毕业设计]PHP物业管理系统网站开发(源代码+论文)
python画图叮当猫
09-15
你可以使用Python的绘图库Matplotlib来画叮当猫。以下是一个简单的例子： ```python import matplotlib.pyplot as plt ...运行这段代码，你将得到一个简单的叮当猫图像。你可以根据需要进行进一步的美化和调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值