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

CSS3制作3D爱心动画

news 2025/8/23 0:26:17

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的用法。思路

首先外部有一个heard的大盒子，用来包裹里面的照片盒子cube，将其设置transform-style：preserve-3d;(设置3d环境),并且使其旋转，以便看到cube的3d效果。
cube里面的img分别用一个div包裹，分别做cube的6个面，分别对其设置transform属性，将其位置调到cube的6个面上。
创建包裹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
为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，即层叠样式表的简称，是一种标记语言，有浏览器解释执行用来使页面变得更美观。 2、选择器 css3中新增了一些选择器，如下： 3、新样式边框 css3新增了三个边框属性，分别是： bo…...

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

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

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

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

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

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

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

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

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

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

linux下的工具---vim

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

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

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

LeetCode 84. 柱状图中最大的矩形题目链接：84. 柱状图中最大的矩形 - 力扣（LeetCode） 和接雨水还挺像的。代码： #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 什么是作用域： 2.2 什么是变量的生命周期： 03 局部静态 3.1非静态变量例子 3.2静态变量例子 04 全局变量 05 后话 01 前言在前几期里，我们了解了static关键字在特定上下文中的含义。 …...

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

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

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

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

CentOS7安装Docker运行环境

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

编程日记 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)，key不存在就新增，存在就什么都不做。同时有多个客户端发送setnx命令，只有一个客户端可以成功，返回1（true）；其他…...

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

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

参考： 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协议发展

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

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

FreeRTOS-队列Queue

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

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

车内总线通信技术简述

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

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

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

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

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

实时LCM的ImgPilot搭建部署

ImgPilot是具有实时潜在一致性模型（LCM）功能的图像试点下载源码 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

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

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

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令范围操作示例指定行范围处理复合命令示例实用技…...

编程新知 2025/7/5 18:14:39

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享

平时用 iPhone 的时候，难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵，或者买了二手 iPhone 却被原来的 iCloud 账号锁住，这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/8/22 4:15:53

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名转换路径 …...

编程新知 2025/7/20 13:01:09

定时器任务——若依源码分析

分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...

编程新知 2025/8/21 18:40:12