纯css 绘制小熊脸 float小练习

我就是我 2022-03-29 10:40 199阅读 0赞

这是一篇关于float浮动的小练习，虽然代码写的很low，但感觉还挺有趣就分享下咯，哈哈。。。仅供参考哦！！！

不过要注意的是 ***IE9以下的版本*** 下会不兼容

先来看下效果吧

##### 如下： #####

![在这里插入图片描述][2019010723142077.png]

小熊还算可爱吧，辣么接下来就将代码呈上…

##### 1.html结构布局 #####

<div>
    	<p class='left-ear'></p>
    	<p class='right-ear'></p>
    	<p class='left-orbit'></p>
    	<p class='right-orbit'></p>
    	<p class='cheek'></p>
    	<p class='nose'></p>
    	<p class='mouth'></p>
    	<p class='left-cochlea'></p>
    	<p class='right-cochlea'></p>
    	<p class='left-eye'></p>
    	<p class='right-eye'></p>
    	<p class='right-eye-white'></p>
    	<p class='left-eye-white'></p>
    	<p class='nose-white'></p>
    	<p class='face'></p>
    </div>

##### 2.css布局样式 #####

<style>
    	ul,ol{
        
    		padding:0;
    		list-style:none;
    	}
    	body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt{
        
    		margin:0;
    	}
    	div{
        
    		width:300px;
    		height:300px;
    		margin:50px;
    		padding:10px;
    	}
    	.left-ear{
        
    		float:left;
    		width:102px;
    		height:120px;
    		border-radius:50%;
    		border:1px solid #000;
    		background-color:#140303;
    	}
    	.right-ear{
        
    		float:right;
    		width:102px;
    		height:120px;
    		border-radius:50%;
    		border:1px solid #000;
    		background-color:#140303;
    	}
    	.left-orbit{
        
    		float:left;
    		width:90px;
    		height:72px;
    		margin:26px;
    		border-radius:144% 35% 144% 35%;
    		border:1px solid #000;
    		background-color:#000;
    	}
    	.right-orbit{
        
    		float:left;
    		width:90px;
    		height:72px;
    		margin:26px;
    		border-radius:35% 144% 35% 144%;
    		border:1px solid #000;
    		background-color:#000;
    	}
    	.cheek{
        
    		float:left;
    		width:200px;
    		height:110px;
    		margin: -52px 0px 0px 42px;
    		border-radius:50%;
    		border:1px solid #000;
    		background-color:#fbfbfb;
    	}
    	.nose{
        
    		float:left;
    		width:80px;
    		height:50px;
    		margin: -122px 0px 0px 104px;
    		border-radius:90% 90% 100% 100%;
    		border:1px solid #000;
    		background-color:#680200;
    	}
    	.mouth{
        
    		float:left;
    		width:20px;
    		height:20px;
    		margin: -54px 0px 0px 124px;
    		border-radius:50% 50% 50% 50%;
    		border:1px solid #000;
    		background-color:red;
    	}
    	.left-cochlea{
        
    		float:left;
    		width:50px;
    		height:50px;
    		margin: -250px 0px 0px 36px;
    		border-radius:50%;
    		border:1px solid #000;
    		background-color:#FFB5B2;
    	}
    	.right-cochlea{
        
    		float:left;
    		width:50px;
    		height:50px;
    		margin: -250px 0px 0px 212px;
    		border-radius:50%;
    		border:1px solid #000;
    		background-color:#FFB5B2;
    	}
    	.left-eye{
        
    		float:left;
    		width:20px;
    		height:20px;
    		margin: -152px 0px 0px 82px;
    		border-radius:50%;
    		border:1px solid #fbfbfb;
    		background-color:#000;
    	}
    	.right-eye{
        
    		float:left;
    		width:20px;
    		height:20px;
    		margin: -152px 0px 0px 183px;
    		border-radius:50%;
    		border:1px solid #fbfbfb;
    		background-color:#000;
    	}
    	.right-eye-white{
        
    		float:left;
    		width:10px;
    		height:10px;
    		margin: -152px 0px 0px 185px;
    		border-radius:50%;
    		border:1px solid #000;
    		background-color:#fbfbfb;
    	}
    	.left-eye-white{
        
    		float:left;
    		width:10px;
    		height:10px;
    		margin: -152px 0px 0px 90px;
    		border-radius:50%;
    		border:1px solid #000;
    		background-color:#fbfbfb;
    	}
    	.nose-white{
        
    		float:left;
    		width:35px;
    		height:13px;
    		margin: -119px 0px 0px 113px;
    		border-radius:100% 34% 100% 50%;
    		border:1px solid #000;
    		background-color:#fbfbfb;
    	}
    	.face{
        
    		box-shadow:-27px -32px 16px 0px #F0F0F0 inset;
    		width:300px;
    		height:300px;
    		border-radius:66% 66% 35% 35%;
    		border:1px solid #000;
    		background-color:#FFFFFF;
    	}
    	div:after{
        
    		display:block;
    		content:'';
    		clear:both;
    	}
    </style>

[2019010723142077.png]: /images/20220329/dac40b3d9dee4805aa59415ad16e48d6.png?

发表评论取消回复

表情：

评论列表（有 0 条评论，199人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS--个人简介小练习

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

叁歲伎倆/ 2023年05月21日 08:52/ 0 赞/ 15 阅读

相关 C语言小游戏——小熊跳板

C语言代码，有点简陋，还有许多可以优化的地方，注释也没写全，后期会补充，后期也可能添加更多功能，我会去尽量的完善代码。测试工具：VS2019，语言：C语言 inc

傷城~/ 2022年12月25日 12:53/ 0 赞/ 182 阅读

相关题目62 笨小熊

![20160729110202378][] 已AC代码： include<iostream> include<algorithm> include

朴灿烈づ我的快乐病毒、/ 2022年09月24日 10:28/ 0 赞/ 136 阅读

相关 NYOJ 62 笨小熊

笨小熊时间限制： 2000 ms | 内存限制： 65535 KB 难度： 2 描述笨小熊的词汇量很小，所以每次做英语选择题的时候都很头疼。但是他找到了一种方法

心已赠人/ 2022年09月19日 04:30/ 0 赞/ 153 阅读

相关奔跑的小熊动画css

![在这里插入图片描述][5c75738a2c8140beaa5048ad878cee55.png]![在这里插入图片描述][90f5e4fa02a144efb0e204e06

超、凢脫俗/ 2022年09月07日 14:38/ 0 赞/ 199 阅读

相关纯css绘制三角形

在当前流行的的网站上，我们经常会看到一些小三角形的下拉提示（微博顶部的下拉菜单），简单的方式可以使用一张图片代替，但是随着前端技术的发展，以及开发者对于前端性能的“吹毛求疵”，

刺骨的言语ヽ痛彻心扉/ 2022年06月05日 01:43/ 0 赞/ 290 阅读

相关笨小熊

笨小熊时间限制： 2000 ms | 内存限制： 65535 KB 难度： 2 描述笨小熊的词汇量很小，所以每次做英语选择题的时候都很头疼。但是他找到了一种

╰+哭是因爲堅強的太久メ/ 2022年06月02日 09:17/ 0 赞/ 157 阅读

相关 css绘制小图标集锦

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

灰太狼/ 2022年05月31日 13:22/ 0 赞/ 291 阅读

相关纯css 绘制小熊脸 float小练习

这是一篇关于float浮动的小练习，虽然代码写的很low，但感觉还挺有趣就分享下咯，哈哈。。。仅供参考哦！！！不过要注意的是 IE9以下的版本下会不兼容先来看下效果吧

我就是我/ 2022年03月29日 10:40/ 0 赞/ 200 阅读

相关 html---css小练习（1）

预览效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

一时失言乱红尘/ 2022年02月24日 12:44/ 0 赞/ 203 阅读