HTMLCSS: 实现可爱的冰墩墩

效果演示

HTML

 <div class="wrap"><div class="body"></div><div class="ear"></div><div class="ear rightEar"></div><div class="leftHand"></div><div class="rightHand"></div><div class="leftFoot"></div><div class="rightFoot"></div><div class="heart"></div><div class="greenFace"></div><div class="blueFace"></div><div class="pinkFace"></div><div class="yellowFace"></div><div class="blackFace"></div><div class="leftEye"></div><div class="rightEye"></div><div class="nose"></div><div class="mouth"></div><div class="chin"></div>
</div>

CSS

body,
html {margin: 0;padding: 0;transform: scale(0.65);
}body {width: 100vh;height: 100vh;background: linear-gradient(#adf, #ddd);
}.wrap {position: relative;margin-left: 279px;margin-top: 139px;height: 948px;width: 837px;
}.body {height: 100%;width: 100%;border: 16px solid #000;position: absolute;border-radius: 55% 55% 55% 55% / 50% 50% 60% 60%;top: 0;left: 0;background: #fff;z-index: 1;
}.ear {width: 250px;height: 334px;position: absolute;top: 0;left: 55px;border: 16px solid #000;border-radius: 50% 60% 60% 50% / 50% 50% 50% 50%;background: #000;z-index: 0;transform: rotate(-20deg);
}.rightEar {right: 55px;left: auto;transform: rotateY(180deg) rotate(-20deg);
}.leftHand {position: absolute;z-index: 0;width: 223px;height: 362px;border-radius: 50%;background: #000;top: 280px;left: -140px;transform: rotate(-15deg);
}.leftHand:after {position: absolute;top: 195px;content: '';width: 362px;height: 223px;background: #000;border-radius: 50%;transform: rotate(35deg);
}.rightHand {position: absolute;right: -210px;top: 470px;z-index: 0;height: 223px;width: 223px;border-radius: 50%;background: #000;
}.rightHand:after {position: absolute;top: -66px;left: -70px;background: #000;width: 220px;height: 223px;content: '';transform: rotate(-47deg);border-radius: 0 0 0 80%;
}.leftFoot {position: absolute;top: 840px;left: 80px;width: 250px;height: 250px;border-radius: 50%;background: #000;
}.leftFoot:after {position: absolute;z-index: 0;content: '';background: #000;height: 250px;width: 250px;left: 30px;top: -125px;transform: rotate(10deg);border-radius: 0% 50% 50% 0%;
}.rightFoot {background: #000;width: 250px;height: 250px;position: absolute;top: 840px;right: 80px;border-radius: 50%;
}.rightFoot:after {content: '';width: 250px;height: 250px;position: absolute;top: -125px;right: 28px;z-index: 0;background: #000;transform: rotate(-12deg);border-radius: 0% 0% 0% 50%;
}.heart {width: 140px;height: 140px;position: absolute;top: 350px;left: -90px;z-index: 2;
}.heart:before,
.heart:after {content: '';position: absolute;top: 0;width: 33px;height: 55px;background: red;border-radius: 55px 55px 0% 0%;
}.heart:after {transform: rotate(45deg);right: 90px;
}.heart:before {transform: rotate(-45deg);left: 0;
}.greenFace {width: 661px;height: 517px;border: 10px solid #6cf078;border-radius: 60% 60% 50% 50% /70% 70% 50% 50%;position: absolute;top: 95px;left: 83px;z-index: 1;
}.blueFace {width: 642px;height: 501px;border: 10px solid yellow;border-radius: 60% 60% 50% 50% /70% 70% 50% 50%;position: absolute;top: 103px;left: 92px;z-index: 1;
}.pinkFace {width: 619px;height: 480px;border: 10px solid red;border-radius: 60% 60% 50% 50% /70% 70% 50% 50%;position: absolute;top: 113px;left: 104px;z-index: 1;
}.yellowFace {width: 591px;height: 451px;border: 13px solid #335fe6;border-radius: 60% 60% 50% 50% /70% 70% 50% 50%;position: absolute;top: 125px;left: 115px;z-index: 1;
}.blackFace {width: 567px;height: 422px;border: 13px solid #000;border-radius: 60% 60% 50% 50% /70% 70% 50% 50%;position: absolute;top: 137px;left: 126px;z-index: 1;
}.leftEye {width: 168px;height: 222px;background: #000;border-radius: 50%;z-index: 2;transform: rotate(45deg);position: absolute;top: 222px;left: 180px;
}.rightEye {width: 168px;height: 222px;background: #000;border-radius: 50%;z-index: 2;transform: rotate(-45deg);position: absolute;top: 222px;right: 180px;
}.rightEye:after,
.leftEye:after {position: absolute;width: 84px;height: 84px;border: 8px solid #fff;border-radius: 50%;content: '';top: 28px;left: 35px;
}.rightEye:after {left: auto;right: 35px;
}.rightEye:before,
.leftEye:before {position: absolute;top: 64px;left: 64px;background: #fff;border-radius: 50%;content: '';width: 28px;height: 28px;
}.rightEye:before {left: 70px;top: 56px;
}.nose {width: 84px;height: 84px;background: #000;position: absolute;left: 50%;margin-left: -42px;top: 350px;z-index: 1;border-radius: 30%;transform: rotate(50deg) skewY(-10deg);
}.nose:after {content: '';width: 103px;height: 108px;border-radius: 50%;border-top: 28px solid #fff;position: absolute;top: -17px;left: 0px;transform: rotate(-45deg) skewY(0deg);
}.mouth {width: 265px;height: 120px;border: 14px solid #000;position: absolute;top: 400px;left: 50%;z-index: 1;margin-left: -140px;border-radius: 0% 0% 50% 50% / 0% 0% 100% 100%;border-top: none;
}.mouth:after,
.mouth:before {content: '';position: absolute;width: 140px;height: 140px;background: #fff;top: -30px;transform: rotate(45deg);
}.mouth:after {left: -60px;
}.mouth:before {right: -60px;
}.belly {width: 150px;height: 150px;position: absolute;top: 72%;left: 45%;margin-left: -25px;z-index: 1;
}.belly img {width: 150px;height: 150px;
}

js

(() => {"use strict";const module = {138: (exports, module) => {class Snowflake {constructor(options = {}) {this.isRain = options.isRain || false;this.el = null;this.dir = options.dir || "r";this.width = 0;this.maxWidth = options.maxWidth || 80;this.minWidth = options.minWidth || 2;this.opacity = 0;this.x = 0;this.y = 0;this.z = 0;this.sx = 0;this.isSwing = false;this.stepSx = 0.02;this.swingRadian = 1;this.swingStep = 0.01;this.sy = 0;this.maxSpeed = options.maxSpeed || 4;this.minSpeed = options.minSpeed || 1;this.quickMaxSpeed = options.quickMaxSpeed || 10;this.quickMinSpeed = options.quickMinSpeed || 8;this.quickWidth = options.quickWidth || 80;this.quickOpacity = options.quickOpacity || 0.2;this.windowWidth = window.innerWidth;this.windowHeight = window.innerHeight;this.init();}init(initOptions) {let isQuick = Math.random() > 0.8;this.isSwing = Math.random() > 0.8;this.width = isQuick ? this.quickWidth : Math.floor(Math.random() * this.maxWidth + this.minWidth);this.opacity = isQuick ? this.quickOpacity : Math.random();this.x = Math.floor(Math.random() * (this.windowWidth - this.width));this.y = Math.floor(Math.random() * (this.windowHeight - this.width));if (initOptions && Math.random() > 0.8) {this.x = -this.width;} else if (initOptions) {this.y = -this.width;}this.sy = isQuick ? Math.random() * this.quickMaxSpeed + this.quickMinSpeed : Math.random() * this.maxSpeed + this.minSpeed;this.sx = "r" === this.dir ? this.sy : -this.sy;this.z = isQuick ? 300 * Math.random() + 200 : 0;this.swingStep = 0.01 * Math.random();this.swingRadian = Math.random() * (1.1 - 0.9) + 0.9;}setStyle() {this.el.style.cssText = `position: fixed;left: 0;top: 0;display: block;width: ${this.isRain ? 1 : this.width}px;height: ${this.width}px;opacity: ${this.opacity};background-image: radial-gradient(#fff 0%, rgba(255, 255, 255, 0) 60%);border-radius: 50%;z-index: 9999999999999;pointer-events: none;transform: translate(${this.x}px, ${this.y}px) ${this.getRotate(this.sy, this.sx)};`;}render() {this.el = document.createElement("div");this.setStyle();document.body.appendChild(this.el);}move() {if (this.isSwing) {if (this.swingRadian > 1.1 || this.swingRadian < 0.9) {this.swingStep = -this.swingStep;}this.swingRadian += this.swingStep;this.isRain ? this.x += this.sx : this.x += this.sx * Math.sin(this.swingRadian * Math.PI);this.y -= this.sy * Math.cos(this.swingRadian * Math.PI);} else {this.x += this.sx;this.y += this.sy;}if (this.x < -this.width || this.x > this.windowWidth || this.y > this.windowHeight) {this.init(true);this.setStyle();}this.el.style.transform = `translate3d(${this.x}px, ${this.y}px, ${this.z}px) ${this.getRotate(this.sy, this.sx)}`;}getRotate(sy, sx) {return this.isRain ? `rotate(${0 === sx ? 0 : 90 + Math.atan(sy / sx) * (180 / Math.PI)}deg)` : "";}}class Snowfall {constructor(options = {}) {this.num = options.num || 100;this.opt = options;this.snowList = [];this.createSnows();this.moveSnow();}createSnows() {this.snowList = [];for (let i = 0; i < this.num; i++) {let snowflake = new Snowflake(this.opt);snowflake.render();this.snowList.push(snowflake);}}moveSnow() {window.requestAnimationFrame(() => {this.snowList.forEach(snowflake => {snowflake.move();});this.moveSnow();});}}new Snowfall({isRain: true,num: 300,maxSpeed: 15});new Snowfall({isRain: false,num: 150});}};function extend(target, source) {for (let key in source) {if (source.hasOwnProperty(key) && !target.hasOwnProperty(key)) {target[key] = source[key];}}return target;}module[138].exports = module[138]({}, module[138]);
})();

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【电力系统】永磁同步电机调速系统带有扰动观测器

【电力系统】永磁同步电机调速系统带有扰动观测器( DOB)的最优滑模控制、改进补偿滑模控制、传统滑模、PID控制研究 摘要 本文研究了永磁同步电机&#xff08;PMSM&#xff09;调速系统中的不同控制策略&#xff0c;包括最优滑模控制、改进补偿滑模控制、传统滑模控制以及PID控…

TVM计算图分割--分割方式

文章目录 TVM中的计算图分割方式1. Partition Pass2. dataflow_pattern3. 内置图分割接口4. Pipeline Executor5. BYOC框架6. Collage7. UMA深度学习模型通常是用计算图来表示的。计算图是一种有向无环图,其中节点代表算子,表示一个操作,节点之间的边表示算子之间的数据依赖…

如何使用IDEA创建Maven/SSM工程?

鉴于很多学校还在教授SSMJSP&#xff0c;很多同学不会使用IDEA创建Maven工程&#xff0c;这里进行说明 windows下安装jdk并配置环境 添加链接描述Windows下安装Maven并配置环境 首先你要本地安装jdk&#xff0c;Maven并配置基础环境变量&#xff0c;然后对IDEA进行jdk、Mave…

大数据新视界 -- 大数据大厂之 Impala 性能优化:优化数据加载的实战技巧(下)(16/30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

从0开始机器学习--Day23--支持向量机

经过前面的学习&#xff0c;我们已经知道在解决问题时&#xff0c;重要的不仅仅是要在算法A或算法B中选择更优的&#xff0c;而是考虑怎么选择用于学习算法的特征和正则化参数&#xff0c;相比神经网络和逻辑回归&#xff0c;支持向量机在这两个方面做得更好。 优化目标(Optimi…

macOS 设置固定IP

文章目录 以太网Wifi![请添加图片描述](https://i-blog.csdnimg.cn/direct/65546e966cae4b2fa93ec9f0f87009d8.png) 基于 macOS 15.1 以太网 Wifi

Pandas | 数据分析时将特定列转换为数字类型 float64 或 int64的方法

类型转换 传统方法astype使用value_counts统计通过apply替换并使用astype转换 pd.to_numericx对连续变量进行转化⭐参数&#xff1a;返回值&#xff1a;示例代码&#xff1a; isnull不会检查空字符串 数据准备 有一组数据信息如下&#xff0c;其中主要将TotalCharges、MonthlyC…

HarmonyOS Next 实战卡片开发 02

HarmonyOS Next 实战卡片开发 02 卡片开发中&#xff0c;还有一个难点是显示图片。其中分为显示本地图片和显示网络图片 显示本地图片 卡片可以显示本地图片&#xff0c;如存放在应用临时目录下的图片。路径比如 /data/app/el2/100/base/你的项目boundleName/temp/123.png 以…

双十一云服务器抢购后,用SD-WAN连通多云网络

双十一个个云厂商都有一定的优惠&#xff0c;我在阿里云和腾讯云都购买了服务器&#xff0c;原本主要是使用的阿里云&#xff0c;一堆乱七八糟的东西都是部署在阿里云的&#xff0c;现在买了一台腾讯云之后就在思考一个问题&#xff0c;怎么在腾讯云使用阿里云原本部署的服务。…

从0开始学docker (每日更新 24-11-7)

docker网络基础 docker容器网络模型 容器网络项目libnetwork&#xff1a;docker网络架构基于一套称为容器网络模型&#xff08;CNM&#xff09;的接口 CNM高层架构 包括&#xff1a; 沙箱&#xff08;Sandbox&#xff09;&#xff1a;又称沙盒&#xff0c;包含容器的网络栈…

Linux学习笔记之组管理和权限管理

组管理 文件/目录 所有者 一般文件所有者是文件的创建者&#xff0c;谁创建了该文件&#xff0c;就自然成为该文件的所有者 ls -ahl &#xff08;查看文件的所有者&#xff09; chown 用户名 文件名 &#xff08;修改文件所有者&#xff09; 文件/目录 所在组 当某个用户…

MySQL 中的索引下推功能

看到索引&#xff0c;应该大家都可以联想到这个是和查询效率有关系的&#xff0c;既然有这个功能&#xff0c;那么那句古话说的好啊&#xff1a;存在即合理。那么这个就是说有了这个功能&#xff0c;可以提升查询效率。 什么是索引下推 我们先有一个大概的理解&#xff1a;在…

CSP/信奥赛C++语法基础刷题训练(1):洛谷P5715 :三位数排序

CSP/信奥赛C语法基础刷题训练&#xff08;1&#xff09;&#xff1a;洛谷P5715 &#xff1a;三位数排序 题目描述 给出三个整数 a , b , c ( 0 ≤ a , b , c ≤ 100 ) a,b,c(0\le a,b,c \le 100) a,b,c(0≤a,b,c≤100)&#xff0c;要求把这三位整数从小到大排序。 输入格式 …

准确--FastDFS快速单节点部署

FastDFS单节点部署 1. 系统准备 # 查看操作系统信息&#xff08;适用于麒麟V10&#xff09; cat /etc/os-release# 安装必要的软件包 yum -y install gcc gcc-c perl zlib-devel unzip2. 准备 FastDFS 环境 cd /usr/local/fastdfs# 下载必要包&#xff08;若有访问限制&…

国标GB28181视频平台EasyCVR私有化部署视频平台对接监控录像机NVR时,录像机“资源不足”是什么原因?

EasyCVR视频融合云平台&#xff0c;是TSINGSEE青犀视频“云边端”架构体系中的“云平台”系列之一&#xff0c;是一款针对大中型项目设计的跨区域、网络化、视频监控综合管理系统平台&#xff0c;通过接入视频监控设备及视频平台&#xff0c;实现视频数据的集中汇聚、融合管理、…

【智谱开放平台-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…

计算机新手练级攻略——如何搜索问题

目录 计算机学生新手练级攻略——如何搜索问题1.明确搜索意图2.使用精确关键词3.使用专业引擎搜索4.利用好技术社区1. Stack Overflow2. GitHub3. IEEE Xplore4. DBLP 5.使用代码搜索工具1. GitHub 代码搜索2. Stack Overflow 代码搜索3. Papers with Code4. IEEE Xplore 6.查阅…

【C++】详细介绍模版进阶,细节满满

目录 一、非类型模版参数&#xff1a; 1、介绍&#xff1a; 2、使用&#xff1a; 3、注意&#xff1a; 4、应用 二、模版特化 &#xff08;一&#xff09;、概念 &#xff08;二&#xff09;、函数模版特化 1、步骤&#xff1a; 2、举例&#xff1a; 3、不建议使用函…

动态规划---解决多段图问题

ok 小伙伴们&#xff0c;我现在有点小小的红温&#xff0c;有点毛躁。 怎么解决多段图问题呢&#xff1f;求取最短路径有多种方法可取。 家人们&#xff0c;毫无思绪可言……………………………… 要实现动态规划&#xff0c;条件&#xff1a;子问题重叠度较高&#xff0c;并…

JMeter基础篇

目录 总目录&#xff1a; 一、JMeter简介&#xff1a; -用途&#xff1a; -优缺点&#xff1a; 二、JMeter安装&#xff1a; 三、项目简介&#xff1a; -学生管理系统&#xff1a; -API接口清单&#xff1a; 查询&#xff1a; 新增&#xff1a; 更新&#xff1a; 删…