html--3D爱心

文章目录

  • 代码
  • 效果

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>爱心</title><style type="text/css">*{margin: 0px;border: 0px;}body{overflow: hidden;background-color: #000000;}.container{position: relative;left: 0;top: 0;bottom: 0;right: 0;margin: auto;height: 260px;width: 200px;transform-origin: 50% 130%;transform-style: preserve-3d;animation: 8s rotate linear infinite;}@keyframes rotate{from{transform:rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}}.square{position: relative;width: 100px;height: 100px;transform:translateX(50px) translateY(300px) translateZ(50px);transform-style: preserve-3d;}.square div{position: absolute;top: 0;left: 0;width: 100px;height: 100px;}.square div:nth-child(1){top: 100px;transform-origin: top;transform:rotateX(-90deg);}.square div:nth-child(2){left: 100px;transform-origin: left;transform:rotateY(90deg);}.square div:nth-child(3){left: -100px;transform-origin: right;transform:rotateY(-90deg);}.square div:nth-child(4){top: -100px;transform-origin: bottom;transform:rotateX(90deg);}.square div:nth-child(6){top:0;transform:translateZ(-100px);}.square div:nth-child(5){}.heart{position: absolute;top:0;left:0;height: 260px;width: 200px;border: 2px solid red;margin: 200px auto;border-radius: 50% 50% 0%/50% 50% 0%;border-bottom: 0;border-left: 0;}img{width: 100px;height:100px;}</style>
</head>
<body><div class="container"><div class="square"><div><img src="images/1.jpg"></div><div><img src="images/2.jpg"></div><div><img src="images/3.jpg"></div><div><img src="images/4.jpg"></div><div><img src="images/5.jpg"></div><div><img src="images/6.jpg"></div></div></div><script  type="text/javascript">var container = document.getElementsByClassName("container")[0];for (var i = 0;i < 36;i++) {var heart = document.createElement("div");heart.className = "heart";heart.style.transform = "rotateY("+i*10+"deg) rotateZ(45deg) translateX(30px)";container.appendChild(heart);}</script>
</body>
</html>

PS:代码中定义图片的命名
在这里插入图片描述
所以需要创建文件夹images,将所要的图片放到里面
在这里插入图片描述
在这里插入图片描述

效果

在这里插入图片描述

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

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

相关文章

Docker-部署若依项目

文章目录 后端一、搭建局域网二、redis安装测试 三、MySQL安装四、后端项目放入位置及使用Dockerfile自定义镜像后端项目放入位置 前端配置检查各个端口是否启动nginx部署 首先得先把内部的文件给删除清空 docker images–查看有哪些文件 docker rmi -f ID–删除ID 后端 一、…

腾讯QQ推出AI聊天搭子;零一万物01AI宣布开源Yi-9B模型

&#x1f989; AI新闻 &#x1f680; 腾讯QQ推出AI聊天搭子&#xff0c;进军AI对话领域 摘要&#xff1a;腾讯QQ合作筑梦岛和混元助手&#xff0c;推出了AI对话功能“AI聊天搭子”&#xff0c;提供多种虚拟角色与用户实时互动&#xff0c;目前已开启测试。此外&#xff0c;抖…

STM32/GD32——I2C通信协议

芯片选型 Ciga Device — GD32F470系列 通讯规则 I2C协议&#xff08;或称IIC&#xff09;是由飞利浦&#xff08;现在的恩智浦半导体&#xff09;公司开发的一种通用的总线协议。它使用两根线&#xff08;时钟线和数据线&#xff09;来传输数据&#xff0c;支持多个设备共享…

智能设备 app 设计 —— 蓝蓝 UI 设计公司

今天给大家推荐是智能设备app设计&#xff0c;随着智能设备的逐渐普及随之操作app也越来越多&#xff0c;希望能给大家带来灵感 #日常灵感 #创意设计#UI提升#ui设计#app #设计案例分享|#设计 #产品设计#产品设计#设计灵感 #B端产品经理 #ui #产品 #美工 #交互 #产品经理 #开发 …

乐优商城(九)数据同步

1. 项目问题分析 现在项目中有三个独立的微服务&#xff1a; 商品微服务&#xff1a;原始数据保存在 MySQL 中&#xff0c;从 MySQL 中增删改查商品数据。搜索微服务&#xff1a;原始数据保存在 ES 的索引库中&#xff0c;从 ES 中查询商品数据。商品详情微服务&#xff1a;做…

python75-Python的函数参数,关键字(keyword)参数

在定义Python函数时可定义形参(形式参数的意思)这些形参的值要等到调用时才能确定下来,由函数的调用者负责为形参传入参数值。简单来说,就是谁调用函数,谁负责传入参数值。 关键字(keyword)参数 Python函数的参数名不是无意义的,Python 允许在调用函数时通过名字来传入参…

mysql 查看数据库、表的命令

查看所有的数据库 1.show databases; 2.select schema_name from information_schema.schemata\G \G 。以纵向报表的形式显示结果&#xff0c;方便查看。 查看mysql数据库的运行状态 status 选择数据库 use 库名 例 use TestDb 查看数据库中的表 show tables 查看表结构 de…

怎么在图片上直接编辑文字?3个方法教你轻松编辑

怎么在图片上直接编辑文字&#xff1f;随着技术的飞速发展&#xff0c;图片编辑已经成为我们日常生活和工作中不可或缺的一部分。在图片上直接编辑文字&#xff0c;不仅能够添加说明和标注&#xff0c;提高信息的传达效率&#xff0c;还能够增强图片的美观和设计感&#xff0c;…

qt练习案例

记录一下qt练习案例&#xff0c;方便学习qt知识点 基本部件 案例1 需求&#xff0c;做一个标签&#xff0c;显示"你好"知识点&#xff0c;QLabel画面 4. 参考&#xff0c;Qt 之 QLabel 案例2 需求&#xff0c;做一个标签&#xff0c;显示图片 知识点&#xff0c;…

在Linux/Ubuntu/Debian中用fdisk分区mkfs格式化

fdisk 是一个命令行实用程序&#xff0c;用于在类 Unix 操作系统&#xff08;包括 Linux&#xff09;中对磁盘进行分区。 如果你想使用“fdisk”格式化 USB 驱动器&#xff0c;通常会先对驱动器进行分区&#xff0c;然后使用特定的文件系统格式化分区。 以下是有关如何在 Linu…

c++初阶------类和对象(六大默认构造函数的揭破)

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…

1.JavaWebJava基础加强[万字长文]-Junit、反射、注解核心知识点梳理

导语&#xff1a; 一、Junit单元测试 1.Junit测试概述 2.Junit使用步骤 3.Junit_Before&After 二、反射 1.反射概述 2.反射获取字节码Class对象的三种方式 3.Class对象功能概述 4.Class对象功能_获取Field 5.Class对象功能_获取Constructor 6.Class对象功能_获取…

20个实操保姆级副业项目

这边免费给到大家很多项目资料和工具&#xff0c;主要的就是为了消除信息壁垒&#xff0c;在互联网创业或兼职的路上不再被割&#xff0c;不再多花冤枉钱&#xff0c;相信人间有真爱&#xff0c;有不懂的问题可咨询博主&#xff01;为了帮助到更多的创业者&#xff0c;资料欢迎…

极狐GitLab 16.3 重磅发布,极致的 DevOps 体验等你来【一】

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 极狐GitLab 在去年 8 月份发布了 16.3 版本。此次发布带来了合…

ElasticSearch为什么快?

ElasticSearch是一个高性能&#xff0c;分布式搜索引擎&#xff0c;它之所以快&#xff0c;主要有以下几个原因&#xff1a; 1.分布式存储&#xff1a;ElasticSearch使用分布式存储技术&#xff0c;将数据存储在多个节点上从而减少单个节点的压力&#xff0c;提高整体性能。 …

Kakarot:当今以太坊的未来

1. 引言 前序博客&#xff1a; Kakarot&#xff1a;部署在Starknet上的ZK-EVM type 3 随着 Kakarot zkEVM 即将发布测试网&#xff0c;想重申下 Kakarot zkEVM 的愿景为&#xff1a; 为什么在rollup空间中还需要另一个 zkEVM&#xff1f; 开源代码见&#xff1a; https:/…

Anaconda prompt运行打开jupyter notebook 指令出错

一、打不开jupyter notebook网页 报错如下&#xff1a; Traceback (most recent call last): File “D:\anaconda3\lib\site-packages\notebook\traittypes.py”, line 235, in _resolve_classes klass self._resolve_string(klass) File “C:\Users\DELL\AppData\Roaming\Py…

oracle数据库通过sql实现blob类型字段转字符串

最近遇到一个问题&#xff0c;数据表tabA中有一个字段content是blob类型。现在需要通过sql把这个字段的内容展示出来。一般情况我们都是通过后端实现blob转string。但是通过sql查询出blob类型的内容还没遇到过&#xff0c;今天把解决这个问题的心理路程记录下。 首先&#xff0…

软考 系统分析师系列知识点之系统性能评估(3)

接前一篇文章&#xff1a;软考 系统分析师系列知识点之系统性能评估&#xff08;2&#xff09; 所属章节&#xff1a; 第6章. 系统配置与性能评价 第8节. 系统性能评估 6.8.2 经典评估方法 在计算机技术的发展过程中&#xff0c;性能评估的常用方法有&#xff1a;时钟频率法、…

vue3项目绝对路径重命名后vscode无法提示路径,无法进行文件跳转

vue3项目绝对路径重命名后vscode无法提示路径 设置如下: //vite.config.js resolve: {// 绝对路径重命名 @/xxxx => src/xxxxalias: {"@": path.resolve(__dirname, "src"),