web前端之实现一只可爱的小杰尼乌龟、伪元素、动画

news2024/11/27 11:47:44

MENU

  • 前言
  • 效果图
  • html
  • style

前言

代码段使用HTML和CSS创建一个“杰尼龟”的动画。

效果图

1

2

html

<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>

HTML定义“杰尼龟”的结构，包括尾巴、身体、头部、眼睛、嘴巴、四肢等。

style

html {
    box-sizing: border-box;
}

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

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;

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

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

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

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

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

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

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

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

        .body::before,
        .body::after {
            content: "";
            position: absolute;
            background-color: #ffee99;
            border: 0.25em solid #555555;
            border-radius: 10%;
        }

        .body::before {
            width: 1.25em;
            height: 1.5em;
            top: 2.25em;
            left: -1em;
            z-index: 1;
            transform: rotate(55deg);
        }

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

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

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

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

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

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

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

            .mouth::after {
                content: "";
                position: absolute;
                width: 2em;
                height: 2em;
                top: -6.5em;
                right: -0.825em;
                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);
            }
        }

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

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

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

        .leg::before {
            content: "";
            position: absolute;
            width: 2.25em;
            height: 1.5em;
            right: 0.325em;
            bottom: -0.325em;
            transform: rotate(15deg);
            background-color: inherit;
            border: 0.325em solid #555555;
            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 #66bbcc;
        }

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

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

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

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

@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);
    }
}

初始化

html {
    box-sizing: border-box;
}

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

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;
}

代码段设定全局样式，包括边框的计算方式(box-sizing)，以及body的宽度、高度和其他基础样式。

.squirtle定义杰尼龟样式
1、.squirtle是杰尼龟的容器，设置了大小、位置及“弹跳”的动画效果。

.tail尾巴
1、定义尾巴的形状、颜色及动画效果，尾巴的两个伪元素(::before和::after)用于创建螺旋形状。

.body身体
1、定义杰尼龟的身体，包括身体的基本颜色和外形。

.stomach胃部和.shell壳
1、stomach(胃部)和shell(壳)部分用来进一步修饰杰尼龟的外观，使用伪元素增加视觉细节。

.head头部
1、定义头部的形状、颜色及动画效果。

.eye眼睛和.mouth嘴巴
1、眼睛和嘴巴部分通过伪元素进行额外修饰，eye和mouth分别定义杰尼龟的眼睛和嘴巴的样式。

.leg, .arm四肢
1、定义四肢的样式，包括前后肢的位置、大小和动画效果。

.bounce弹跳动画
1、控制整体弹跳的动画，bounce2用于头部和尾巴的微动效果。

.swing摆动动画
1、四肢的摆动动画，使得杰尼龟看起来像在行走或游泳。

总结
代码段通过HTML和CSS构建一个卡通风格的“杰尼龟”图形，并且添加一些基础的动画效果，让“杰尼龟”看起来活灵活现。这些动画通过CSS的@keyframes规则来定义，使得角色的各个部分都能够运动起来。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2044931.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

了解数据库中常用存储引擎数据结构（1）

了解数据库中常用存储引擎数据结构（1）

目录 引言 存储引擎和存储结构 两者的关系 存储结构 分类 1. 按数据组织方式分类 2. 按索引结构分类 3. 按存储介质分类 4. 按数据分布方式分类 5. 按数据冗余和备份分类 存储结构需要的特性 BTree 补充知识&#xff1a;Lock和Latch的区别&#xff08;存储引擎并发…
阅读更多...
干货分享|如何使用Stable Diffusion快速打造瞬息全宇宙?

干货分享|如何使用Stable Diffusion快速打造瞬息全宇宙?

Deforum也是一款文生视频插件&#xff0c;它把提示词跃迁和运镜结合到一起&#xff0c;生成的视频让人仿佛穿越不同时空&#xff0c;因此又被称作瞬息全宇宙。本节将介绍使用Deforum生成视频的方法。 在使用Deforum时&#xff0c;由于设置参数非常多&#xff0c;初次使用时很难…
阅读更多...
【C语言篇】编译和链接以及预处理介绍（下篇）

【C语言篇】编译和链接以及预处理介绍（下篇）

文章目录 前言#和###运算符##运算符 命名约定#undef命令⾏定义条件编译#if和#endif多个分支的条件编译判断是否被定义嵌套指令 头文件被包含头文件被包含的方式本地文件包含库文件的包含 嵌套文件包含 其他预处理指令 写在最后 前言 本篇接前一篇【C语言篇】编译和链接以及预处…
阅读更多...
fvm 管理多个 flutter 版本

fvm 管理多个 flutter 版本

前言&#xff1a; flutter SDK 版本更新还是比较快的&#xff0c;新的特性带来了新的体验&#xff0c;更新频繁也是好的事情。一方面说明 flutter 社区活跃&#xff0c;另一方面 说明 flutter 进化的脚本并没有停下。这样也会带来另一个问题&#xff0c;如果多个项目 使用了不…
阅读更多...
详解Python 66 个内置函数！附代码

详解Python 66 个内置函数！附代码

大家好&#xff0c;想掌握Python编程语言&#xff0c;从零基础的小白晋升为大神&#xff1f;没问题&#xff01;接下来我们将以轻松有趣的方式&#xff0c;逐一解锁Python的66个内置函数&#xff0c;每一步都将结合实际应用场景、函数功能解析及简洁代码演示&#xff0c;带你深…
阅读更多...
超全面！Midjourney用户手册中文版！详解模型、命令、参数与高级用法

超全面！Midjourney用户手册中文版！详解模型、命令、参数与高级用法

前言 引言 大家好&#xff0c;我是包大。 最近正在上手体验目前网上很火的 AI 绘画工具 Midjourney&#xff0c;在优设和 B 站上找了很多教程来看&#xff0c;现在基本可以上手用它生成很多好玩的图片了。 这里私心推荐一下优设网的 AI 绘画专题&#xff0c;专题里已经积累了…
阅读更多...
Docker详细讲解

Docker详细讲解

2013年发布至今&#xff0c; Docker一直广受瞩目&#xff0c;被认为可能会改变软件行业。 但是&#xff0c;许多人并不清楚 Docker 到底是什么&#xff0c;要解决什么问题&#xff0c;好处又在哪里&#xff1f;今天就来详细解释&#xff0c;帮助大家理解它&#xff0c;还带有简…
阅读更多...
【Linux操作系统】进程概念

【Linux操作系统】进程概念

目录 一、进程概念1.1 什么是进程 二、task_struct内容分类2.1 标识符2.2 进程状态2.2.1 进程排队2.2.2 关于进程状态的表述——运行、阻塞、挂起2.2.3 Linux中具体的进程状态2.2.4 孤儿进程 2.3 进程优先级 三、Linux的调度与切换3.1 进程切换3.2 进程调度 四、环境变量4.1 ma…
阅读更多...
产品文档全攻略：分类、价值及创建技巧

产品文档全攻略：分类、价值及创建技巧

作者 | Josh Fechter 产品文档是产品附带的资料。这些文档包含产品工作的详细信息、使用指南、免责声明以及与产品相关的其他重要详细信息。 产品文档是一个广义的术语&#xff0c;并不仅仅是为了供消费者使用。产品文档还包括供内部组织使用的产品或服务的信息。这些文档文件…
阅读更多...
KETTLE调用http传输中文参数的问题

KETTLE调用http传输中文参数的问题

场景&#xff1a;检查服务器异常&#xff08;hive&#xff09;服务&#xff0c;就通过http发送一条短信到手机上&#xff0c;内容类似&#xff1a;【通知】 S T A R T D A T E h i v e 服务检测异常 {START_DATE}_hive服务检测异常 STARTD​ATEh​ive服务检测异常{DB_ID}&#…
阅读更多...
我的点赞功能（完整分页查询步骤）和快速刷题开发

我的点赞功能（完整分页查询步骤）和快速刷题开发

文章目录 1.我的点赞分页展示1.分页查询工具类1.PageInfo.java 需要分页查询的就继承它&#xff0c;传值的时候pageNo和pageSize可以为空2.PageResult.java 根据条件从数据库中查询信息&#xff0c;然后设置这里的四个值即可得到分页查询结果 2.sun-club-application-controlle…
阅读更多...
记一次Nginx代理配置的奇怪经历

记一次Nginx代理配置的奇怪经历

目录 1 背景 2 需求 3 方案 4 问题 5 解决方案 6 最后记录 7 参考文献 1 背景 最近我们在做一个能源类智能化转型的项目&#xff0c;整个项目非常大&#xff0c;下面有很多的子项目组。不同项目组之间都是独立的子系统。 客户对技术上做了统一要求&#xff0c;使用统一的…
阅读更多...
SpringBoot 自动配置(Condition)

SpringBoot 自动配置(Condition)

一.Condition Condition 是在Spring 4.0 增加的条件判断功能&#xff0c;通过这个可以功能可以实现选择性的创建 Bean 操 作。 案例&#xff1a;需求1 在 Spring 的 IOC 容器中有一个 User 的 Bean&#xff0c;现要求&#xff1a; 1. 导入Jedis坐标后&#xff0c;加载该Bean…
阅读更多...
基于STM32开发的智能农业灌溉系统

基于STM32开发的智能农业灌溉系统

目录 引言环境准备工作 硬件准备软件安装与配置系统设计 系统架构硬件连接代码实现 初始化代码控制代码应用场景 农田自动化灌溉家庭园艺智能浇灌常见问题及解决方案 常见问题解决方案结论 1. 引言 智能农业灌溉系统通过集成多种传感器&#xff0c;实时监测土壤湿度、温度、…
阅读更多...
​【迅为电子】RK3568驱动指南｜第十七篇 串口-第196章 串口简介

​【迅为电子】RK3568驱动指南｜第十七篇 串口-第196章 串口简介

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…
阅读更多...
项目视图组(基于模型)Model-Based-Qt-思维导图-学习笔记

项目视图组(基于模型)Model-Based-Qt-思维导图-学习笔记

项目视图组(基于模型)Model-Based Model-Based &#xff08;1&#xff09;List View:清单视图 QListView 继承关系&#xff1a;继承自 QAbstractItemView&#xff0c;被 QListWidget 和 QUndoView 继承 功能&#xff1a;提供模型上的列表或图标视图&#xff0c;以非分层列表…
阅读更多...
通过连接数据库演示解耦过程

通过连接数据库演示解耦过程

一、什么是解耦&#xff1f; 解耦就是为了降低程序之间的耦合性&#xff0c;在软件工程中&#xff0c;对象之间的耦合度就是对象之间的关联度。程序之间耦合度越高&#xff0c;程序维护起来也就越困难&#xff0c;即程序维护成本高。所以我们需要通过现有方法降低耦合性&#x…
阅读更多...
oss学习问题记录

oss学习问题记录

1.在使用oss上传文档时&#xff0c;根据返回的地址访问上传的图片&#xff0c;会报错误如下&#xff1a;This XML file does not appear to have any style information associated with it. The document tree is shown below. 在设置了上传的文档类型和代码设置读写权限之后 …
阅读更多...
Redis的基本概念和使用

Redis的基本概念和使用

目录 一、Redis简介 1、NOSQL 2、NOSQL和关系型数据库比较 3、主流的NOSQL产品 4、什么是Redis 5、启动Redis 二、Redis基本操作 1、大概操作 三、 Redis 数据类型&#xff08;5种常用&#xff09; 1、redis 数据存储格式 2、String 3、hash 4、list 5、Set 6、…
阅读更多...
面试题-Spring Bean的生命周期

面试题-Spring Bean的生命周期

文章目录 Spring Bean 生命周期分为哪几个阶段浅析Bean生命周期源码实现1.1 DefaultListableBeanFactory1.2 createBean2.1 populateBean3.1 initializeBean3.2 invokeInitMethod3.3 applyBeanPostProcessorsBeforeInitialization5.1 destroyBean5.2 invokeDestroyMethod Sprin…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023