感恩节如何使用 HTML + CSS 绘制火鸡（Turkey）

最新推荐文章于 2024-02-14 10:13:40 发布
原创 最新推荐文章于 2024-02-14 10:13:40 发布
· 3.3w 阅读 · 1 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

上效果图！！！！快点学起来！！！
（代码来自 codepen，已附上链接）

在这里插入图片描述

先来一道香喷喷的火鸡吧
在这里插入图片描述

再看萌萌的火鸡跳舞

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<!-- https://codepen.io/BlackPug/pen/gDqjx -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
    
      background-color: #cc3333;
    }

    .top,
    .bottom {
    
      position: absolute;
      font: 4em Geneva, serif;
    }

    .top {
    
      top: 480px;
      left: 380px;
    }

    .bottom {
    
      top: 540px;
      left: 435px;
    }

    .turkey {
    
      width: 700px;
      height: 700px;
      position: relative;
      margin: 200px 0 0 400px;
    }

    .body {
    
      background-color: #993300;
      width: 400px;
      height: 300px;
      border-radius: 50%;
      position: absolute;
    }

    .right-breast {
    
      background-color: #a93300;
      width: 220px;
      height: 150px;
      border-radius: 50%;
      position: absolute;
      left: 174px;
      top: 30px;
      transform: rotate(30deg);
      -ms-transform: rotate(30deg);
      -webkit-transform: rotate(30deg);
    }

    .left-breast {
    
      background-color: #993300;
      width: 240px;
      height: 150px;
      border-radius: 50%;
      position: absolute;
      left: 155px;
      top: 55px;
      transform: rotate(40deg);
      -ms-transform: rotate(40deg);
      -webkit-transform: rotate(40deg);
    }

    .neck {
    
      background-color: #8A2E00;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      position: absolute;
      top: 180px;
      left: 320px;
    }

    .wing-top {
    
      background-color: #8A2E00;
      width: 160px;
      height: 80px;
      border-radius: 50%;
      position: absolute;
      top: 210px;
      left: 150px;
      transform: rotate(30deg);
      -ms-transform: rotate(30deg);
      -webkit-transform: rotate(30deg);
    }

    .wing-bottom {
    
      background-color: #7C2900;
      width: 130px;
      height: 50px;
      border-radius: 50%;
      position: absolute;
      top: 260px;
      left: 160px;
      transform: rotate(10deg);
      -ms-transform: rotate(10deg);
      -webkit-transform: rotate(10deg);
    }

    .tail {
    
      background-color: #7C2900;
      width: 90px;
      height: 70px;
      border-radius: 50%;
      position: absolute;
      top: 200px;
      left: 10px;
      transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
      -webkit-transform: rotate(-10deg);
    }

    .drumstick {
    
      background-color: #8A2E00;
      width: 180px;
      height: 160px;
      border-radius: 50%;
      position: absolute;
      top: 15px;
      left: -25px;
      transform: rotate(10deg);
      -ms-transform: rotate(10deg);
      -webkit-transform: rotate(10deg);
    }

    .back-drumstick {
    
      background-color: #7C2900;
      width: 180px;
      height: 160px;
      border-radius: 50%;
      position: absolute;
      top: -10px;
      left: 50px;
      transform: rotate(10deg);
      -ms-transform: rotate(10deg);
      -webkit-transform: rotate(10deg);
    }

    .front-bone {
    
      background-color: white;
      width: 50px;
      height: 25px;
      border-radius: 30%;
      position: absolute;
      top: 35px;
      left: -50px;
      transform: rotate(30deg);
      -ms-transform: rotate(30deg);
      -webkit-transform: rotate(30deg);
    }

    .back-bone {
    
      background-color: white;
      width: 40px;
      height: 22px;
      border-radius: 30%;
      position: absolute;
      top: -3px;
      left: 50px;
      transform: rotate(30deg);
      -ms-transform: rotate(30deg);
      -webkit-transform: rotate(30deg);
    }

    .back-left-knob {
    
      background-color: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      position: absolute;
      top: -10px;
      left: 26px;
    }

    .back-right-knob {
    
      background-color: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      position: absolute;
      top: -30px;
      left: 46px;
    }

    .front-left-knob {
    
      background-color: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      position: absolute;
      top: 5px;
      left: -52px;
    }

    .front-right-knob {
    
      background-color: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      position: absolute;
      top: 30px;
      left: -68px;
    }

    .plate {
    
      background-color: silver;
      width: 500px;
      height: 150px;
      border-radius: 50%;
      position: absolute;
      top: 390px;
      left: 360px;
    }

    .inner-plate {
    
      background-color: grey;
      width: 440px;
      height: 130px;
      border-radius: 50%;
      position: absolute;
      top: 390px;
      left: 390px;
    }

    .smoke {
    
      opacity: 0.1;
    }

    .line01 {
    
      background-color: white;
      position: absolute;
      height: 50px;
      width: 20px;
      top: 200px;
      left: 510px;
      transform: rotate(40deg);
      -ms-transform: rotate(40deg);
      -webkit-transform: rotate(40deg);
    }

    .line02 {
    
      background-color: white;
      position: absolute;
      height: 50px;
      width: 20px;
      top: 172px;
      left: 510px;
      transform: rotate(-40deg);
      -ms-transform: rotate(40deg);
      -webkit-transform: rotate(40deg);
    }

    .line03 {
    
      background-color: white;
      position: absolute;
      height: 50px;
      width: 20px;
      top: 145px;
      left: 510px;
      transform: rotate(40deg);
      -ms-transform: rotate(40deg);
      -webkit-transform: rotate(40deg);
    }

    .line04 {
    
      background-color: white;
      position: absolute;
      height: 50px;
      width: 20px;
      top: 118px;
      left: 510px;
      transform: rotate(-40deg);
      -ms-transform: rotate(-40deg);
      -webkit-transform: rotate(-40deg);
    }

    .line11 {
    
      background-color: white;
      position: absolute;
      height: 50px;
      width: 20px;
      top: 200px;
      left: 560px;
      transform: rotate(40deg);
      -ms-transform: rotate(40deg);
      -webkit-transform: rotate(40deg);
    }

    .line12 {
    
      background-color: white;
      position: absolute;
      height: 50px;
      width: 20px;
      top: 172px;
      left: 560px;
      transform: rotate(-40deg);
      -ms-transform: rotate(-40deg);
      -webkit-transform: rotate(-40deg);
    }

    .line13 {
    
      background-color: white;
      position: absolute;
      height: 50px;
      width: 20px;
      top: 145px;
      left: 560px;
      transform: rotate(40deg);
      -ms-transform: rotate(40deg);
      -webkit-transform: rotate(40deg);
    }

    .line14 {
    
      background-color: white;
      position: absolute;
      height: 50px;
      width: 20px;
      top: 118px;
      left: 560px;
      transform: rotate(-40deg);
      -ms-transform: rotate(-40deg);
      -webkit-transform: rotate(-40deg);
    }

    .line21 {
    
      background-color: white;
      position: absolute;
      height: 50px;
      width: 20px;
      top: 200px;
      left: 610px;
      transform: rotate(40deg);
      -ms-transform: rotate(40deg);
      -webkit-transform: rotate(40deg);
    }

    .line22 {
    
      background-color: white;
      position: absolute;
      height: 50px;
      width: 20px;
      top: 172px;
      left: 610px;
      transform: rotate(-40deg);
      -ms-transform: rotate(-40deg);
      -webkit-transform: rotate(-40deg);
    }

    .line23 {
    
      background-color: white;
      position: absolute;
      height: 50px;
      width: 20px;
      top: 145px;
      left: 610px;
      transform: rotate(40deg);
      -ms-transform: rotate(40deg);
      -webkit-transform: rotate(40deg);
    }

    .line24 {
    
      background-color: white;
      position: absolute;
      height: 50px;
      width: 20px;
      top: 118px;
      left: 610px;
      transform: rotate(-40deg);
      -ms-transform: rotate(-40deg);
      -webkit-transform: rotate(-40deg);
    }
  </style>
</head>

<body>
  <div class="plate"></div>
  <div class="inner-plate"></div>

  <div class="turkey">
    <div class="back-bone"></div>
    <div class="back-left-knob"></div>
    <div class="back-right-knob"></div>
    <div class="back-drumstick"></div>
    <div class="tail"></div>
    <div class="body"></div>
    <div class="right-breast"></div>
    <div class="neck"></div>
    <div class="left-breast"></div>
    <div class="wing-top"></div>
    <div class="wing-bottom"></div>
    <div class="front-bone"></div>
    <div class="front-left-knob"></div>
    <div class="front-right-knob"></div>
    <div class="drumstick"></div>
  </div>

  <div class="smoke">
    <div class="line01"></div>
    <div class="line02"></div>
    <div class="line03"></div>
    <div class="line04"></div>

    <div class="line11"></div>
    <div class="line12"></div>
    <div class="line13"></div>
    <div class="line14"></div>

    <div class="line21"></div>
    <div class="line22"></div>
    <div class="line23"></div>
    <div class="line24"></div>
  </div>

  <div class="top">Happy</div>
  <div class="bottom">Thanksgiving!</div>
</body>

</html>

================================

<!DOCTYPE html>
<html lang="en">
<!-- https://codepen.io/TWAIN/pen/zowzOE -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
    
      background: #6495ed;
    }

    #turkey {
    
      display: block;
      margin: auto;
      margin-top: 50px;
      width: 40%;
      height: 40%;
      animation: moveTurkey 30s ease-in-out infinite;
    }

    #rightpupil,
    #leftpupil {
    
      animation: moveEyes 3s linear infinite;
    }

    #leftfoot {
    
      animation: moveLeft 3s linear infinite;
    }

    #rightfoot {
    
      animation: moveRight 3s linear infinite;
    }

    #message {
    
      display: block;
      margin: auto;
      margin-top: -75px;
    }

    text tspan {
    
      font-family: Helvetica, Arial;
      font-size: 60px;
      fill: #f8de7e;
      font-weight: bold;
      animation: textMotion 2s ease infinite;
    }

    @-webkit-keyframes moveEyes {
    

      from,
      to {
    
        transform: translate(0, 0);
      }

      10%,
      30%,
      50%,
      70%,
      90% {
    
        transform: translate(-1px, 0);
      }

      20%,
      40%,
      60%,
      80% {
    
        transform: translate(8px, 0);
      }
    }

    @-webkit-keyframes moveTurkey {
    

      from,
      to {
    
        transform: translate(0, 0);
      }

      10%,
      30%,
      50%,
      70%,
      90% {
    
        transform: translate(-200px, 0);
      }

      20%,
      40%,
      60%,
      80% {
    
        transform: translate(200px, 0);
      }
    }

    @-webkit-keyframes moveLeft {
    

      from,
      to {
    
        transform: translate(0, 0);
      }

      10%,
      30%,
      50%,
      70%,
      90% {
    
        transform: translate
最低0.47元/天 解锁文章
html页面小宠物代码大全,纯css3实现宠物小鸡实例代码
weixin_29144939的博客
06-03 2937
最近看了很多关于css3的知识和文章，觉得css3用起来很方便，使用css3的话，在页面布局上可以省去很多不必要的代码。所以最近用css3仿写了我每天都照顾的宠物小鸡的模样，第一次写，有些细节处理的不够好。先看最终效果图：接下来是我书写的步骤：首先是html,分别写出云朵，小鸡的身体，鸡冠，眼睛，嘴巴，腮红，翅膀，鸡爪接下来是css设置样式：先设置整体的背景色，使用的是线性渐变linear-gra...
感恩节祝福html,2015感恩节祝福语大全：感恩节感谢帮助我们的人
weixin_35767900的博客
06-26 203
今天是感恩节，向所有帮助过我和我爱的朋友们说声感谢，感谢你走进我的生命，让它完整而有意义。我愿以我有生的时光带给你无限快乐!我不知道樱花能开多久值不值得去等候!我不知道流星能划多久值不值得去追求!但我知道你是我很好的朋友值得我用一生去挽留!感恩节快乐!天地间有种东西叫雨，从天而降，落地而滋润;人间有种东西叫爱，自吸引中诞生，升华中融洽;朋友中有一人是你，识于偶然，止于永久。祝你感恩节快乐!我不怕孤...
html+css实现感恩节祝福
DRAMIVT的专栏
02-25 2657
MyHtml.html --> *{margin:0px 0px;pasdding:0px 0px;} body{background:#FFCB7D} #Mbackground{width:1300px;height:650px;margin:6px auto; border:1px solid #000;border-r
感恩节祝福html,感恩节祝福英文
weixin_35998457的博客
06-26 457
【感恩节祝福语英文】01、Though we are not with you but we miss you all on this Thanksgiving Day.虽然感恩节你不能和我们在一起，但是我们会想念你的。02、Love you all this Thanksgiving Day.感恩节里更加爱你。03、Thanksgiving wishes for you and your fam...
写在感恩节
weixin_33882452的博客
11-27 151
我们应该感激万物，感激造物主创造我们，我们感激每一滴水，感激每一个人，每一个人都对这个世界心存感激，那么世界将会变得更加美好。 ——摘自《Java程序员，上班那点事儿》   今天是感恩节，我和我女儿还有LP一块儿说，咱们在今天互相感谢一下吧，我先说： 感谢LP在事业上做我的坚强后盾，感谢LP给我生了一个这么可爱的女儿，感谢女儿聪明可爱，每天在我工作很累的时候，让我很开心！   我LP说...
用c语言编程感恩父母,感恩父母
weixin_39828331的博客
05-19 722
在今年的感恩节里，我想深深地感谢我的养父母 !亲爱的妈妈，虽然我每天都会做错事，但是您却一直爱我、照顾我。当您生病的时候，我想试着去帮助您，让您尽快地好起来，但是您总是表现得非常坚强；当您应该休息的时候，您却还在工作和做家务。妈妈，您就像天边的彩虹 ! 从遥远的地方就能让我看到您明亮的光芒，您总是让事情变得美好。爸爸每次夸奖您的力量、美丽、聪明时，我都觉得他说得不错。妈妈，借感恩节，我也想真诚地对...
给小美的感恩节表白
听风轻咛
11-23 400
程序员最近想恋爱了，脑子里面想的除了代码，填充了些别的画面（当然，别那么猥琐，程序员还是很纯情的）； 刚好最近在学习python，上网找了几个GUI库进行了对比，花了一上午工夫写了个小软件，班门弄斧了有点，一来讨女神欢心，二来作学习用，将代码照进现实； 程序一共100行不到，逻辑也蛮简单，我们的环境是使用Sublime text 3，在windows上运行，这里因为我们用的sublime tex...
分享83个CSS3特效，总有一款适合您
最新发布
zy0412326的专栏
02-14 771
知识付费甚欢喜，为咱码农谋福利。css3+three.js彩色横向线条移动闪烁背景动画特效。CSS3扁平化谷歌Loading加载图标动画特效。css3 svg飞速行驶的卡通赛车加载动画特效。css3 svg方块组合花纹图形背景动画特效。css3彩色loading加载进度条动画特效。CSS3圆环旋转加载loading动画特效。CSS3线性圆形Loading加载动画特效。CSS3气泡交叉游动网页加载图标动画特效。CSS3六边形Loading加载动画特效。CSS3 SVG彩色叶子发光变色动画特效。
简单模拟Google感恩节的大公鸡Doodle
03-29
NULL 博文链接：https://bun-ny.iteye.com/blog/1278540
感恩节寄语
心存梦想，践行渐远
11-26 487
人生若是能心存感恩，时时将爱心传递，这个世界将不会再有黑暗;人生若心存感恩，乐于助人，人与人之间将再也没有仇恨。感恩节到了，愿我们都能够学会感恩。 　　一朵花儿代表一颗心，玫瑰送出爱意，百合送出关怀，茉莉送出温暖，牡丹送出华贵!送你一束七色花，朋友，在这个感恩节之际，愿你人生如百花盛开，灿烂缤纷! 　　感恩节到了，有真心的，就该谢谢夫妻的百日恩。有良心的，就该谢谢老板的知遇恩。有孝心的
10行java代码实现email代码表白感恩节必备~
bug郭的博客
11-25 2625
点击跳转写在前面效果展示源码教程重点注意事项 写在前面 感恩节~，记得给最爱的家人发祝福，你牵挂的人联系！ 今天bug郭带你写一个发邮件的代码！程序员的浪漫！ 效果展示 源码 MyEmail.java //导入mail的包 import org.apache.commons.mail.EmailException; import org.apache.commons.mail.SimpleEmail; //创建MyEmail类 class MyEmail{ /** * @param us
方差分析
weixin_34160277的博客
05-19 688
  sklearn实战-乳腺癌细胞数据挖掘（博主亲自录制视频教程） https://study.163.com/course/introduction.htm?courseId=1005269003&amp;utm_campaign=commission&amp;utm_source=cp-400000000398149&amp;utm_medium=share     Tukey等多重检验...
前端酷炫效果之那些漂亮的登录界面
热门推荐
qq_43477721的博客
05-21 3万+
<!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> * { m.
前端酷炫效果之你一定需要的 Button 样式
qq_43477721的博客
04-22 2万+
jQuery 实现萤火虫效果（我在B站看到的，地址忘记了，感兴趣的小伙伴可以去找找）???????? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...
CSS 属性 ----- overflow：auto 的使用
qq_43477721的博客
06-14 1万+
overflow 属性规定当内容溢出元素框时发生的事情。定义当一个元素的内容太大而无法适应 块级格式化上下文时候该做什么。它是 overflow-x 和overflow-y的 简写属性 。 MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 <!DOCTYPE html> <html lang="en"> <head> .
Vue 项目安装 scss 以及报错的解决方法 --- Window10 系统 和 Mac OS 系统
qq_43477721的博客
02-28 6506
1.安装sass依赖 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 如果运行之后项目报错 Module build failed: TypeError: this.getResolve is not a function at Object.loa...
CSS实现新拟态效果
qq_43477721的博客
07-21 4449
新拟态是一种图形样式，其原理是为界面的UI元素赋予真实感。 原生名词有几个叫法，Neumorphism / soft ui，翻译过来是新拟态或者是软ui。国内的翻译叫，新拟物风格。Neumorphism，是New +Skeuomorphism的组合词。 不得不说，这样的效果确实很不错，那么使用 CSS 该如何实现呢？ 推荐一个网站，https://neumorphism.io/#e6eef4 在这个网站可以非常方便实现新拟态。 我自己实现的效果???????????????????? <!DOC
HTML+ CSS实现动态背景渐变
qq_43477721的博客
04-23 4234
B站地址 https://www.bilibili.com/video/BV1St411P7ef/?spm_id_from=333.788.videocard.6 <!DOCTYPE html> <html lang="en" dir="ltr" style="width: 100%; height: 100%;"> <head> <meta ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值