当前位置： 首页 > news >正文

CSS3制作3D爱心动画

news 2025/11/20 19:41:19

1、什么是CSS

    css，即层叠样式表的简称，是一种标记语言，有浏览器解释执行用来使页面变得更美观。

2、选择器

    css3中新增了一些选择器，如下：

3、新样式

  • 边框 css3新增了三个边框属性，分别是：
    • border-radius：创建圆角边框
    • box-shadow：为元素添加阴影
    • border-image：使用图片来绘制边框
  • box-shadow 设置元素阴影，设置属性如下（其中水平阴影和垂直阴影是必须设置的）
    • 水平阴影
    • 垂直阴影
    • 模糊距离(虚实)
    • 阴影尺寸(影子大小)
    • 阴影颜色
    • 内/外阴影
  • 背景 新增了几个关于背景的属性，分别是background-clip、background-origin、background-size和background-break
    • background-clip 用于确定背景画区，有以下几种可能的属性：通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围
      • background-clip: border-box; 背景从border开始显示
      • background-clip: padding-box; 背景从padding开始显示
      • background-clip: content-box; 背景显content区域开始显示
      • background-clip: no-clip; 默认属性，等同于border-box
    • background-origin 当我们设置背景图片时，图片是会以左上角对齐，但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的
      • background-origin: border-box; 从border开始计算background-position
      • background-origin: padding-box; 从padding开始计算background-position
      • background-origin: content-box; 从content开始计算background-position
      • 默认情况是padding-box，即以padding的左上角为原点
    • background-size 常用来调整背景图片的大小，主要用于设定图片本身。有以下可能的属性：
      • background-size: contain; 缩小图片以适合元素（维持像素长宽比）
      • background-size: cover; 扩展元素以填补元素（维持像素长宽比）
      • background-size: 100px 100px; 缩小图片至指定的大小
      • background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸
    • background-break 元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示
      • background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
      • background-break: bounding-box; 把盒之间的距离计算在内；
      • background-break: each-box; 为每个盒子单独重绘背景
  • 文字
    • word-wrap: normal|break-word
      • normal：使用浏览器默认的换行
      • break-all：允许在单词内换行
    • text-overflow 设置或检索当当前行超过指定容器的边界时如何显示，属性有两个值选择
      • clip：修剪文本
      • ellipsis：显示省略符号来代表被修剪的文本
    • text-shadow 可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色
    • text-decoration CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：
      • text-fill-color: 设置文字内部填充颜色
      • text-stroke-color: 设置文字边界填充颜色
      • text-stroke-width: 设置文字边界宽度
  • 颜色
    • css3新增了新的颜色表示方式rgba与hsla
    • rgba分为两部分，rgb为颜色值，a为透明度
    • hala分为四部分，h为色相，s为饱和度，l为亮度，a为透明度

4、transition 过渡

  transition属性可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号进行分隔，必须规定两项内容：

  • 过度效果
  • 持续时间
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

5、transform 转换

  • transform属性允许你旋转，缩放，倾斜或平移给定元素
  • transform-origin：转换元素的位置（围绕那个点进行转换），默认值为(x,y,z):(50%,50%,0)

使用方式：

  • transform: translate(120px, 50%)：位移
  • transform: scale(2, 0.5)：缩放
  • transform: rotate(0.5turn)：旋转
  • transform: skew(30deg, 20deg)：倾斜

6、animation 动画

动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬

animation也有很多的属性

  • animation-name：动画名称
  • animation-duration：动画持续时间
  • animation-timing-function：动画时间函数
  • animation-delay：动画延迟时间
  • animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
  • animation-direction：动画执行方向
  • animation-paly-state：动画播放状态
  • animation-fill-mode：动画填充模式

7、其他

  • Flex弹性布局
  • Grid栅格布局
  • 媒体查询 @media screen and (max-width: 960px) {}还有打印print

8、3D爱心实现

这是用css3做出来的一个小小的特效，最主要运用的是css3中transfrom的用法。思路

  1. 首先外部有一个heard的大盒子，用来包裹里面的照片盒子cube，将其设置transform-style：preserve-3d;(设置3d环境),并且使其旋转，以便看到cube的3d效果。
  2. cube里面的img分别用一个div包裹，分别做cube的6个面，分别对其设置transform属性，将其位置调到cube的6个面上。
  3. 创建包裹cube的心型。它是由36个大小与heard盒子相同的盒子构成，其中每一个盒子都去掉border-left，border-bottom，设置border-radius: 50% 50% 0/ 40% 50% 0;使其形状变成半个爱心形状。由于心型由36个盒子通过旋转构成的，采用js循环创建每一个盒子，并为其设置 line.style.transform = " rotateY("+ i * 10 +"deg) rotateZ(4时5deg) translateX(150px) ，让每一个盒子随着i的增加，绕Y轴旋转的角度也随之增加10deg
  4. 为heard设置animation(动画)使其达到3D旋转效果。
     
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{padding: 0;margin: 0;}img{width: 200px;height: 200px;}body{background-color: rgb(181, 179, 179);/* 景深 */perspective: 1000px;}#heard {width: 300px;height: 600px;margin: 100px auto;position: relative;transform-style: preserve-3d;/* 使其旋转看到cube的立体效果 */transform: rotateX(15deg) rotateZ(40deg);animation: rotate 10s linear infinite;}@keyframes rotate {0% {transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);}100%{transform: rotateY(720deg) rotateX(360deg) rotate(360deg);}}.cube{width: 200px;height: 200px;position: absolute;top:0px;left: 0px;transform-origin: 50% 50% ;/* 设置3D环境 */transform-style: preserve-3d;/* 移动元素 */transform:  translateX(60px) translateY(300px) translateZ(60px);}.cube>div{width: 100%;height: 100%;position: absolute;top:0px;left: 0px;border: 1px solid #000;}.front {transform: translateZ(100px);}.back {transform: translateZ(-100px) rotateY(180deg);}.left {transform: translateX(-100px) rotateY(-90deg);}.right{transform: translateX(100px) rotateY(90deg);}.top{transform: translateY(100px) rotateX(90deg);}.bottom{transform: translateY(-100px) rotateX(-90deg);}/*爱心的连边框*/.line {width: 300px;height: 600px;position: absolute;top:0;left: 0;border: 3px solid  #e4393c;border-left:0;border-bottom: 0;border-radius: 50%  50% 0/  40% 50% 0;}</style></head><body><div id="heard"><div class="cube"><div class="front"><img src="E:\8、前端\leetcode\test\10-24\loto-z.png" alt=""></div><div class="back"><img src="E:\8、前端\leetcode\test\10-24\loto-z.png" alt=""></div><div class="left"><img src="E:\8、前端\leetcode\test\10-24\loto-z.png" alt=""></div><div class="right"><img src="E:\8、前端\leetcode\test\10-24\loto-z.png" alt=""></div><div class="top"><img src="E:\8、前端\leetcode\test\10-24\loto-z.png" alt=""></div><div class="bottom"><img src="E:\8、前端\leetcode\test\10-24\loto-z.png" alt=""></div></div><!-- <div class="heard"></div> --></div></body></html><script>//获取元素var heard = document.getElementById("heard");for(var i = 0; i < 36 ;i++){var line = document.createElement("div");line.className = "line";line.style.transform = " rotateY("+ i * 10 +"deg)  rotateZ(45deg) translateX(150px) ";heard.appendChild(line);}</script>

相关文章：

CSS3制作3D爱心动画

1、什么是CSS css&#xff0c;即层叠样式表的简称&#xff0c;是一种标记语言&#xff0c;有浏览器解释执行用来使页面变得更美观。 2、选择器 css3中新增了一些选择器&#xff0c;如下&#xff1a; 3、新样式 边框 css3新增了三个边框属性&#xff0c;分别是&#xff1a; bo…...

编程日记 2023/11/28 5:57:45

Python Opencv实践 - 全景图片拼接stitcher

做一个全景图片切片的程序Spliter 由于手里没有切割好的全景图片资源&#xff0c;因此首先写了一个切片的程序spliter。 如果有现成的切割好的待拼接的切片文件&#xff0c;则不需要使用spliter。 对于全景图片的拼接&#xff0c;需要注意一点&#xff0c;各个切片图片之间要有…...

编程日记 2023/11/28 5:56:44

echarts 几千条分钟级别在小时级别图标上展示

需求背景解决效果ISQQW代码地址strategyChart.vue 需求背景 需要实现 秒级数据几千条在图表上显示&#xff0c;(以下是 设计图表上是按小时界别显示数据&#xff0c;后端接口为分钟级别数据) 解决效果 ISQQW代码地址 链接 strategyChart.vue <!--/** * author: liuk *…...

编程日记 2023/11/28 5:54:42

操作系统的中断与异常（408常考点）

为了进行核心态和用户态两种状态的切换&#xff0c;引入了中断机制。 中断是计算机系统中的一种事件&#xff0c;它会打断CPU当前正在执行的程序&#xff0c;转而执行另一个程序或者执行特定的处理程序。中断可以来自外部设备&#xff08;如键盘、鼠标、网络等&#xff09;、软…...

编程日记 2023/11/28 5:53:41

linux下的工具---vim

一、了解vim 1、vim是linux的开发工具 2、vi/vim的区别简单点来说&#xff0c;它们都是多模式编辑器&#xff0c;不同的是vim是vi的升级版本&#xff0c;它不仅兼容vi的所有指令&#xff0c;而且还有一些新的特性在里面。例如语法加亮&#xff0c;可视化操作不仅可以在终端运行…...

编程日记 2023/11/28 5:52:40

代码随想录算法训练营第六十天|84. 柱状图中最大的矩形

LeetCode 84. 柱状图中最大的矩形 题目链接&#xff1a;84. 柱状图中最大的矩形 - 力扣&#xff08;LeetCode&#xff09; 和接雨水还挺像的。 代码&#xff1a; #python class Solution:def largestRectangleArea(self, heights: List[int]) -> int:heights.insert(0, 0…...

编程日记 2023/11/28 5:51:40

P14 C++局部静态变量static延长生命周期

目录 01 前言 02 变量的作用域与生命周期 2.1 什么是作用域&#xff1a; 2.2 什么是变量的生命周期&#xff1a; 03 局部静态 3.1非静态变量例子 3.2静态变量例子 04 全局变量 05 后话 01 前言 在前几期里&#xff0c;我们了解了static关键字在特定上下文中的含义。 …...

编程日记 2023/11/28 5:50:38

C语言：写一个函数，求字符串的长度，在main函数中输入字符串并输出其长度（指针）

分析&#xff1a; 在程序中&#xff0c;定义一个函数 fix&#xff0c;该函数使用指针变量来访问字符串中的每个字符&#xff0c;并计算出字符串的长度。fix 函数的参数为指向 char 类型的指针变量 p&#xff0c;表示需要计算长度的字符串。 在主函数 main 中&#xff0c;定义一…...

编程日记 2023/11/28 5:49:36

CentOS7安装Docker运行环境

1 引言 Docker 是一个用于开发&#xff0c;交付和运行应用程序的开放平台。Docker 使您能够将应用程序与基础架构分开&#xff0c;从而可以快速交付软件。借助 Docker&#xff0c;您可以与管理应用程序相同的方式来管理基础架构。通过利用 Docker 的方法来快速交付&#xff0c;…...

编程日记 2023/11/28 5:48:35

单片机调试技巧--栈回溯

在启动文件中修改 IMPORT rt_hw_hard_fault_exceptionEXPORT HardFault_Handler HardFault_Handler PROC; get current contextTST lr, #0x04 ; if(!EXC_RETURN[2])ITE EQMRSEQ r0, msp ; [2]0 > Z1, get fault context from h…...

编程日记 2023/11/28 5:47:34

分布式锁之基于redis实现分布式锁（二）

2. 基于redis实现分布式锁 2.1. 基本实现 借助于redis中的命令setnx(key, value)&#xff0c;key不存在就新增&#xff0c;存在就什么都不做。同时有多个客户端发送setnx命令&#xff0c;只有一个客户端可以成功&#xff0c;返回1&#xff08;true&#xff09;&#xff1b;其他…...

编程日记 2023/11/28 5:46:32

python中%s的用法（字符串变量赋值办法）,长字符串换行办法

参考&#xff1a; http://wap.mobiletrain.org/about/BBS/142752.html https://blog.csdn.net/PolarisRisingWar/article/details/131134627 https://baijiahao.baidu.com/s?id1756094563884490493&wfrspider&forpc 字符串变量赋值 "Hello, %s. Today is %s.&q…...

编程日记 2023/11/28 5:45:31

【Mybatis】预编译/即时sql 数据库连接池

回顾 Mybatis是一个持久层框架.有两种方式(这两种方式可以共存) 1.注解 2.xml 一.传递参数 以使用#{} 来接受参数为例 (以上两种方式一样适用的) 1)传递单个参数 #{} 可以为任意名称 2)多个参数 默认的参数名称就是接口方法声明的形参 3)参数为对象 默认给每个对象的每个属性都…...

编程日记 2023/11/28 5:44:30

物联网AI 无线连接学习之WiFi基础篇 802.11协议发展

学物联网&#xff0c;来万物简单IoT物联网&#xff01;&#xff01; 前言 随着物联网行业不断发展&#xff0c;WiFi技术的发展在其中起着非常关键的作用&#xff0c;也是我们日常生活中使用非常广泛的无线网络技术之一&#xff0c;现在我们随便买一个家用电子产品&#xff0c…...

编程日记 2023/11/28 5:43:28

FreeRTOS-队列Queue

队列Queue 队列Queue可以用在“任务到任务”、“任务到中断”、“中断到任务”直接传输信息。 队列的阻塞访问&#xff08;可指定超时时间&#xff09; 只要知道队列的句柄&#xff0c;任务、ISR都可以读、写该队列。任务读写队列时&#xff0c;如果读写成功了就马上进入就绪态…...

编程日记 2023/11/28 5:42:27

车内总线通信技术简述

1. 前言 本文主要分享一些汽车总线通信技术&#xff08;CAN、CANFD、LIN、Flex Ray、MOST、LVDS、TTP/C、Ethernet&#xff09;&#xff0c;希望对大家能有所帮助。 2. 多种汽车总线通信技术 2.1 CAN CAN&#xff08;Controller Area Network&#xff09;全称为“控制器局域…...

编程日记 2023/11/28 5:41:26

6.2 Windows驱动开发：内核枚举SSSDT表基址

在Windows内核中&#xff0c;SSSDT&#xff08;System Service Shadow Descriptor Table&#xff09;是SSDT&#xff08;System Service Descriptor Table&#xff09;的一种变种&#xff0c;其主要用途是提供Windows系统对系统服务调用的阴影拷贝。SSSDT表存储了系统调用的函数…...

编程日记 2023/11/28 5:39:24

实时LCM的ImgPilot搭建部署

ImgPilot是具有实时潜在一致性模型&#xff08;LCM&#xff09;功能的图像试点 下载源码 GitHub - leptonai/imgpilot: Image pilot with the power of Real-Time Latent Consistency Modelhttps://github.com/leptonai/imgpilot安装前端web cd imgpilot npm install 安装…...

编程日记 2023/11/28 5:38:23

开源与闭源：大模型未来的发展之争

在当今数字化时代&#xff0c;开源与闭源软件一直是技术界争论的热点话题。随着人工智能技术的快速发展&#xff0c;特别是大模型&#xff08;如GPT-4等&#xff09;的广泛应用&#xff0c;这个辩论在大模型技术的背景下变得更加引人注目。本文将探讨开源与闭源的优劣势比较&am…...

编程日记 2023/11/28 5:37:22

linux系统初始化本地git，创建ssh-key

step1, 在linux系统配置你的git信息 sudo apt install -y git//step1 git config --global user.name your_name // github官网注册的用户名 git config --global user.email your_email //gitub官网注册绑定的邮箱 git config --list //可以查看刚才你的配置内容…...

编程日记 2023/11/28 5:35:20

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/11/20 1:58:39

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/11/20 1:01:29

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2025/11/20 13:21:19

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2025/7/5 11:03:11

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/11/16 22:48:50

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/11/17 4:24:04

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2025/11/17 1:24:41

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

编程新知 2025/9/19 22:12:36

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

编程新知 2025/11/20 10:38:39

用神经网络读懂你的“心情”：揭秘情绪识别系统背后的AI魔法

用神经网络读懂你的“心情”：揭秘情绪识别系统背后的AI魔法 大家好，我是Echo_Wish。最近刷短视频、看直播，有没有发现，越来越多的应用都开始“懂你”了——它们能感知你的情绪，推荐更合适的内容，甚至帮客服识别用户情绪，提升服务体验。这背后，神经网络在悄悄发力，撑起…...

编程新知 2025/11/19 4:06:39