0
0

前端练手3D爱心

文章目录

盒子模型常用属性（认识）

overflow: hidden;定义盒子不随浮动
margin-left: 50px:使盒子距离外边距左(右上下)50px
margin: 100px auto:使盒子距离外边距上下左右100px
margin: 使盒子距离外边距上右下左为50px 0 0 50px;
margin: 20px 30px:使盒子距离外边距上下20px,左右30px
margin: 10px:使盒子距离外边距上下左右都是10px
border: 5px solid red:定义盒子边框(5px 单实线 红色) {dotted点double双实线}
border-radius: 50px:使盒子边角变圆
border-radius: 50%（1-8个值，顺时针）:使盒子变圆
border-top-left-radius: 50%:使盒子左上角变圆
display: inline-block:将块级元素div盒子等放到一行

效果一 爱心半边

  1. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>爱心半圆</title><style type="text/css">
  2.         * {
  3.             margin: 0;
  4.             padding: 0;}
  5.         div {
  6.             /*宽*/
  7.             width: 100px;
  8.             /*高*/
  9.             height: 170px;
  10.             /*边款颜色*/
  11.             border: 2px solid red;
  12.             /*盒子居中*/
  13.             margin: 100px auto;
  14.             /*盒子变圆：border-radius: 50%; */
  15.             /*border-radius: 左上角 中间线  右上角;*/
  16.             border-radius: 50% 50% 0/40% 50% 0;
  17.             /* border-radius: 50%; */
  18.             /* 去掉下面多余的线 */
  19.             border-left: 0;
  20.             border-bottom: 0;
  21.             /* y坐标45°倾斜左边 */
  22.             transform: rotateZ(45deg);}</style></head><body><div></div></body></html>

效果：
在这里插入图片描述

效果二 爱心整合生成

js将半爱心旋转一周生成爱心

  1. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>整合一个爱心</title><style type="text/css">
  2.         /* 清空值 */
  3.         
  4.         * {
  5.             margin: 0;
  6.             padding: 0;}
  7.         /* 背景修改为黑色 */
  8.         
  9.         body {
  10.             background: #000;}
  11.         /*  引用div内的love3d元素*/
  12.         
  13.         .love3d {
  14.             position: relative;
  15.             width: 100px;
  16.             height: 170px;
  17.             margin: 100px auto;}
  18.         /* 引用script内的heart */
  19.         
  20.         .heart {
  21.             /* 相对于love3d 定位 */
  22.             position: absolute;
  23.             /* 定位坐标 36个半爱心的位置 0会重叠为一个半圆 */
  24.             left: 0;
  25.             top: 0;
  26.             width: 100px;
  27.             height: 170px;
  28.             border: 2px solid red;
  29.             border-radius: 50% 50% 0/40% 50% 0;
  30.             border-left: 0;
  31.             border-bottom: 0;}</style></head><body><!-- div类名love3d --><div class="love3d"></div><script type="text/javascript">
  32.         //在document文档下通过ClassName获取Elements元素
  33.         //类数组长度为1
  34.         var love3d = document.getElementsByClassName("love3d")[0];for(var i =0; i <36; i++){
  35.             // 创建一个元素
  36.             var tDiv = document.createElement("div");
  37.             //对象类名
  38.             tDiv.className ="heart";
  39.             //将所有半圆整体Y旋转10°，Z旋转45°，x坐标设置35像素大小
  40.             tDiv.style.transform ="rotateY(" + i * 10 + "deg) rotateZ(45deg) translateX(35px)";
  41.             // love3d元素内添加tDiv
  42.             love3d.appendChild(tDiv);}</script></body></html>

效果：
在这里插入图片描述

效果三 实现立方体爱心

  1. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>立方体旋转</title><style type="text/css">
  2.         /* 立体效果设置 */
  3.         
  4.         body {
  5.             perspective: 1000px;}#cube {
  6.             position: relative;
  7.             width: 200px;
  8.             height: 200px;
  9.             margin: 300px auto;
  10.             /* z方向的百分之五十为101 */
  11.             transform-origin: 50% 50% -101%;
  12.             /* 盒子修改为3d空间 */
  13.             transform-style: preserve-3d;
  14.             /* 鼠标移动2秒的过渡 */
  15.             transition: 2s;}#cube div {
  16.             position: absolute;
  17.             left: 0;
  18.             top: 0;
  19.             width: 200px;
  20.             height: 200px;
  21.             border: 2px solid red;}
  22.         /* 对于下面的div标签 */
  23.         
  24.         #cube div:nth-child(1) {
  25.             /* 上 */
  26.             top: -202px;
  27.             /* 旋转基地 xyz方向 */
  28.             /*默认值 transform-origin: 50% 50% 0; */
  29.             transform-origin: bottom;
  30.             /* 围绕x坐标 */
  31.             transform: rotateX(90deg);}#cube div:nth-child(2) {
  32.             top: 202px;
  33.             /* 下 */
  34.             /* 围绕 上边对称 旋转-90° */
  35.             transform-origin: top;
  36.             transform: rotateX(-90deg);}#cube div:nth-child(3) {
  37.             left: -202px;
  38.             /* 左 */
  39.             /* 围绕y坐标 */
  40.             transform-origin: right;
  41.             transform: rotateY(-90deg);}#cube div:nth-child(4) {
  42.             left: 202px;
  43.             /* 右 */
  44.             transform-origin: left;
  45.             transform: rotateY(90deg);}#cube div:nth-child(5) {
  46.             top: 0px;
  47.             /* 前 */
  48.         }#cube div:nth-child(6) {
  49.             top: 0px;
  50.             /* 后 */
  51.             /* 宽加边款的长度 */
  52.             transform: translateZ(-202px);}#cube:hover {
  53.             /* 实现鼠标停留在页面 以360°旋转 */
  54.             transform: rotateY(360deg);}</style></head><body><div id="cube"><div>上</div><div>下</div><div>左</div><div>右</div><div>前</div><div>后</div></div></body></html>

效果在这里插入图片描述

最终效果 3D爱心

  1. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>整合一个爱心</title><style type="text/css">
  2.         /* 清空值 */
  3.         
  4.         * {
  5.             margin: 0;
  6.             padding: 0;}
  7.         /* 背景修改为黑色 */
  8.         
  9.         body {
  10.             background: #000;}
  11.         /*  引用div内的love3d元素*/
  12.         /* 爱心3D调整 */
  13.         
  14.         .love3d {
  15.             position: absolute;
  16.             left: 50%;
  17.             top: 50%;
  18.             width: 150px;
  19.             height: 150px;
  20.             /* 浏览器定位居中 */
  21.             /* margin: 100px auto; */
  22.             /* 开启3D效果 */
  23.             margin-left: -50px;
  24.             margin-top: -80px;
  25.             transform-style: preserve-3d;
  26.             /* css自定义动画，参数：名称 时间 匀速 无限重复 */
  27.             animation: yes 10s linear infinite;}
  28.         /* 启动自定义动画 0-360°*/
  29.         
  30.         @keyframes yes{
  31.             from {
  32.                 transform: rotateX(0deg) rotateY(0deg);}
  33.             to {
  34.                 transform: rotateX(360deg) rotateY(180deg);}}
  35.         /* 引用script内的heart */
  36.         
  37.         .heart {
  38.             /* 相对于love3d 定位 */
  39.             position: absolute;
  40.             /* 定位坐标 36个半爱心的位置 0会重叠为一个半圆 */
  41.             left: 0;
  42.             top: 0;
  43.             width: 100px;
  44.             height: 170px;
  45.             border: 2px solid red;
  46.             border-radius: 50% 50% 0/40% 50% 0;
  47.             border-left: 0;
  48.             border-bottom: 0;}
  49.         /* 图片3d调整 */
  50.         
  51.         .cube {
  52.             position: relative;
  53.             width: 50px;
  54.             height: 50px;
  55.             transform-style: preserve-3d;
  56.             /* 调整图片的位置 */
  57.             transform: translateX(32px) translateY(54px) translateZ(27px);}
  58.         
  59.         .cube div {
  60.             position: absolute;
  61.             left: 0;
  62.             top: 0;
  63.             width: 50px;
  64.             height: 50px;}
  65.         
  66.         .cube div:nth-child(1){
  67.             /* 上 */
  68.             top: -50px;
  69.             /* 旋转基地 xyz方向 */
  70.             /*默认值 transform-origin: 50% 50% 0; */
  71.             transform-origin: bottom;
  72.             /* 围绕x坐标 */
  73.             transform: rotateX(90deg);}
  74.         
  75.         .cube div:nth-child(2){
  76.             top: 50px;
  77.             /* 下 */
  78.             /* 围绕 上边对称 旋转-90° */
  79.             transform-origin: top;
  80.             transform: rotateX(-90deg);}
  81.         
  82.         .cube div:nth-child(3){
  83.             left: -50px;
  84.             /* 左 */
  85.             /* 围绕y坐标 */
  86.             transform-origin: right;
  87.             transform: rotateY(-90deg);}
  88.         
  89.         .cube div:nth-child(4){
  90.             left: 50px;
  91.             /* 右 */
  92.             transform-origin: left;
  93.             transform: rotateY(90deg);}
  94.         
  95.         .cube div:nth-child(5){
  96.             /* 前 */
  97.         }
  98.         
  99.         .cube div:nth-child(6){
  100.             /* 后 */
  101.             /* 宽加边款的长度 */
  102.             transform: translateZ(-50px);}
  103.         
  104.         .cube div img {
  105.             width: 50px;
  106.             height: 50px;}</style></head><body><!-- div类名love3d --><div class="love3d"><!-- div 盒子 --><div class="cube"><div><img src="./a.webp"></div><div><img src="./a.webp"></div><div><img src="./a.webp"></div><div><img src="./a.webp"></div><div><img src="./a.webp"></div><div><img src="./a.webp"></div></div></div><script type="text/javascript">
  107.         //在document文档下通过ClassName获取Elements元素
  108.         //类数组长度为1
  109.         var love3d = document.getElementsByClassName("love3d")[0];for(var i =0; i <36; i++){
  110.             // 创建一个元素
  111.             var tDiv = document.createElement("div");
  112.             //对象类名
  113.             tDiv.className ="heart";
  114.             //将所有半圆整体Y旋转10°，Z旋转45°，x坐标设置35像素大小
  115.             tDiv.style.transform ="rotateY(" + i * 10 + "deg) rotateZ(45deg) translateX(35px)";
  116.             // love3d元素内添加tDiv
  117.             love3d.appendChild(tDiv);}</script></body></html>

在这里插入图片描述

标签： 前端 css3 css
本文转载自: https://blog.csdn.net/qq_47945825/article/details/127718803
版权归原作者 神慕蔡蔡 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端练手3D爱心”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。