css 动画

transform的3D动画

3D形变函数会创建一个合成层来启用GPU硬件加速

translate

      transform: translateY(100px);transform: translateX(100px);transform: translateZ(100px);transform: translate3d(100px,100px,100px); // x,y,z的简写

在这里插入图片描述

rotate

deg弧度

 transform: rotateX(-40deg);

在这里插入图片描述
在这里插入图片描述

   transform: rotateY(40deg);

在这里插入图片描述

3D透视 perspective

一般是给父元素设置的，如果是子元素或单个子元素，可以使用函数perspective()。
设置透视后，距离越远元素越小，距离越小，元素越大。
设置透视后对z轴的操作才有效。
在这里插入图片描述

 .box {width: 100px;height: 100px;background-color: rebeccapurple;transform: perspective(300px) rotateY(-40deg);}

scale

  // 设置百分比不会生效transform: scaleY(1.5);transform: scaleX(1.5);transform: scaleZ(1.5);

3D空间 transform-style

设置子元素是定位在3D空间的还是展示在2D平面的
两个值:
flat:位于平面中,
preserve-3d:位于3D空间中。

 <style>.box {width: 100px;height: 100px;perspective: 100px;background-color: aqua;transform-style: preserve-3d;}.item {width: 100px;height: 100px;background-color: rgb(200, 196, 204);transform: rotateX(40deg) translateX(10px);}</style><div class="box"><div class="item"></div></div>

在这里插入图片描述

画一个正方体

例子：
1.

 <style>.box {position: relative;width: 100px;height: 100px;background-color: aqua;transform-style: preserve-3d;transform: rotateX(-33deg) rotateY(45deg); //正方体的测试图}.item {position: absolute;top: 0;left: 0;width: 100px;height: 100px;background-color: rgb(200, 196, 204);}</style><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div></div>

在这里插入图片描述
2.
在这里插入图片描述

  .top {background-color: rgb(41, 38, 38);transform: rotateX(90deg);}

在这里插入图片描述

 .top {background-color: rgb(41, 38, 38);transform: rotateX(90deg) translateZ(50px);}

在这里插入图片描述

 .top {background-color: rgb(41, 38, 38);transform: rotateX(90deg) translateZ(50px);}.bottom {background-color: rgb(73, 39, 39);transform: rotateX(-90deg) translateZ(50px);}

在这里插入图片描述

3.`

 .right {background-color: rgb(45, 39, 73);transform: rotateY(90deg) translateZ(50px);}

在这里插入图片描述

   .left {background-color: rgb(45, 39, 73);transform: rotateY(-90deg) translateZ(50px);}.right {background-color: rgb(45, 39, 73);transform: rotateY(90deg) translateZ(50px);}

在这里插入图片描述

 .back {background-color: rgb(23, 23, 23);transform: rotateY(-180deg) translateZ(50px);}

在这里插入图片描述

 <style>.box {position: relative;width: 100px;height: 100px;margin: 200px;transform-style: preserve-3d;transform: rotateX(-33deg) rotateY(45deg);}.item {position: absolute;top: 0;left: 0;width: 100px;height: 100px;}.top {background-color: rgb(41, 38, 38);transform: rotateX(90deg) translateZ(50px);}.bottom {background-color: rgb(73, 39, 39);transform: rotateX(-90deg) translateZ(50px);}.left {background-color: rgb(45, 39, 73);transform: rotateY(-90deg) translateZ(50px);}.right {background-color: rgb(38, 100, 85);transform: rotateY(90deg) translateZ(50px);}.font {background-color: rgb(73, 73, 39);transform: rotateY(0deg) translateZ(50px);}.back {background-color: rgb(23, 23, 23);transform: rotateY(-180deg) translateZ(50px);}</style><div class="box"><div class="item top">1</div><div class="item bottom">2</div><div class="item left">3</div><div class="item right">4</div><div class="item font">5</div><div class="item back">6</div></div>

在这里插入图片描述

3D背面可见性- backface-visibility

backface-visibility 设置后，当元素的背面是否可见，元素背向观察者时是否可见。
visible:背向时可见。
hidden:背向时不可见。

 <style>.box {width: 200px;height: 200px;margin: 200px;background-color: antiquewhite;padding-inline-end: 200px;}.item {width: 100px;height: 100px;background-color: rgb(60, 67, 95);transform: rotateY(180deg);animation: rote 6s linear infinite;backface-visibility: hidden;}@keyframes rote {0% {transform: rotateY(0deg);}100% {transform: rotateY(360deg);}}</style>
</head>
<body><div class="box"><div class="item"></div></div>
</body>

请添加图片描述

webpack logo的例子

  <style>.box {margin: 200px;position: relative;}.box-item {position: absolute;top: 50%;left: 50%;width: 50px;height: 50px;margin: -25px 0 0 -25px;transform-style: preserve-3d;transform: rotateX(-33deg) rotateY(45deg);animation: items 6s ease-in-out infinite;}.item {width: 50px;height: 50px;position: absolute;top: 0;left: 0;border: 1px solid white;}@keyframes items {0% {transform: rotateX(-33deg) rotateY(45deg);}50%,100% {transform: rotateX(-33deg) rotateY(405deg);}}.top {background-color: rgba(168, 220, 245, 0.5);transform: rotateX(90deg) translateZ(25px);}.bottom {background-color: rgba(168, 220, 245, 0.5);transform: rotateX(-90deg) translateZ(25px);}.left {background-color: rgba(168, 220, 245, 0.5);transform: rotateY(-90deg) translateZ(25px);}.right {background-color: rgba(168, 220, 245, 0.5);transform: rotateY(90deg) translateZ(25px);}.font {background-color: rgba(168, 220, 245, 0.5);transform: rotateY(0deg) translateZ(25px);}.back {background-color: rgba(168, 220, 245, 0.5);transform: rotateY(-180deg) translateZ(25px);}.box-container {position: absolute;top: 50%;left: 50%;width: 100px;height: 100px;margin: -50px 0 0 -50px;transform-style: preserve-3d;transform: rotateX(-33deg) rotateY(45deg);animation: containers 6s ease-in-out infinite;}.container {position: absolute;top: 0;left: 0;width: 100px;height: 100px;border: 1px solid white;}@keyframes containers {0% {transform: rotateX(-33deg) rotateY(45deg);}50%,100% {transform: rotateX(-33deg) rotateY(-315deg);}}.container-top {background-color: rgba(141, 214, 249, 0.5);transform: rotateX(90deg) translateZ(50px);}.container-bottom {background-color: rgba(141, 214, 249, 0.5);transform: rotateX(-90deg) translateZ(50px);}.container-left {background-color: rgba(141, 214, 249, 0.5);transform: rotateY(-90deg) translateZ(50px);}.container-right {background-color: rgba(141, 214, 249, 0.5);transform: rotateY(90deg) translateZ(50px);}.container-font {background-color: rgba(141, 214, 249, 0.5);transform: rotateY(0deg) translateZ(50px);}.container-back {background-color: rgba(141, 214, 249, 0.5);transform: rotateY(-180deg) translateZ(50px);}</style></head><body><div class="box"><div class="box-item"><div class="item top"></div><div class="item bottom"></div><div class="item left"></div><div class="item right"></div><div class="item font"></div><div class="item back"></div></div><div class="box-container"><div class="container container-top"></div><div class="container container-bottom"></div><div class="container container-left"></div><div class="container container-right"></div><div class="container container-font"></div><div class="container container-back"></div></div></div></body>

请添加图片描述

<style>.box {margin: 200px;position: relative;width: 500px;height: 500px;background-image: url("1.png");background-position: center;background-size: contain;}.box1 {position: absolute;top: 170px;left: 43px;animation: b1 3s ease-in infinite;}@keyframes b1 {0% {opacity: 1;transform: translateY(0px);}50%,100% {opacity: 0;transform: translateY(-50px);}}.box2 {position: absolute;top: 267px;left: 111px;animation: b2 3s ease-in infinite;}@keyframes b2 {0% {transform: translateX(0) translateY(0);}50% {transform: translateX(40px) translateY(-23px);}70%,100% {transform: translateX(50px) translateY(-20px);}}</style><div class="box"><img src="./img/2.png" alt="" class="box1" /><img src="./img/3.png" alt="" class="box2" /></div>

在这里插入图片描述
结果

请添加图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/32401.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C语言学习记录20240622

C语言学习记录20240622

这次需要用 C 语言库 Allegro 写爆破彗星游戏。项目有一些描述如需要绘制飞船、彗星、子弹&#xff0c;需要响应按键实现飞船加速、减速、转向、开火&#xff0c;需要绘制弹道&#xff0c;需要实现彗星旋转、缩放&#xff0c;需要碰撞检测&#xff0c;需要显示计分。 这些用 w…
阅读更多...
Redis—SortedSet数据类型及其常用命令详解

Redis—SortedSet数据类型及其常用命令详解

文章目录 一、Redis概述SortedSet类型1 ZADD&#xff1a;向有序集合添加成员2 ZREM&#xff1a;从有序集合中移除一个或多个成员3 ZSCORE : 获取sorted set中的指定元素的score值4 ZRANK&#xff1a;获取sorted set 中的指定元素的排名5 ZCARD&#xff1a;获取sorted set中的元…
阅读更多...
赵丽颖纯白茉莉绽放温柔之美

赵丽颖纯白茉莉绽放温柔之美

赵丽颖纯白茉莉&#xff0c;绽放温柔之美在这个繁忙喧嚣的娱乐圈&#xff0c;赵丽颖以其独特的魅力&#xff0c;成为了无数人心中的白月光。近日&#xff0c;赵丽颖工作室发布了一组live图&#xff0c;她身着一袭温柔白裙&#xff0c;宛如一朵盛开的纯白茉莉花&#xff0c;美得…
阅读更多...
kali linux安装中文输入法

kali linux安装中文输入法

kali linux安装中文输入法&#xff1a;先进入root权限 第1步&#xff1a;安装fctix sudo apt-get install fcitx第2步&#xff1a;安装fcitx-pinyin输入法 apt-get install fcitx-pinyin第3步&#xff1a;配置输入法 打开 Fcitx配置 应用&#xff0c;点击 &#xff0c;去除勾…
阅读更多...
音视频的Buffer处理

音视频的Buffer处理

最近在做安卓下UVC的一个案子。正好之前搞过ST方案的开机广告&#xff0c;这个也是我少数最后没搞成功的项目。当时也有点客观原因&#xff0c;当时ST要退出机顶盒市场&#xff0c;所以一切的支持都停了&#xff0c;当时啃他家播放器几十万行的代码&#xff0c;而且几乎没有文档…
阅读更多...
RIP动态路由配置

RIP动态路由配置

1、搭建网络 搭建拓扑、规划IP地址、划分网段、设置端口 2、配置交换机&#xff0c;路由器 三层交换机配置 Switch>enable Switch#conf t Enter configuration commands, one per line. End with CNTL/Z. Switch(config)#hostname S3560S3560(config)#vlan 10 S3560(con…
阅读更多...
【Excel经验】字符串处理方法

【Excel经验】字符串处理方法

概览-公式汇总 序号公式功能公式公式示例公式说明1把多列内容拼接在一起&#xff0c;作为新的一列的内容CONCATENATE (text1,text2,…)CONCATENATE(A2,“#”,B2,“”,C2)用于根据多个列的内容拼成我们指定格式的内容&#xff0c;拼接的内容通常来源于原始数据&#xff0c;同时…
阅读更多...
深度学习论文: Depth Anything V2

深度学习论文: Depth Anything V2

深度学习论文: Depth Anything V2 Depth Anything V2 PDF: https://arxiv.org/pdf/2406.09414v1 代码:https://depth-anything-v2.github.io/ PyTorch代码: https://github.com/shanglianlm0525/CvPytorch PyTorch代码: https://github.com/shanglianlm0525/PyTorch-Networks …
阅读更多...
51单片机定时器中断配置

51单片机定时器中断配置

测试环境 单片机型号&#xff1a;STC8G1K08-38I-TSSOP20&#xff0c;其他型号请自行测试&#xff1b; IDE&#xff1a;Keil C51&#xff1b; 定时器配置及主要代码 以定时器T0为例&#xff0c;查看手册&#xff0c;有4种工作模式&#xff1a;模式0&#xff08;16位自动重装载…
阅读更多...
MSPM0G3507——GPIO例程讲解1——input_capture

MSPM0G3507——GPIO例程讲解1——input_capture

函数&#xff1a; 参数&#xff1a; 返回值&#xff1a; 主函数代码&#xff1a; #include "ti_msp_dl_config.h"extern volatile uint32_t interruptVectors[];int main(void) {SYSCFG_DL_init(); //把所有的LED灯和按键初始化了一…
阅读更多...
LangChain：如何高效管理 LLM 聊天历史记录？

LangChain：如何高效管理 LLM 聊天历史记录？

LangChain 团队发布了一篇关于使用 Dragonfly DB 来有效管理 LangChain 应用程序聊天历史记录的教程。 该教程旨在解决用户在使用 LangChain 应用程序时普遍遇到的一个问题&#xff1a;如何高效地管理聊天历史记录。 LangChain 团队在推文中强调了 Dragonfly DB 在管理聊天历…
阅读更多...
【vue3|第12期】Vue3的Props详解：组件通信

【vue3|第12期】Vue3的Props详解：组件通信

日期&#xff1a;2024年6月19日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…
阅读更多...
【Redis】黑马点评短信登录

【Redis】黑马点评短信登录

https://blog.csdn.net/qq_33888850/article/details/129770077 https://blog.csdn.net/weixin_51515308/article/details/128010464 https://www.bilibili.com/video/BV1cr4y1671t?p24 导入数据库 https://github.com/MagicToDo/hm-dianping sql文件在 hm-dianping-init\src…
阅读更多...
计算机网络：运输层 - TCP首部格式 连接的创建与释放

计算机网络：运输层 - TCP首部格式 连接的创建与释放

计算机网络&#xff1a;运输层 - TCP首部格式 & 连接的创建与释放 TCP首部格式源端口 目的端口序号确认号数据偏移保留控制位窗口检验和紧急指针 TCP连接创建 - 三次握手TCP传输过程TCP连接释放 - 四次挥手 TCP首部格式 TCP的首部如下&#xff1a; 首部的前20 byte是固定的…
阅读更多...
【物联网】室内定位技术及定位方式简介

【物联网】室内定位技术及定位方式简介

目录 一、概述 二、常用的室内定位技术 2.1 WIFI技术 2.2 UWB超宽带 2.3 蓝牙BLE 2.4 ZigBee技术 2.5 RFID技术 三、常用的室内定位方式 3.1 信号到达时间 3.2 信号到达时间差 3.3 信号到达角 3.4 接收信号强度 一、概述 GPS是目前应用最广泛的定位技术&#xff0…
阅读更多...
一种基于稀疏学习的旋转机械故障诊断方法（MATLAB）

一种基于稀疏学习的旋转机械故障诊断方法（MATLAB）

稀疏表示方法是一种利用最少原子在过完备字典上表示或逼近信号的方法&#xff0c;该方法具有信号表示的高分辨率、稀疏性、强抗干扰能力和自适应性等优点。稀疏表示聚焦于设计合适的稀疏表示字典和挖掘有用的稀疏先验信息&#xff0c;其核心思想是将故障特征信息近似表示为字典…
阅读更多...
Linux下VSCode的安装和基本使用

Linux下VSCode的安装和基本使用

应用场景&#xff1a;嵌入式开发。 基本只需要良好的编辑环境&#xff0c;能支持文件搜索和跳转&#xff0c;就挺OK的。 之所以要在Linux下安装&#xff0c;是因为在WIN11上安装后&#xff0c;搜索功能基本废了&#xff0c;咋弄都弄不好&#xff0c;又不方便重装win系统&#x…
阅读更多...
LLM功能应用的测试艺术：策略与实践

LLM功能应用的测试艺术：策略与实践

在人工智能技术日新月异的今天，大规模语言模型（LLMs）凭借其强大的自然语言处理能力，正逐渐成为众多应用和服务的核心驱动力。从智能客服到创作辅助，从信息检索到个性化推荐，LLMs的广泛应用对测试策略提出了全新的挑战。本文旨在探讨针对拥有LLM功能的应用或软件，如何制定…
阅读更多...
韩顺平0基础学java——第29天

韩顺平0基础学java——第29天

p592-599 线程 用户线程和守护线程 1.用户线程:也叫工作线程&#xff0c;当线程的任务执行完或通知方式结束 2守护线程:一般是为工作线程服务的&#xff0c;当所有的用户线选束&#xff0c;守护线程自动结束 3.常见的守护线程:垃圾回收机制 当我们希望当main线程结束后&…
阅读更多...
2.APP测试-安卓adb抓取日志

2.APP测试-安卓adb抓取日志

1.打开手机的开发者模式&#xff0c;打开USB调试 &#xff08;1&#xff09;小米手机打开开发者模式&#xff1a; 【设置】-【我的设备】-【全部参数信息】-快速多次点击【OS版本】-进入开发者模式 &#xff08;2&#xff09;连接手机和电脑&#xff0c;手机打开USB调试 【设置…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023