HTML5+CSS3小实例：杰尼龟

最新推荐文章于 2024-09-30 23:36:44 发布
最新推荐文章于 2024-09-30 23:36:44 发布
阅读量147 收藏
点赞数 2
分类专栏： HTML5+CSS3+JS 小实例 文章标签： html5 css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guard_56/article/details/140885727
版权

效果：

HTML:

<body>
  <div class="squirtle">
    <div class="tail"></div>
    <div class="body">
      <div class="stomach"></div>
      <div class="shell"></div>
    </div>
    <div class="head">
      <div class="eye"></div>
      <div class="eye"></div>
      <div class="mouth"></div>
    </div>
    <div class="leg back"></div>
    <div class="leg"></div>
    <div class="arm back"></div>
    <div class="arm"></div>
  </div>
</body>

CSS:

  <style>
    html {
      box-sizing: border-box;
    }

    *,
    *::before,
    *::after {
      box-sizing: inherit;
    }

    body {
      font-size: 100%;
    }

    /* Controls Size */

    .squirtle {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20em;
      height: 20em;
      margin: -10em;
      animation: bounce 250ms infinite linear alternate;
    }

    .squirtle::after {
      content: "";
      position: absolute;
      z-index: -10;
      bottom: 0;
      left: 50%;
      width: 60%;
      height: 20%;
      margin-left: -30%;
      background-color: rgba(0, 0, 0, 0.05);
      border-radius: 50%;
      animation: bounce 250ms infinite linear alternate-reverse;
    }

    .body {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 6em;
      height: 6em;
      margin: 4em 0 0 -1em;
      transform: translate(-50%, -50%);
      overflow: hidden;
      background-color: #fe9;
      border: 0.375em solid #555;
      border-radius: 10% 10% 50% 50% / 50%;
    }

    .body::before,
    .body::after {
      content: "";
      position: absolute;
      z-index: 1;
      top: 2.25em;
      left: -1em;
      width: 1.25em;
      height: 1.5em;
      transform: rotate(55deg);
      background-color: #fe9;
      border: 0.25em solid #555;
      border-radius: 10%;
    }

    .body::after {
      z-index: 0;
      top: 4.825em;
      left: 1.375em;
      height: 1.25em;
      transform: skewX(10deg) rotate(40deg);
      box-shadow: 0.375em -3.375em #fe9, 0.125em -3.0625em #555;
    }

    .stomach {
      position: absolute;
      bottom: 3.25em;
      left: -1.125em;
      width: 115%;
      height: 100%;
      border: 0.25em solid transparent;
      border-bottom-color: #555;
      border-radius: 50%;
      box-shadow: 0 1.25em #fe9, 0 1.5em #555;
    }

    .stomach::before {
      content: "";
      position: absolute;
      bottom: -4.125em;
      left: 2.25em;
      width: 40%;
      height: 100%;
      transform: rotate(-10deg);
      border: 0.25em solid transparent;
      border-left-color: #555;
      border-radius: 50%;
    }

    .shell {
      position: absolute;
      top: 0;
      left: 0.25em;
      z-index: 1;
      width: 100%;
      height: 115%;
      border-radius: 10% 10% 50% 50% / 50%;
      box-shadow: inset -0.5em 0 #953, inset -1em 0 #a63, inset -1.25em 0 #555,
        inset -1.75em 0 #fff, inset -2em 0 #555;
    }

    .tail {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 4.5em;
      height: 5.5em;
      margin: 0.25em 0 0 -0.5em;
      transform-origin: 2.5em 100%;
      background-color: #6bc;
      border: 0.325em solid #555;
      border-radius: 50%;
      animation: bounce2 250ms infinite linear alternate;
    }

    .tail::before,
    .tail::after {
      content: "";
      position: absolute;
      top: -2em;
      left: 2.25em;
      width: 5em;
      height: 5.5em;
      background-color: inherit;
      border: 0.325em solid #555;
      border-left-color: transparent;
      border-radius: 50%;
    }

    .tail::after {
      top: 0.375em;
      left: 2.625em;
      width: 2.5em;
      height: 2.75em;
      transform: translateX(1%);
      background-color: transparent;
      border: 0.325em solid #555;
      border-right-color: transparent;
      border-bottom-color: transparent;
    }

    .head {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      width: 10em;
      height: 10em;
      margin: -8.25em 0 0 -5.5em;
      background-color: #7cd;
      border: 0.325em solid #555;
      border-radius: 50%;
      animation: bounce2 250ms infinite linear alternate;
    }

    .head::before {
      content: "";
      position: absolute;
      bottom: -0.0625em;
      right: 1.625em;
      width: 8.25em;
      height: 5em;
      transform: rotate(10deg);
      background-color: inherit;
      border-radius: 50%;
      box-shadow: 0 0 0 0.325em #555;
    }

    .head::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: inherit;
      border-radius: 50%;
      box-shadow: inset -0.5em 0.25em #6bc;
    }

    .eye {
      position: absolute;
      z-index: 1;
      top: 5em;
      left: 4em;
      width: 2em;
      height: 2.825em;
      overflow: hidden;
      background-color: #555;
      border: 0.1875em solid #555;
      border-radius: 50% / 60% 60% 40% 40%;
      box-shadow: inset 0 -0.375em #a63;
    }

    .eye::before {
      content: "";
      position: absolute;
      top: 0.375em;
      right: 0.25em;
      width: 30%;
      height: 30%;
      background-color: #fff;
      border-radius: 50%;
    }

    .eye:first-child {
      top: 4em;
      left: 0.5em;
      width: 1.5em;
      height: 2.25em;
      border: 0.125em solid #555;
      box-shadow: inset 0 -0.25em #a63;
    }

    .mouth {
      position: absolute;
      z-index: 1;
      bottom: 0.75em;
      left: 2em;
      width: 1.125em;
      height: 1.75em;
      background-color: #fcc;
      border: 0.125em solid #555;
      border-radius: 50%;
      box-shadow: inset 0 1.125em 0 -0.0625em #f55, inset 0 1.1875em #555;
    }

    .mouth::before {
      content: "";
      position: absolute;
      top: -0.25em;
      right: -0.825em;
      width: 3em;
      height: 1em;
      transform: rotate(20deg);
      background-color: #7cd;
      border: 0.125em solid transparent;
      border-bottom-color: #555;
      border-radius: 50%;
    }

    .mouth::after {
      content: "";
      position: absolute;
      top: -6.5em;
      right: -0.825em;
      width: 2em;
      height: 2em;
      transform: rotate(-20deg) scaleY(0.75);
      background-color: rgba(255, 255, 255, 0.25);
      border-radius: 50%;
      box-shadow: -1.5em 0.5em 0 -0.625em rgba(255, 255, 255, 0.25),
        -4.125em 4.5em 0 -0.625em rgba(255, 200, 200, 0.8),
        0.75em 10em 0 -0.5em rgba(255, 200, 200, 0.8);
    }

    .leg {
      position: absolute;
      z-index: 0;
      top: 50%;
      left: 50%;
      width: 2.5em;
      height: 3em;
      margin: 5.25em 0 0 -1em;
      transform-origin: 50% 1em;
      background-color: #7cd;
      border: 0.325em solid #555;
      border-radius: 50% / 50% 50% 50% 30%;
      animation: swing 500ms infinite linear alternate;
    }

    .leg::before {
      content: "";
      position: absolute;
      bottom: -0.325em;
      right: 0.325em;
      width: 2.25em;
      height: 1.5em;
      transform: rotate(15deg);
      background-color: inherit;
      border: 0.325em solid #555;
      border-radius: 50% 50% 50% 50% / 80% 50% 50% 30%;
    }

    .leg::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: inherit;
      border-radius: 50% / 50% 50% 50% 30%;
      box-shadow: inset -0.375em 0.25em #6bc;
    }

    .leg.back {
      z-index: -1;
      width: 2.25em;
      height: 2.75em;
      margin: 5em 0 0 -3.75em;
      background-color: #6bc;
      animation-delay: -500ms;
    }

    .arm {
      position: absolute;
      z-index: 0;
      top: 50%;
      left: 50%;
      width: 2em;
      height: 3em;
      margin: 2.125em 0 0 -0.25em;
      transform-origin: 50% 1em;
      background-color: #7cd;
      border: 0.325em solid #555;
      border-radius: 80% 80% 80% 60% / 60% 60% 60% 80%;
      box-shadow: inset -0.375em 0.25em #6bc;
      animation: swing 500ms -500ms infinite linear alternate;
    }

    .arm.back {
      z-index: -1;
      margin: 1.75em 0 0 -4em;
      background-color: #6bc;
      animation-name: swing2;
      animation-delay: -1000ms;
    }

    /* Animation */

    @keyframes swing {
      0% {
        transform: rotate(-60deg);
      }

      100% {
        transform: rotate(10deg);
      }
    }

    @keyframes swing2 {
      0% {
        transform: rotate(-10deg);
      }

      100% {
        transform: rotate(60deg);
      }
    }

    @keyframes bounce {
      0% {
        transform: translateY(0);
      }

      100% {
        transform: translateY(-0.25em);
      }
    }

    @keyframes bounce2 {
      0% {
        transform: rotate(0);
      }

      100% {
        transform: rotate(2deg);
      }
    }
  </style>

糕手糕糕
关注
专栏目录
html5css3利用伪类做小图标
GS2016的博客
02-01 3571
利用伪类做小图标 @font-face { font-family: 'guosheng'; src: url('fonts/iconfont.eot'); src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'), url('fonts/iconfont.woff') form
扫雷应用程序杰尼龟开发
05-03
扫雷应用程序杰尼龟开发
跳障碍
CHNMSCS
02-16 157
题目： 代码： #!/bin/python3 import math import os import random import re import sys # Complete the hurdleRace function below. def hurdleRace(k, height): maxHeight = max(height) if maxHeight - k >= 0: return maxHeight - k else:
html+css+js实现一个方块移动过障碍物的小游戏
m0_64568089的博客
11-13 619
ps: 但是这种方式去判断是否相撞的精确度不够，如果用户在与障碍物即将相撞时迅速移动小方块躲避，虽然看起来没有碰到，但是系统仍会判为碰到了。以向左为例，给left按钮添加一个click的事件，按下之后，将小方块的right减去20px。与下方的障碍物比较：障碍物的top减去小方块的top小于小方块的高度时，说明小方块与障碍物相撞了。按下界面中间“开始游戏”的按钮，按钮隐藏起来，障碍物开始循环移动，并且开始播放音效。与上方的障碍物比较：小方块的top小于障碍物的高度时，说明小方块与障碍物相撞了。
基于HTML5和CSS3搭建一个Web网页（三）
阿常的博客
05-19 970
倘若代码中有任何问题或疑问，欢迎留言交流~
HTML5+CSS3项目实战详解
06-20
课程讲解循序渐进，难度由浅入深，老师带领学生通过实战练习，学会HTML5+CSS3开发。 课程中包含5个实战练习： 声音和图像淘宝轮播图个人简介五子棋百度页面
vue 高德地图绘制覆盖物时使用的一些方法
weixin_46328739的博客
06-15 403
vue 中使用高德地图，绘制marker及聚合 根据经纬度数组计算出一个合适的地图缩放级别，以便同时显示所有的覆盖物。 计算给定经纬度数组的平均值 当用户拖动或缩放地图时，您可能想要重新加载某些地图数据，以便只显示在新地图视窗中可见的数据
JavaScript面向对象03
weixin_54236608的博客
05-17 203
面向对象ES6一、介绍二、类和对象2.1、super关键字 一、介绍 面向过程（POP）：面向过程是以步骤来划分问题的，顺序执行，联系紧密。 面向对象（OOP）:面向对象是以对象功能来划分问题的，容易复用，容易维护。 面向对象的特性：封装，继承，多态 二、类和对象 类：抽取对象共有的属性和方法封装成一个类（模板） 对象：对类进行实例化，获取类的对象（具体的事物） 对象是由属性和方法组成的 创建类（类里面有个constructor函数，当我们不写，也会自动生成，但是只有一个）： <scrip
Backbine.js实战第七章----导航控制器
11-15 1101
在前面的章节中曾提到，Backbone框架的最佳应用chan
VUE快速入门02
weixin_54236608的博客
05-24 186
VUE一、VUE 一、VUE vue是一个渐进式的框架（vue作为应用的一部分嵌入其中，一点点的实行替换） vue的功能 （1）解耦视图和数据 （2）可复用组件 （3）前端路由技术 （4）状态管理 持续更新中。。。 ...
杰尼龟影院微信小程序.zip
06-06
杰尼龟影院微信小程序.zip
扫雷源码 杰尼龟的扫雷源码
05-03
扫雷源码 杰尼龟的扫雷源码
python海龟杰尼龟
12-09
以下是使用Python turtle库绘制海龟杰尼龟的代码和效果图： ```python import turtle # 设置画布大小和背景颜色 turtle.setup(800, 600) turtle.bgcolor("white") # 设置画笔颜色和大小 turtle.pensize(4) turtle...
python绘画杰尼龟
05-13
Python绘画杰尼龟是一个基于Python语言的图形化库，它可以让开发者使用Python编写程序来控制一个小乌龟在屏幕上绘制图形，非常适合初学者学习Python编程和图形化编程。 在Python绘画杰尼龟中，开发者可以通过编写...
前端学习第一天笔记 HTML5 CSS初学以及VSCODE中的常用快捷键
最新发布
samroom的博客
09-30 1238
HTML5 标题标签，标签之段落、换行、水平线。标签之图片、图片路径详解、标签之超文本链接、标签之文本、列表标签之有序列表、列表标签之无序列表、标签之表格、表格之合并单元格、form表单、块元素与行内元素、HTML5新增标签、CSS简介与引入方式
HTML5--裸体回顾
金灰的博客
09-28 1072
dl dt dd。
HTML5实现唐朝服饰网站模板源码
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
09-27 1325
HTML5实现唐朝服饰网站模板源码，大作业，毕业设计，唐装网站，服饰网站，网站源码，介绍唐装的由来，分为网站首页，唐装演变，唐装配色，唐装花纹，唐装文化等页面，实现了轮播图、视频、表单、TAB、导航栏、底部栏、列表、图文组合、返回顶部等功能，让你代入唐朝服饰的体验感，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
HTML5实现好看的唐朝服饰网站模板源码2
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
09-29 1983
HTML5实现好看的唐朝服饰网站模板源码2，最美唐装，最全唐装素材，大作业，毕业设计，唐装网站，服饰网站，网站源码，介绍唐装的由来，分为网站首页，唐装演变，唐装配色，唐装花纹，唐装文化等页面，实现了轮播图、视频、表单、TAB、导航栏、底部栏、列表、图文组合、返回顶部等功能，让你代入唐朝服饰的体验感，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值