css3画图之大白(●—●)

最新推荐文章于 2021-10-26 18:23:26 发布
最新推荐文章于 2021-10-26 18:23:26 发布
阅读量380 收藏
点赞数

<!DOCTYPE html>

<html>

         <head>

         <title>大白</title>

         <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">

         </head>

         <styletype="text/css">

                   *,body {

                            margin:0;

                            padding:0;

                   }

                   .wrap{

                            width:480px;

                            height:700px;

                            position:relative;

                   }

                   .background{

                            width:480px;

                            height:700px;

                            position:absolute;

                            background:#597370;

                            overflow:hidden;

                   }

                   .background_box1{

                            width:300px;

                            height:50px;

                            margin:0 auto;

                            border:4px solid #394946;

                            border-top:none;

                            box-shadow:0 -1px 5px rgba(0,0,0,1);

                   }

                   .background_box2{

                            width:300px;

                            height:80px;

                            margin:0 auto;

                            border:4px solid #394946;

                            box-shadow:0 0 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.3) inset;

                            background:#394946;

                   }

                   .background_box3{

                            position:relative;

                            width:300px;

                            height:300px;

                            margin:0 auto;

                            border:4px solid #394946;

                            box-shadow:0 0 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.3) inset;

                            background:#394946;

                   }

                   .background_box3:after{

                            content:"";

                            position:absolute;

                            width:95%;

                            height:97%;

                            margin:1%;

                            border:4px solid #394946;

                            background:#2f3f4e;

                   }

                   .background_box4{

                            width:100%;

                            height:80px;

                            margin:2px auto;

                            border-top:4px solid #394946;

                            border-bottom:4px solid #394946;

                            box-shadow:0 0 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.3) inset;

                            background:#2c3733;

                   }

                   .background_box5{

                            width:100%;

                            height:15px;

                            margin:0 auto;

                            box-shadow:0 0 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.3) inset;

                            background:#2c3733;

                   }

                   .background_line1{

                            position:absolute;

                            left:-41px;

                            top:625px;

                            width:165px;

                            height:3px;

                            margin:0 auto;

                            -webkit-transform:rotate(-240deg);

                            -moz-transform:rotate(-240deg);

                            -o-transform:rotate(-240deg);

                            transform:rotate(-240deg);

                            background:rgba(0,0,0,0.3);

                   }

                   .background_line2{

                            position:absolute;

                            left:353px;

                            top:625px;

                            width:165px;

                            height:3px;

                            margin:0 auto;

                            -webkit-transform:rotate(60deg);

                            -moz-transform:rotate(60deg);

                            -o-transform:rotate(60deg);

                            transform:rotate(60deg);

                            background:rgba(0,0,0,0.3);

                   }

                   .body{

                            width:480px;

                            height:700px;

                            position:absolute;

                   }

                   .cpu{

                            position:absolute;

                            left:270px;

                            top:170px;

                            width:30px;

                            height:30px;

                            background:#E4E4E4;

                            border-radius:70% 100%;

                            box-shadow:0px 2px 3px rgba(0,0,0,0.2),0px 2px 3px rgba(255,255,255,1) inset;

                            z-index:2;

                   }

                   .heart{

                            width:16px;

                            height:20px;

                            position:relative;

                   }

                   .heart:before{

                            position:absolute;

                            left:10px;

                            top:10px;

                            content:"";

                            width:8px;

                            height:12px;

                            border:0 solid transparent;

                            border-radius:25px 10px 0 0;

                            background:#E24C4C;

                            -webkit-transform:rotate(-45deg);

                            -moz-transform:rotate(-45deg);

                            -o-transform:rotate(-45deg);

                            transform:rotate(-45deg);

                   }

                   .heart:after{

                            position:absolute;

                            left:14px;

                            top:10px;

                            content:"";

                            width:8px;

                            height:12px;

                            border: 0 solid transparent;

                            border-radius:10px 25px 0 0;

                            background:#E24C4C;

                            -webkit-transform:rotate(45deg);

                            -moz-transform:rotate(45deg);

                            -o-transform:rotate(45deg);

                            transform:rotate(45deg);

                   }

                   .head{

                            position:absolute;

                            left:177px;

                            top:67px;

                            width:110px;

                            height:76px;

                            border-radius:50% 45%;

                            box-shadow:0 10px 5px rgba(0,0,0,0.2);

                            background:-webkit-linear-gradient(top, #fff 30%, #d6d6d6);

                            z-index:2;

                   }

                   .eye1{

                            position:absolute;

                            left:20px;

                            top:30px;

                            width:12px;

                            height:12px;

                            border-radius:100%;

                            background:#000;

                            -webkit-animation:eye 2s ease infinite;

                            -moz-animation:eye 2s ease infinite;

                            -o-animation:eye 2s ease infinite;

                            animation:eye 2s ease infinite;

                   }

                   .eye2{

                            position:absolute;

                            left:76px;

                            top:30px;

                            width:12px;

                            height:12px;

                            border-radius:100%;

                            background:#000;

                            -webkit-animation:eye 2s ease infinite;

                            -moz-animation:eye 2s ease infinite;

                            -o-animation:eye 2s ease infinite;

                            animation:eye 2s ease infinite;

                   }

                   .eyeline{

                            position:absolute;

                            left:30px;

                            top:36px;

                            width:50px;

                            height:1px;

                            background:#000;

                   }

                   @keyframeseye {

                            0%,20%,100%{

                                     -webkit-transform:scale(1,1);

                                      -moz-transform:scale(1,1);

                                     -o-transform:scale(1,1);

                                     transform:scale(1,1);

                            }

                            10%{

                                     -webkit-transform:scale(1,0.2);

                                     -moz-transform:scale(1,0.2);

                                     -o-transform:scale(1,0.2);

                                     transform:scale(1,0.2);

                            }

                   }

                   @-webkit-keyframeseye {

                            0%,20%,100%{

                                     -webkit-transform:scale(1,1);

                                     -moz-transform:scale(1,1);

                                     -o-transform:scale(1,1);

                                     transform:scale(1,1);

                            }

                            10%{

                                     -webkit-transform:scale(1,0.2);

                                     -moz-transform:scale(1,0.2);

                                     -o-transform:scale(1,0.2);

                                     transform:scale(1,0.2);

                            }

                   }

                   .trunk{

                            position:absolute;

                            left:106px;

                            top:100px;

                            z-index:1;

                   }

                   .trunk1{

                            position:absolute;

                            left:27px;

                            top:19px;

                            width:50px;

                            height:64px;

                            border:79px solid #eee;

                            background:#eee;

                            border-radius:100%;

                   }

                   .trunk2{

                            position:absolute;

                            left:22px;

                            top:100px;

                            width:100px;

                            height:200px;

                            background:#eee;

                            -webkit-transform:rotate(12deg);

                            -moz-transform:rotate(12deg);

                            -o-transform:rotate(12deg);

                            transform:rotate(12deg);

                            box-shadow:-1px 1px 2px rgba(0,0,0,0.2);

                   }

                   .trunk2:after{

                            content:"";

                            position:absolute;

                            left:113px;

                            top:-27px;

                            width:100px;

                            height:200px;

                            background:#eee;

                            -webkit-transform:rotate(-24deg);

                            -moz-transform:rotate(-24deg);

                            -o-transform:rotate(-24deg);

                            transform:rotate(-24deg);

                            box-shadow:1px 1px 2px rgba(0,0,0,0.2);

                   }

                   .trunk3{

                            position:absolute;

                            left:0px;

                            top:201px;

                            width:260px;

                            height:200px;

                            border-radius:100%;

                            box-shadow:0 10px 5px rgba(0,0,0,0.2);

                            background:-webkit-linear-gradient(top, #eee 30%, #E4E4E4 60%, #e9e9e9 90%);

                   }

                   .hand{

 

                   }

                   .hand1{

                            position:absolute;

                            left:16px;

                            top:196px;

                            width: 320px;

                            height:143px;

                            border-top:76px solid #eee;

                            border-radius:32% 52%;

                            -webkit-transform:rotate(-80deg);

                            -moz-transform:rotate(-80deg);

                            -o-transform:rotate(-80deg);

                            transform:rotate(-80deg);

                            z-index:0;

                   }

                   .hand2{

                            position:absolute;

                            left:136px;

                            top:196px;

                            width:320px;

                            height:143px;

                            border-top:76px solid #eee;

                            border-radius:52% 32%;

                            -webkit-transform:rotate(80deg);

                            -moz-transform:rotate(80deg);

                            -o-transform:rotate(80deg);

                            transform: rotate(80deg);

                            z-index:0;

                   }

                   .finger1{

                            position:absolute;

                            left:88px;

                            top:427px;

                            width:20px;

                            height:48px;

                            border-radius:0 0 80% 50%;

                            background:#eee;

                            -webkit-transform:rotate(-32deg);

                            -moz-transform:rotate(-32deg);

                            -o-transform:rotate(-32deg);

                            transform:rotate(-32deg);

                   }

                   .finger2{

                            position:absolute;

                            left:104px;

                            top:426px;

                            width:20px;

                            height:43px;

                            border-radius:0 0 100% 45%;

                            background:#eee;

                            -webkit-transform:rotate(-32deg);

                            -moz-transform:rotate(-32deg);

                            -o-transform:rotate(-32deg);

                            transform:rotate(-32deg);

                   }

                   .finger3{

                            position:absolute;

                            left:364px;

                            top:427px;

                            width:20px;

                            height:48px;

                            border-radius:0 0 80% 50%;

                            background:#eee;

                            -webkit-transform:rotate(32deg);

                            -moz-transform:rotate(32deg);

                            -o-transform:rotate(32deg);

                            transform:rotate(32deg);

                   }

                   .finger4{

                            position:absolute;

                            left:353px;

                            top:426px;

                            width:20px;

                            height:43px;

                            border-radius:0 0 100% 45%;

                            background:#eee;

                            -webkit-transform:rotate(32deg);

                            -moz-transform:rotate(32deg);

                            -o-transform:rotate(32deg);

                            transform:rotate(32deg);

                   }

                   .foot{

                            position:absolute;

                            left:135px;

                            top:455px;

                            z-index:0;

                   }

                   .foot1{

                            position:absolute;

                            left:0;

                            top:0;

                            width:100px;

                            height:140px;

                            background:-webkit-linear-gradient(left, #cdcdcd, #e3e3e3, #cdcdcd);

                            border-radius:10% 9% 22% 62%;

                   }

                   .foot2{

                            position:absolute;

                            left:100px;

                            top:0;

                            width:100px;

                            height:140px;

                            background:-webkit-linear-gradient(left, #cdcdcd, #e3e3e3, #cdcdcd);

                            border-radius:10% 9% 62% 22%;

                            box-shadow:-2px 0 2px rgba(0,0,0,0.1);

                   }

         </style>

         <body>

                   <divclass="wrap">

                            <divclass="background">

                                     <divclass="background_box1"></div>

                                     <divclass="background_box2"></div>

                                     <divclass="background_box3"></div>

                                     <divclass="background_box4"></div>

                                     <divclass="background_box5"></div>

                                     <divclass="background_line1"></div>

                                     <divclass="background_line2"></div>

                            </div>

                            <divclass="body">

                                     <divclass="cpu">

                                               <divclass="heart"></div>

                                     </div>

                                     <divclass="head">

                                               <divclass="eye1"></div>

                                               <divclass="eye2"></div>

                                               <divclass="eyeline"></div>

                                     </div>

                                     <divclass="trunk">

                                               <divclass="trunk1"></div>

                                               <divclass="trunk2"></div>

                                               <divclass="trunk3"></div>

                                     </div>

                                     <divclass="hand">

                                               <divclass="hand1"></div>

                                               <divclass="hand2"></div>

                                               <divclass="hand3"></div>

                                               <divclass="hand4"></div>

                                               <divclass="finger1"></div>

                                               <divclass="finger2"></div>

                                               <divclass="finger3"></div>

                                               <divclass="finger4"></div>

                                     </div>

                                     <divclass="foot">

                                               <divclass="foot1"></div>

                                               <divclass="foot2"></div>

                                     </div>

                            </div>

                   </div>

         </body>

</html>


写个大白温暖你~

WEB前端学习交流群21 598399936

22guanerye123
关注
【白嫖党】如何把前端学好？看完这篇，直呼：太强了！（历经半个月之作）
超逸の学习技术博客
04-04 2万+
很少有文章做到将知识形成一个体系，于是需要翻阅很多资料，但这篇文章做到了！共34815字数。
利用噪声构建美妙的 CSS 图形
「 虚幻私塾」
07-13 196
在平时，我非常喜欢利用 CSS 去构建一些有意思的图形。我们首先来看一个简单的例子。首先，假设我们实现一个 10x10 的格子：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UEP9pPDp-1657687323676)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6211a28d255e4a9aaa4fda4cffd1f46a~tplv-k3u1fbpfcp-zoom-1.image)]此时，我们可以利用一些随机效果，
CSS3绘制大白(●—●)
wangzhneg123的博客
02-14 310
效果展示： 源码展示： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Baymax&lt;/title&gt; &lt;style&gt; body { backgroun
div+css3绘制可爱的大白
不会写代码的前端
10-18 356
html代码 &lt;div id="dabai"&gt; &lt;div id="head"&gt; &lt;div id="eye"&gt;&lt;/div&gt; &lt;div id="eye2"&gt;&lt;/div&gt; &lt;div id="mouth"&
CSS绘图：环
宁静致远
06-12 3408
CSS绘图：环
css3自定义圆环
牟云飞的博客
09-19 1286
圆环 .circle_bg{ width:200px; height:200px; border:18px solid #999999; border-radius:50%; } .wrapper{ width: calc(100px + 18px); background-color:transparent; height: calc(
HTML5和CSS3一些基本概括
chengxuwa的博客
10-23 754
html5 1.新增了语义化标签 语言，语义。语言的意义就是标签的意义 意思就是这个标签的单词的意思就是他在页面中所充当角色的意思 header 头部 nav 导航 main 主要内容 footer 底部 article 文章 用来放文字段落的标签 aside右侧 2.html5兼容问题 IE9 行级元素设置宽度的时候 会失效 IE8以下爱的版本 不支持语义化标签 IE8的内核 无法解析 只能用js替代 第三种解决方案 1：通过dom就是手动创建标签 ​ 2：就是引入别人写好
css 一口气实现切角+边框+投影+内容背景色渐变
denglouhen的博客
10-26 1374
单纯用css实现切角+边框+投影+内容背景色渐变所有效果，因为UI没给背景切图，寻思这个理论上用css就能实现。 看一下最终要实现的效果： 首先不谈内容紫蓝色渐变，一个单纯的四切角+黑色边框+轮廓投影，其实就直接用网上铺天盖地的background:linear-gradient 实现切角+ 套一层小了1px的伪元素实现边框+ filter: box-shadow实现投影就行了，效果和代码如下： <html> <body> <div class=..
css画图（*****************）
黄沙百战穿金甲，不破楼兰终不还。
03-28 4167
1. 自适应的椭圆 背景知识：border-radius属性的基本用法 使用border-radius制作一个圆很简单，只要给任何正方形元素设置固定宽高及一半长度以上的border-radius，就可以得到圆形 1234 background: #fb3;width: 200px;height: 200px;border-radius: 100px; /*
CSS3小技巧之画图
Aaron's Blog
10-20 478
在前端开发过程中有时我们需要一些小型图标，而类似小图标的图片由于不好操作或背景的原因会造成整体的效果，因而我们需要用到CSS3中的一些小技巧来画出一些小图标。
CSS3画图2
颜枫
11-18 602
CSS3绘图 div{ width:200px; height:200px; border:#F00 solid 1px; margin-bottom:10px; text-align:center; vertical-align:middle;} /*4个角的半径全部是20px*/ div:first-of-type{ border-radius:20px;} /*第一个是上下，第二个是左右
弥红灯c语言程序,一个漂亮的霓虹灯按钮实现
weixin_33418394的博客
05-20 246
实现一：Documentbody {background: #050901;}.light {width: fit-content;padding: 25px 30px;color: #03e9f4;font-size: 24px;text-transform: uppercase;transition: 0.5s;letter-spacing: 4px;cursor: pointer;}.lig...
HTML5和CSS3实现大白绘制
步步心愿的博客
07-17 1331
源代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="{CHARSET}"&gt;         &lt;title&gt;大白设计&lt;/title&gt;         &lt;style&gt;             body {       
css3圆环动画
helloxiaopanpan的博客
02-15 1230
这是之前面试时遇到的一个问题。先看效果。这个是GIF录屏录得不是很流畅。 这是代码 图片的路径自己可以调整一下。 Index #box{position:absolute;width:100px;height:100px;background:url(creal.jpg);clip:rect(0px 100px 0px 50px);transition:a
「HTML+CSS」--自定义按钮样式【004】
海到无边天作岸 山登绝顶我为峰
04-01 2866
前言 Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～） 学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！ 日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～ 效果展示 思路 上面效果可以概括为： 鼠标未
CSS3制作各种形状图像
weixin_34124939的博客
11-23 3838
制作圆形： 要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID <div id="circle"></div> 圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可： #circle { width: 120px; heig...
css3+jq制作百分比圆环，扇形图（两种颜色）
你好！刘斩仙
12-15 8586
代码如下：<html> <head> <meta charset="UTF-8"> <title>扇形绘制</title> <style> .muscle { position: relative; width: 200px; height: 200px; bord
Css3绘制圆形
.
01-29 2315
/**通过box-shadow绘制圆形**/ 基本语法是box-shadow: h-shadow v-shadow blur spread color inset;box-shadow属性的参数设置取值：inset：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；h-shadow:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值