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

CSS3制作3D爱心动画

news 2026/4/6 18:05:40

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

基于Dify工作流的多阶段检索与筛选系统

Dify工作流中实现查询优化&#xff08;QO&#xff09;&#xff1a;将查询复杂度分类法与QOL框架融入工作流 假设用户输入的问题是&#xff1a;“请帮我整理2026年1月1日至今在GitHub上发布的金融商业行业开源项目” 为了整理2026年1月1日至今在GitHub上发布的金融商业行业开源…...

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

如何利用WebSocket实现biliup的实时直播状态监控与日志推送：完整指南

如何利用WebSocket实现biliup的实时直播状态监控与日志推送&#xff1a;完整指南 【免费下载链接】biliup 自动直播录制、投稿、twitch、ytb频道搬运工具。命令行投稿(B站)和视频下载工具&#xff0c;提供多种登录方式&#xff0c;支持多p。 项目地址: https://gitcode.com/g…...

编程新知 2026/4/6 16:59:16

OpenClaw对接gemma-3-12b-it实战：本地部署与WebUI自动化任务指南

OpenClaw对接gemma-3-12b-it实战&#xff1a;本地部署与WebUI自动化任务指南 1. 为什么选择OpenClawgemma-3-12b-it组合 去年我在尝试自动化办公流程时&#xff0c;发现大多数RPA工具要么功能受限&#xff0c;要么需要将敏感数据上传到云端。直到遇到OpenClaw这个开源的本地化…...

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

雷达信号处理中的‘模糊函数’到底是什么？用Python仿真LFM信号的距离多普勒耦合现象

雷达信号处理中的‘模糊函数’到底是什么&#xff1f;用Python仿真LFM信号的距离多普勒耦合现象 雷达信号处理中&#xff0c;匹配滤波器的性能直接影响目标检测的精度。当目标存在径向运动时&#xff0c;回波信号会产生多普勒频移&#xff0c;导致匹配滤波器出现失配。描述这种…...

编程新知 2026/4/6 15:24:19

MiroFish 深度技术研究报告

1. 项目概述与核心定位 1.1 项目愿景与设计理念 1.1.1 群体智能镜像：映射现实世界的数字孪生 MiroFish 的核心愿景是构建 “映射现实的群体智能镜像”——一种能够精确复刻复杂社会系统动态的数字孪生系统。该项目由盛大集团战略支持与孵化，其技术路径区别于传统预测方法：…...

编程新知 2026/4/6 14:43:59

HSTracker终极指南：如何快速上手macOS炉石套牌追踪器

HSTracker终极指南&#xff1a;如何快速上手macOS炉石套牌追踪器 【免费下载链接】HSTracker A deck tracker and deck manager for Hearthstone on macOS 项目地址: https://gitcode.com/gh_mirrors/hs/HSTracker HSTracker是一款专为macOS玩家打造的炉石传说套牌追踪与…...

编程新知 2026/4/6 13:37:06

从“能用”到“精准”：Halcon相机内参标定后的参数验证与实战应用指南

从“能用”到“精准”&#xff1a;Halcon相机内参标定后的参数验证与实战应用指南 当你完成Halcon相机内参标定&#xff0c;生成了那个看似完美的参数文件时&#xff0c;真正的挑战才刚刚开始。很多开发者会陷入"标定完成即大功告成"的误区&#xff0c;却不知未经验证…...

编程新知 2026/4/6 13:22:59

Ansible Roles深度指南：如何像搭积木一样管理复杂Playbook？

Ansible Roles架构设计&#xff1a;构建企业级配置管理的乐高积木 在电商系统多环境部署的复杂场景中&#xff0c;开发团队经常面临这样的困境&#xff1a;测试环境的配置意外污染了生产环境&#xff0c;不同服务间的变量命名冲突导致部署失败&#xff0c;或者新增服务器时需要…...

编程新知 2026/4/6 11:39:19

Pixel Couplet Gen 保姆级部署教程：VSCode远程开发环境搭建

Pixel Couplet Gen 保姆级部署教程&#xff1a;VSCode远程开发环境搭建 1. 前言&#xff1a;为什么选择VSCode远程开发 如果你正在使用星图GPU平台上的Pixel Couplet Gen服务&#xff0c;可能会遇到一个常见问题&#xff1a;如何在本地高效地开发和调试对联生成项目&#xff…...

编程新知 2026/4/6 11:23:13

用HC-SR501打造智能家居：5分钟搞定人体感应自动灯（附Arduino代码）

用HC-SR501打造智能家居&#xff1a;5分钟搞定人体感应自动灯&#xff08;附Arduino代码&#xff09; 智能家居的入门项目里&#xff0c;人体感应自动灯绝对是最实用且容易上手的方案之一。想象一下&#xff1a;深夜起床不用摸黑找开关&#xff0c;走到走廊灯光自动亮起&#x…...

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