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

置顶 于 2024-08-15 23:57:18 发布
阅读量3.1k 收藏 9
点赞数 9
分类专栏： web前端 html css 文章标签： web 前端 web前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51157081/article/details/121702964
版权
web前端 同时被 3 个专栏收录
331 篇文章 5 订阅
订阅专栏
css
87 篇文章 0 订阅
订阅专栏
html
73 篇文章 1 订阅
订阅专栏

MENU

前言

代码段使用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规则来定义，使得角色的各个部分都能够运动起来。

智码帮MJ682517
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Promise 对象的处理
yizhizhazhahui的博客
03-31 1263
Promise 对象的处理
VUE 如何获取Promise对象中的PromiseResult中的数据
TTong_190502的博客
08-15 1万+
VUE 项目中 如何获取Promise对象中的PromiseResult中的数据，async/awiat方法来获取Promise对象中的值
javascript promise 抛出错误时的陷阱
qq_21522331的博客
09-08 826
// Throwing an error will call the catch method most of the time var p1 = new Promise(function(resolve, reject) { throw new Error('Uh-oh!'); }); p1.catch(function(e) { console.error(e); // "Uh-oh!" }); // Errors thrown inside asynchronous functions w
Promise中的return的理解与补充
一缕阳光@的博客
07-28 4420
通过async/await去操作得到的对Promise象,也就是说，要想获取到Promise.then的返回值，就必须利用await获取，要想使用await，就必须在函数前面加上async。是Promise对象resolved的语法糖这也就是最终awaitPromise对象是返回的值的原因（这点可以深入看一下ES6的Promise）。由此肯定then中的return的结果是接下来链式写法then中的resolved参数，让我们看下官方文档如何描述。打印结果如下，问题解决。...
关于函数返回promise对象的写法
qq_44824824的博客
03-18 579
/ 将结果传递给 resolve。// 将错误信息传递给 reject。console.log("获取时间");// 请求成功时的处理。// 请求失败时的处理。
毕设&课程作业_树莓派智能小车web控制系统。by：小杰.zip
02-15
by：小杰.zip" 这个标题表明这是一个与毕业设计或课程作业相关的项目，使用了树莓派作为硬件平台，构建了一个智能小车的Web控制系统。"by：小杰" 提示我们这是由一位名叫小杰的作者完成的。 【描述解析】 "计算机类...
Raspberry_car:树莓派智能小车web控制系统。by：小杰
05-17
树莓派智能小车控制系统简介基于Tornado框架开发简洁树莓派智能小车web控制系统，实现手动控制方向，自动驾驶，试试摄像头监控，超声波测距，红外感应，自动寻迹，等汽车功能启动 python server.py使用说明...........
毕业设计&课设-树莓派智能小车web控制系统。by：小杰.zip
最新发布
06-24
3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计，...
辛客小杰导航网源码
11-05
总的来说，【辛客小杰导航网源码】是一个实践Web开发技术的实例，对于学习网页设计和开发的人来说，是一个很好的学习资料。通过研究源码，可以学习到前端页面构建、交互实现、用户体验设计，以及服务器端编程等多...
【毕业设计之python系列】基于Flask的在线音乐网设计与实现
06-13
总之，基于Flask的在线音乐网站设计与实现涵盖了Web开发的多个方面，包括前端交互、后端逻辑、数据库管理、推荐系统、社区功能以及安全策略。通过这个项目，开发者不仅可以深入理解Flask框架，还能掌握完整的Web应用...
vue 函数（三）：Promise函数
w_t_y_y的博客
09-13 8741
一、介绍： 通过打印可以看出Promise是一个构造函数，有all、reject、resolve、then、catch等方法。这样用Promise new出来的对象肯定就有then、catch等方法。 二、用法： created() { var p = new Promise(function (resolve, reject) { //做一些异步操作 setTimeout(function () { console.log('Promise执行.
Promise错误处理
wwwanglong123的博客
02-27 3043
1. then()方法 then是Promise构造函数的实例方法。第一个参数是成功状态的回调函数，第二个参数是失败状态的回调函数。 new Promise((resolve, reject) => { reject('error') }).then(data => { console.log(data) }, error => { console.log(error) // error }) 2. catch()方法 catch是Promise构造函数的实例方法。实际上是
Javascript实现promise
weixin_30929195的博客
03-02 77
1 // 三种状态 2 const PENDING = "pending"; 3 const RESOLVED = "resolved"; 4 const REJECTED = "rejected"; 5 // promise 接收一个函数参数，该函数会立即执行 6 function MyPromise(fn) { 7 let _this = thi...
JavaScript如何解决返回[object Promise]
weixin_42576804的博客
02-16 9167
当使用JavaScript中的Promise时，当您尝试访问Promise的值时，您可能会看到返回值为[object Promise]的情况。这是因为Promise是一种异步操作，它不能立即返回结果，而是需要等待操作完成后返回结果。 要访问Promise的值，您需要使用Promise的then()方法，该方法接受一个回调函数作为参数，该回调函数在Promise被解析(resolved)时被调用。例...
promise不会被return触发， 一个promise对象中不会被Promise.reject触发
dglf54292的博客
09-19 1657
1. let a = new Promise((resolve,reject)=>{ 　　return 23 }) a; // promise <pending> 2. let a = new Promise((resolve,reject)=>{ 　　Promise.reject(234) }) a; // promise <...
promise解决回调函数噩梦以及封装异步操作
weixin_44649210的博客
09-15 660
存在由来 回调函数噩梦(恐怖回调)，也被称为恶魔金字塔，指如ajax依赖调用时，回调函数会层层嵌套，而这种层层嵌套的写法，往往会让人难以理解，所以称之为噩梦。 例如：服务器中有3个txt文件，我们需要在html上，通过js中的异步的ajax，分别获取这3个文件的内容，假设这3个文件分别存储的数据为1、2、3，那么我希望在js中，能够求出1+2+3，把6输出。 解决此类问题，首先想到的就是回调嵌套 var str = ""; $.ajax({ type: "get",
promise 统一异常处理情况
weixin_36852235的博客
04-09 2175
前段时间看了微信小程序的借书系统，看到了这种处理方法。嗯，想着以后也可以在项目中这样实施了。
Promise & async/await 相关问题
weixin_44761091的博客
03-17 941
系列文章目录 你能实现一个符合 Promises/A+ 规范的Promise吗？Yes, I promise… 文章目录系列文章目录一、ES7中为什么要提出async/await标准二、promise中链式写法需要注意的问题1.链式写法的错误处理2.Promise链式中间想返回自定义的值3.如何跳出或停止Promise链式三、async/await1.基于Promise的async/await2.async的本质3.await的本质与例子4.async/await错误处理5. async/await的中断（
await把Promise解析为普通对象，async函数return的返回值是promise对象，await后转化为普通Object
热门推荐
weixin_44434938的博客
04-21 1万+
怎么实现axios的then执行完再执行后续程序,并return返回的值 文章目录前言总结 前言 await 会等到promise的then执行完之后，再执行后续程序 async function aa(){ let resData; await axios.post(url,data).then(res=>{ resData = res; }) return resData } 总结 踩坑路漫漫长@~@ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值