纯CSS画一只简单的小鸟

用css简单画了一只小鸟，效果图如下：

代码如下：

HTML：

<div class="box-canvas">        <div class="body"><div class="head"></div><div class="wing"></div></div><div class="mouth"></div><div class="foot"></div></div>

CSS：

重点：

1、:root选择器：匹配文档的根元素，在HTML中根元素始终是HTML元素。

2、CSS变量（或称自定义属性、级联变量）：由自定义属性标记设定值（比如： --main-color: black;），由var() 函数来获取值（比如： color: var(--main-color);）

3、CSS画三角形：width为0，height为0，再通过border-方向设置不同的值，透明或有颜色。

:root{--white:white;--black:#544;--main-color:rgb(231, 122, 164);
}
body{background:rgb(121, 194, 228);
}
.box-canvas{position: relative;margin: auto;display: block;margin-top: 8%;margin-bottom: 8%;width: 400px;height:400px;}
.body{width:280px;height:250px;border-radius: 65% 25% 60% 5%;position: absolute;top:0;left:0;background:var(--main-color);transform: rotate(10deg);z-index: 1;
}
.head{position: absolute;top:-50px;right:0;width:200px;height:250px;border-radius: 65% 45% 50% 5%;    background:var(--main-color);    transform: rotate(8deg);
}
.head::before{content: '';position: absolute;top:33px;right:60px;width:6px;height:6px;border-radius: 50%;    background:var(--white);  z-index: 4;
}
.head::after{content: '';position: absolute;top:30px;right:55px;width:20px;height:20px;border-radius: 50%;    background:var(--black);
}
.wing{width:120px;height: 120px;background:var(--white);border-radius: 100% 15% 75% 5%;transform: translate(25%,55%) rotate(-0deg);position: absolute;top:0;left:0;
}
.mouth{width:0px;height:0px;border-top: 10px solid transparent;border-left: 20px solid var(--black);border-bottom: 10px solid transparent;position: absolute;top:20px;right:90px;
}
.foot{position: absolute;top:240px;left:140px;background: var(--black);
}
.foot::before{content: '';width:8px;height:50px;background: var(--black);position: absolute;top:0px;left:-10px;
}
.foot::after{content: '';width:8px;height:50px;background: var(--black);position: absolute;top:0px;left:15px;
}

纯CSS画一只简单的小鸟相关推荐

php开发愤怒的小鸟,如何使用纯CSS实现一只黑色的愤怒小鸟（附代码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现一只黑色的愤怒小鸟(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.co ...
用css做一个移动射击动画,如何使用纯CSS实现一只移动的小白兔动画效果
本篇文章给大家带来的内容是关于如何使用纯CSS实现一只移动的小白兔动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览代码解读定义 dom,页面中包含 2 个元素,分 ...
73.纯 CSS 创作一只卡通狐狸
73.纯 CSS 创作一只卡通狐狸原文地址:https://segmentfault.com/a/1190000015566332 学习效果地址:https://scrimba.com/c/cz6E ...
html怎么画3角型当背景,纯CSS画三角原理解析
纯CSS画三角原理解析因为之前做一个页面出现了很多三角,开始直接用图片感觉并不是很好用,看着总是怪怪的颜色还很难调整的跟背景一样,就搜了一波代码直接用上了,事后想了一下感觉不知道具体原理是什么,很奇 ...
html button形状,【8个实例】纯CSS按钮(button)，简单漂亮实用
本文介绍6个纯CSS按钮(button)实例,漂亮又实用,代码使用简单,又具有很强的可迁性,基本上在任何一张网页都能很容易就能用上这些按钮样式. 纯CSS按钮(button) 实例1:普通按钮创建一 ...
纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）,里面很多涉及到CSS3的一些属性。
今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形.图形包括基本的矩形.圆形. 椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八 ...
纯css画一个樱桃小丸子
纯css3画一个樱桃小小丸子,嘻嘻,废话不多少直接上代码吧! <div class="main"><div class="head">& ...
纯CSS画的基本图形
今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形.图形包括基本的矩形.圆形. 椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八 ...
java写三角形圆矩形_纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）...
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

纯CSS画一只简单的小鸟

纯CSS画一只简单的小鸟相关推荐

最新文章

热门文章