免费送人了

最新推荐文章于 2023-01-28 20:58:03 发布
最新推荐文章于 2023-01-28 20:58:03 发布
阅读量84 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59199315/article/details/123359216
版权

css html css3 
<!DOCTYPE html>
 
<html lang="en">
 
 
 
<head>
 
  <meta charset="UTF-8">
 
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
  <title>Document</title>
 
  <style>
 
    * {
 
      margin: 0;
 
      padding: 0
 
    }
 
 
 
    body {
 
      background: #d4ebf1;
 
      color: #000;
 
    }
 
 
 
    .m_body {
 
      width: 362px;
 
      height: 410px;
 
      border: #393939 8px solid;
 
      margin: 50px auto;
 
      border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
 
      position: absolute;
 
      left: 109px;
 
      top: -30px;
 
      background: #fff;
 
    }
    .m_body h3{
      position: absolute;
      top: 386px;
      left: 154px;
    }
    .m_body p{
      width: 40px;
      height: 40px;
      border: 5px solid black;
      border-radius: 50%;
      display: inline-block;
      position: relative;
      left: 100px;
      top: 300px;
    }
    .m_body i{
      width: 40px;
      height: 40px;
      border: 5px solid black;
      border-radius: 50%;
      display: inline-block;
      position: relative;
      left: -35px;
      top: 320px;
    }
    .m_body .p1{
      border:  5px solid blue;
    }
    .m_body .p2{
      border:  5px solid black;
    }
    .m_body .p3{
      border:  5px solid red;
    }
    .m_body .p4{
      border:  5px solid yellow;
    }
    .m_body .p5{
      border:  5px solid green;
    }
 
    .ear1,
 
    .ear2 {
 
      background: #393939;
 
      width: 81px;
 
      height: 115px;
 
      border-radius: 50%;
 
      position: absolute;
 
      z-index: -1;
 
    }
 
    .ear1 {
 
      left: 150px;
 
      top: 26px;
 
      transform: rotate(-10deg);
 
    }
 
    .ear2 {
 
      left: 362px;
 
      top: 28px;
 
      transform: rotate(10deg);
 
    }
 
 
 
    .eye1,
 
    .eye2 {
 
      background: #393939;
 
      width: 83px;
 
      height: 115px;
 
      border-radius: 50%;
 
      position: absolute;
 
    }
 
 
 
    .eye1 {
 
      left: 185px;
 
      top: 122px;
 
      transform: rotate(45deg);
 
    }
 
 
 
    .eye2 {
 
      left: 329px;
 
      top: 122px;
 
      transform: rotate(-45deg);
 
    }
 
 
 
    .eye1:before,
 
    .eye2:before {
 
      content: "";
 
      width: 40px;
 
      height: 40px;
 
      border: #fff 5px solid;
 
      border-radius: 100%;
 
      position: absolute;
 
    }
 
 
 
    .eye1:before {
 
      right: 10px;
 
      top: 22px;
 
    }
 
 
 
    .eye2:before {
 
      left: 10px;
 
      top: 22px;
 
    }
 
 
 
    .eye1:after,
 
    .eye2:after {
 
      content: "";
 
      width: 10px;
 
      height: 10px;
 
      background: #9b9b9b;
 
      border-radius: 100%;
 
      position: absolute;
 
    }
 
 
 
    .eye1:after {
 
      right: 27px;
 
      top: 31px;
 
    }
 
 
 
    .eye2:after {
 
      left: 41px;
 
      top: 44px;
 
    }
 
 
 
    .face {
 
      position: absolute;
 
      border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;
 
    }
 
 
 
    .c_blue {
 
      border: #6bcdf3 5px solid;
 
      width: 280px;
 
      height: 224px;
 
      left: 150px;
 
      top: 78px;
 
    }
 
 
 
    .c_red {
 
      border: #af2350 5px solid;
 
      width: 287px;
 
      height: 233px;
 
      left: 146px;
 
      top: 73px;
 
    }
 
 
 
    .c_purple {
 
      border: #5d75b3 5px solid;
 
      width: 295px;
 
      height: 240px;
 
      left: 142px;
 
      top: 70px;
 
    }
 
 
 
    .c_yellow {
 
      border: #ffc346 5px solid;
 
      width: 305px;
 
      height: 248px;
 
      left: 137px;
 
      top: 65px;
 
    }
 
 
 
    .c_green {
 
      border: #7fcb58 5px solid;
 
      width: 313px;
 
      height: 256px;
 
      left: 133px;
 
      top: 61px;
 
    }
 
 
 
    .arm1,
 
    .arm2 {
 
      background: #333;
 
      position: absolute;
 
      z-index: -1;
 
    }
 
 
 
    .arm1 {
 
      width: 75px;
 
      height: 118px;
 
      left: 64px;
 
      top: 244px;
 
      transform: rotate(45deg);
 
      border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;
 
    }
 
 
 
    .arm2 {
 
      width: 75px;
 
      height: 148px;
 
      left: 463px;
 
      top: 162px;
 
      transform: rotate(37deg);
 
      border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;
 
    }
 
 
 
    .arm2:before {
      content: "";
      width: 16px;
      height: 24px;
      background: #bc242c;
      position: absolute;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
      transform: rotate(45deg);
      left: 32px;
      top: 20px;
    }
    .arm2:after {
      content: "";
      width: 16px;
      height: 24px;
      background: #bc242c;
      position: absolute;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
      transform: rotate(-45deg);
      left: 26px;
      top: 20px;
    }
    .arm_c {
      content: "";
      width: 16px;
      height: 24px;
      position: absolute;
      left: 426px;
      top: 20px;
    }
    .nose {
      background-color: #333333;
    }
    .nose:before,
    .nose:after {
      content: '';
      position: absolute;
      background-color: inherit;
    }
    .nose,
    .nose:before,
    .nose:after {
      width: 28px;
      height: 18px;
      border-radius: 42px 42px 60px 61px/ 30px 30px 50px 46px;
    }
    .nose {
      position: absolute;
      left: 284px;
      top: 187px;
    }
    .mouse {
      position: absolute;
      left: 265px;
      top: 205px;
      width: 68px;
      height: 25px;
      border-radius: 48%;
      border: #393939 7px solid;
      border-top: none;
      border-left: 0;
      border-right: 0;
    }
    .leg1,
    .leg2 {
      background: #333;
      position: absolute;
      width: 83px;
      height: 80px;
      border-radius: 0 0 30px 30px;
      z-index: -1;
    }
    .leg1 {
      left: 187px;
      top: 423px;
    }
    .leg2 {
      left: 328px;
      top: 423px;
    }
    .leg1:after,
    .leg2:after {
      content: "";
      width: 43px;
      height: 30px;
      position: absolute;
      background: #363636;
      border-radius: 30px;
    }
    .leg1:after {
      bottom: 0;
      right: -3px;
    }
    .leg2:after {
      bottom: 0;
      left: -3px;
    }
  </style>
</head>
<body>
  <div class="m_body">
    <h3>XXX</h3>
    <p class="p1"></p>
    <p class="p2"></p>
    <p class="p3" ></p>
    <i class="p4" ></i>
    <i class="p5"></i>
  </div>
  <div class="ear1"></div>
  <div class="ear2"></div>
  <div class="eye1"></div>
  <div class="eye2"></div>
  <div class="face c_blue"></div>
  <div class="face c_red"></div>
  <div class="face c_purple"></div>
  <div class="face c_yellow"></div>
  <div class="face c_green"></div>
  <div class="nose"></div>
  <div class="mouse"></div>
  <div class="arm1"></div>
  <div class="arm2"></div>
  <div class="leg1"></div>
  <div class="leg2"></div>
</body>
</html>

大地的那个土
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
50套欧美极简大气PPT模板免费送
03-13
【标题】：“50套欧美极简大气PPT模板免费送” 这标题表明我们正在讨论一个资源包，其中包含了50个设计风格为欧美极简大气的PPT模板，且这些模板是可供用户免费下载使用的。这样的资源对于需要制作演示文稿的人来说...
我让ChatGPT用CSS3画一个皮卡丘，还是自己画的可爱
最新发布
xingyu_qie的专栏
05-11 2万+
ChatGPT用CSS3画出来的皮卡丘不满意，自己动手画一个
CSS画皮卡丘
Dax1_的博客
08-22 233
效果图 index.html <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cove
css样式之border-radius
weixin_30633949的博客
01-06 48
border-radius 属性设置边框的园角 可能的值：像素，百分比 扩展延伸 html代码 <div></div> css代码 div { height: 200px; width: 200px; border: 2px solid #a72525; border-radius: 10px; } ...
HTML+CSS练习——皮卡丘（更新中）
染星_的博客
03-14 2462
前两天学了网页制作大白（地址：纯 CSS 打造网页版「大白」_Web - 蓝桥云课）今天试试自己按照一张图片用HTML与CSS制作出来。 原图： 目前进度：头部部分完成 代码如下： HTML： <div id="back"> <!-- 耳朵部分 --> <div id="ear1"> <div id="ear-yello"></div> <div
border-radius（使用详解）
wwwjjjjj666的博客
01-28 6127
讲述了border-radius的使用
61个漂亮网站免费送
08-15
标题 "61个漂亮网站免费送" 暗示了这是一个资源分享的集合，其中包含61个设计精美、功能各异的网站，这些网站可能是模板、网页设计灵感库或者在线工具，供用户免费使用。这样的资源包对于设计师、开发者、网站管理员...
徐老师十八掌，免费送
05-26
徐老师十八掌大数据精品 过去三十年是IT时代，而未来的三十年是DT时代，马云曾经在一次演讲中说道：“人类正从IT时代走向DT时代”，很多企业和个人都已经认识到了行业发展方向，大数据在行业中占据越来越重要的地位...
漂亮水晶按钮图片免费送
08-20
"漂亮水晶按钮图片免费送"这个标题暗示了我们正在讨论的是一个与图形设计相关的资源，特别是用于创建用户界面的水晶风格的按钮图像。这种设计风格通常以其透明度、光泽效果和立体感为特征，给人一种现代且吸引人的...
远控代码免费送你，调试无错
12-06
标题中的“远控代码免费送你，调试无错”表明这是一份可用于远程控制的软件源代码，而且已经过调试，可以确保其功能正常运行，无需进一步调整。 远程控制通常涉及到以下几个关键技术点： 1. **网络通信**：远程...
canvas绘制皮卡丘
10-31
纯坐标点计算绘制皮卡丘，心疼自己~~~~(>_<)~~~~
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 2031
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
Css画一只皮卡丘
点滴记忆
10-31 355
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- html5 必须的属性 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
css3画的马赛克皮卡丘
ICode联盟
10-23 121
css3画的马赛克皮卡丘。
css画皮卡丘
qq_44906900的博客
12-14 499
目录 前言 效果预览 素材来源 踩坑记录+技巧总结（MVC） 源码奉上 一、前言 学习前端有一段时间了，最近复习了一下 CSS，还有 MVC 模式。发现还是有很多不足的地方。想着，就简单的使用 CSS 画个东西吧。再简单的使用 MVC 实现一个播放器 player 不知道有没有机会做你的皮卡丘，举高高，要抱抱~ 这才是猛男该看的东西（doge） 二、效果预览 Gitee 预览 温馨提示：点击皮卡丘的鼻子可以动的 PC 端 手机端 三、素材来源 CodePen 搜索 pikachu
css画一个皮卡丘
o_heart
06-09 4507
最近皮神火了，萌萌哒，很阔耐。那么用css能不能画个皮神呢？赶紧来试一下吧～
CSS3 画皮卡丘
小柒的前端之旅
07-13 1667
前面的话 周末放松放松，刚好看到知乎上面的小demo——css画皮卡丘，挺可爱的，练练手。同时也分享给大家 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...
CSS画卡通人物：皮卡丘
qq_44645934的博客
04-13 1939
皮卡丘 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pikachu</title> <link rel="stylesheet" href="css/Pikachu.css" /> </head> ...
皮卡丘css代码,CSS皮卡丘注释全
weixin_35893552的博客
08-03 255
body {margin:0;}#view {width:500px;height:500px;margin:0px auto 0px auto;background:;position:relative;}/*头*/#head {width:160px;height:175px;margin:auto;background:#ffe100;position:absolute;top:10%;le...
千万级在线推送系统架构详解：功能与实战分享
1. **免费好友间短信和彩信发送**：允许用户无需费用即可在手机和Web端/PC客户端之间自由沟通。 2. **智能拨号**：支持多种输入方式，方便快捷地查找联系人。 3. **通讯录管理与备份/恢复**：保障用户数据的安全性。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值