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

CSS3制作3D爱心动画

news 2026/4/6 16:47:37

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

OpenClaw个性化设置：定制Kimi-VL-A3B-Thinking的交互风格与输出格式

OpenClaw个性化设置&#xff1a;定制Kimi-VL-A3B-Thinking的交互风格与输出格式 1. 为什么需要个性化设置&#xff1f; 第一次用OpenClaw对接Kimi-VL-A3B-Thinking模型时&#xff0c;我发现默认的交互方式总有些"不对味"。模型回复要么过于冗长&#xff0c;要么格式…...

编程新知 2026/4/6 16:45:11

OpenClaw人人养虾：macOS 开发环境设置

本指南介绍从源代码构建和运行 OpenClaw macOS 应用所需的步骤。 前置条件 在构建应用之前&#xff0c;请确保已安装以下工具&#xff1a; Xcode 26.2&#xff1a;Swift 开发所需。Node.js 22 和 pnpm&#xff1a;gateway、CLI 和打包脚本所需。 1. 安装依赖 安装项目级依…...

编程新知 2026/4/6 16:31:08

SQL数据库如何删除千万级大表数据_使用TRUNCATE与Drop策略

TRUNCATE 比 DELETE 快因不写行级日志、直接释放数据页并重置高水位线&#xff0c;属 DDL 操作&#xff0c;不可回滚、不支持 WHERE&#xff1b;DELETE 逐行加锁写日志&#xff0c;大表易锁表卡死&#xff1b;DROP 最快但不可逆&#xff0c;丢失结构与权限。TRUNCATE 为什么比 …...

编程新知 2026/4/6 16:04:47

Phi-4-mini-reasoning效果展示：数学符号识别+语义理解+推理三重能力

Phi-4-mini-reasoning效果展示&#xff1a;数学符号识别语义理解推理三重能力 1. 模型概览 Phi-4-mini-reasoning是一款3.8B参数的轻量级开源模型&#xff0c;专为数学推理、逻辑推导和多步解题等强逻辑任务设计。这款由Azure AI Foundry推出的模型主打"小参数、强推理、…...

编程新知 2026/4/6 15:46:37

ComfyUI-Impact-Pack：3个强力方案解锁AI图像创作新维度

ComfyUI-Impact-Pack&#xff1a;3个强力方案解锁AI图像创作新维度 【免费下载链接】ComfyUI-Impact-Pack Custom nodes pack for ComfyUI This custom node helps to conveniently enhance images through Detector, Detailer, Upscaler, Pipe, and more. 项目地址: https:/…...

编程新知 2026/4/6 14:52:08

实战应用：在快马平台构建支持模型切换的智能代码重构助手

最近在做一个代码重构工具时&#xff0c;发现不同AI模型对同一段代码的重构建议差异很大。于是尝试在InsCode(快马)平台上搭建了一个支持模型切换的智能代码重构助手&#xff0c;效果出乎意料地好。分享一下具体实现思路和实战经验&#xff1a; 需求分析 日常开发中经常遇到代码…...

编程新知 2026/4/6 13:55:35

【优化设计】基于人工蜂群算法机械设计优化附Matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。&#x1f447; 关注我领取海量matlab电子书和数学建模资料&#x1f34a;个人信条&#xff1a;格物致知,完整Matl…...

编程新知 2026/4/6 13:49:34

Rustup终极指南：轻松管理你的Rust开发环境

Rustup终极指南&#xff1a;轻松管理你的Rust开发环境 【免费下载链接】rustup The Rust toolchain installer 项目地址: https://gitcode.com/gh_mirrors/ru/rustup 你是否曾经为管理多个Rust版本而烦恼&#xff1f;或者在不同项目间切换工具链时感到困惑&#xff1f;R…...

编程新知 2026/4/6 12:33:59

新手零基础入门：借助快马AI生成带详细注释的51单片机流水灯项目

作为一个刚接触51单片机的新手&#xff0c;我最近尝试用InsCode(快马)平台完成了第一个流水灯项目。整个过程比我预想的顺利很多&#xff0c;特别适合零基础入门。下面分享我的学习过程和关键要点&#xff1a; 项目准备阶段 刚开始连开发板长什么样都不知道&#xff0c;通过平台…...

编程新知 2026/4/6 11:31:16

pytorch求二维张量转置的几种方法

方法1方法2方法3方法4...

编程新知 2026/4/6 11:15:10