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

CSS3D+动画

news 文章来源：https://blog.csdn.net/qq_46372132/article/details/132555818 2024/11/11 16:45:34

CSS3D

在这里插入图片描述

1.css3D

给父元素设置
- perspective:景深:近大远小的效果900-1200px这个范围内
- transform-style:是否设置3D环境
  
  flat 2D环境默认值
  
  perserve-3D环境

3D功能函数

1.位移:

translateZ()
translate3D(x,y,z)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {/* 景深 近大远小 设置一个就可以了 */perspective: 1200px;/* 提高3D环境,哪个子元素需要,就到对应的父元素上面设置 */transform-style: preserve-3d;}* {padding: 0;margin: 0;}.box1 {width: 600px;height: 400px;background-color: rgba(0, 0, 0, 0.5);margin: 100px;transform-style: preserve-3d;/* 设置旋转侧面 */transform: rotateY(80deg);}.box2 {width: 100px;height: 150px;background-color: red;transition: all 1s;}.box1:hover .box2 {transform: translate3d(0px, 0px, 100px);transform: translateZ(100px) translateX(100px);}</style>
</head><body><div class="box1"><div class="box2"></div></div>
</body></html>

2.3D旋转

属性:

rotateX()

rotateY()

rotateZ()

rotate3D(x,y,z,deg)

x,y,z:0-1 0不旋转

deg:旋转的角度

3.3D缩放

缩放：
scaleZ()
scale(x,y,z)
【注】单独使用没有明显效果，需要配合其他功能函数

4.观察角度

perspective-origin:水平垂直；观测立方体的角度
left center right
top center bottom
px %

2.动画

定义方式一

动画：
1：定义关键帧
1:定义方式一
@keyframes 动画名字{from{}初始状态to{}结束状态

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.box1 {width: 500px;height: 400px;background-color: pink;margin: 100px auto;}.box2 {width: 100px;height: 100px;background-color: skyblue;/* 调用动画 */animation-name: dh;animation-duration: 3s;}/* 定义动画:方式1  */@keyframes dh {form {transform: translateX(0px);}to {transform: translateX(100px);}}</style>
</head><body><div class="box1"><div class="box2"></div></div>
</body></html>

定义方式二：

定义方式二：
@keyframes动画名字{0%{}50%{}100%{}

调用动画:

animation:动画名称 动画时间 延迟时间
动画类型 循环次数 运动方向；
animation-name:动画名称；
animation-duration:动画时间；
animation-delay:延迟时间；
animation-timing-function:动画类型；lineareaseease-inease-outease-in-outstep-start逐帧动画steps(数字)逐帧动画
animation-iteration-count:循环次数；具体数字infinite无限循环
animation-direction:运动方向normal 默认值reverse 反向运动alternate 先正后反alternate-reverse先反后正
animation-play-state:是否运动；running运动paused暂停

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.box1 {width: 500px;height: 400px;background-color: pink;margin: 100px auto;}.box2 {width: 100px;height: 100px;background-color: skyblue;/* 调用动画 *//* 动画名称 */animation-name: move;/* 动画运动时间 */animation-duration: 3s;/* 动画延迟时间 */animation-delay: 3s;/* 动画类型 */animation-timing-function: linear;/* 循环次数 3次 */animation-iteration-count: 3;/* 无限循环 */animation-iteration-count: infinite;/* 默认运动 */animation-direction: normal;/* 反向运动 */animation-direction: reverse;/* 先正后反 */animation-direction: alternate;/* 先反后正 */animation-direction: alternate-reverse;}.box1:hover .box2 {/* 默认值 运动 */animation-play-state: running;/* 鼠标移入暂停 */animation-play-state: paused;}/* 定义动画方式二 */@keyframes move {0% {transform: translateX(0) translateY(0);}25% {transform: translateX(400px) translateY(0);}50% {transform: translateX(400px) translateY(300px);}75% {transform: translateX(0) translateY(300px);}100% {transform: translateX(0) translateY(0);}}</style>
</head><body><div class="box1"><div class="box2"></div></div>
</body></html>

transition:过渡；和animation:动画；的区别：
1:都是是动画效果
2:前者需要触发方式，后者页面一加载完就立即执行

CSS3D+动画

CSS3D 1.css3D 给父元素设置 perspective:景深:近大远小的效果900-1200px这个范围内 transform-style:是否设置3D环境 flat 2D环境默认值 perserve-3D环境 3D功能函数 1.位移: translateZ()translate3D(x,y,z) <!DOCTYPE html> <html lang"en"><h…...

编程日记 2023/8/30 8:42:49

list对象中如何根据对象中某个属性去重使用Java8流实现

list对象中如何根据对象中某个属性去重使用Java8流实现? 在 Java 8 的流操作中，可以使用 distinct 方法来对一个对象流进行去重，但是默认情况下它会使用对象的 equals() 方法来判断重复。如果你希望根据对象的某个属性进行去重，则可以使用 …...

编程日记 2023/8/30 8:41:48

2023 在Windows上的安装Faiss-GPU（使用anaconda）

该方法安装完 faiss-gpu 之后，不仅会装这个库，还会装很多依赖库。为了防止自己本地一些同名库的版本被修改，建议新建一个虚拟环境来安装。如果本地库版本修改对自己没影响，也可以忽略。你好，我是悦创。登录网站&…...

编程日记 2023/8/30 8:40:46

HTML及CSS入门及精通

前言 HTML（超文本标记语言）和CSS（层叠样式表）是构建网页的两个基本技术。HTML用于定义网页的结构和内容，而CSS用于控制网页的样式和布局。本教程将介绍HTML和CSS的入门知识，并逐步引导您掌握更高级的技巧和…...

编程日记 2023/8/30 8:39:45

frp实现二级代理

kali是攻击机 （192.168.0.106） windows server2012是边界服务器，拥有两个网卡，作为一级代理， （192.168.0.108，10.10.10.136） ad01是内网机器，不出网 （10.10.1…...

编程日记 2023/8/30 8:38:43

Vue组件设置背景色

vh：浏览器视区高度百分值 wh：浏览器视区宽度百分值 min-height：最小高度，其他时候自适应给组件根标签设置：min-height：100vh，就可以正常添加背景色，而且背景色随内容展开而自适…...

编程日记 2023/8/30 8:37:41

Java+Github+Jenkins部署

Java项目—Jenkins部署笔记一，准备一台服务器操作系统，示例为ubuntu 22.0.4 可运行lsb_release -a查看二，安装 docker 更新软件包列表： sudo apt update安装必要的软件包，以便使用HTTPS通过APT下载软件包&#x…...

编程日记 2023/8/30 8:36:40

vue使用命令npm install 报错 cb() never called!

一.错误说明,npm本身下载就慢，有可能是网络的问题。二.解决方案,把npm设置成淘宝镜像后,再重新npm install npm config set registry https://registry.npm.taobao.org 三.还是不行，还会出现同样的问题，那接下来先清理一下npm缓存 npm cache…...

编程日记 2023/8/30 8:35:39

什么是LatexEasy及其在数学排版中的作用

LatexEasy是一种强大的排版系统，特别擅长处理数学公式和科技文档。它基于 TeX，是由计算机科学家 Donald Knuth 开发的。LaTeX 可以让你专注于内容，而不必过多关心排版细节，特别适用于数学家、工程师和科学研究者。什么是 LaTeX&…...

编程日记 2023/8/30 8:34:38

axios 和fetch的取舍，以及比较

废话不多说，直接直捣黄龙： 区别相同点都是一种基于promise的异步解决方案。都可以解决回调地狱问题不同点 axios是一个封装好的库，需要npm进行安装，fetch是es6新增的api 语法： fetch(url, { method: GET, // o…...

编程日记 2023/8/30 8:33:37

K-Means（K-均值）聚类算法理论和实战

目录 K-Means 算法 K-Means 术语 K 值如何确定 K-Means 场景美国总统大选摇争取摆选民电商平台用户分层给亚洲球队做聚类编辑其他场景 K-Means 工作流程 K-Means 开发流程 K-Means的底层代码实现 K-Means 的评价标准 K-Means 算法对于 n 个样本点来说&am…...

编程日记 2023/8/30 8:32:35

Python-pyqt不同窗口数据传输【使用静态函数】

文章目录前言程序1：caogao1.py输入数据界面程序2：caogao2.py接收数据界面程序3 ：将输入数据界面和接收数据界面组合成一个总界面讲解总结前言在编写pyqt 页面时有时候需要不同页面进行数据传输。本文讲解静态函数方法。直接看示例。程…...

编程日记 2023/8/30 8:31:33

百度垂类离线计算系统发展历程

作者 | 弘远君导读本文以百度垂类离线计算系统的演进方向为主线，详细描述搜索垂类离线计算系统发展过程中遇到的问题，以及对应的解决方案。架构演进过程中一直奉行“没有最好的架构，只有最合适的架构”的宗旨，面对不同阶段遇到的…...

编程日记 2023/8/30 8:30:32

ubuntu 安装指定版本：nodejs

通过 PPA 安装指定或最新版本的 nodejs 那么就需要使用 nodesource 来安装指定版本的 nodejs 了。其需要下载一个脚本，运行此脚本会在 ubuntu 里添加一个 nodejs 源，然后用 apt 就可以下载指定的 nodejs 了。 PPA 的全称为 personal package archive 。要…...

编程日记 2023/8/30 8:29:31

16.CSS菜单悬停特效

效果源码 <!DOCTYPE html> <html> <head> <title>Creative Menu Item Hover Effects</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body><section><…...

编程日记 2023/8/30 8:28:29

恒运资本：市盈率怎么算？

市盈率（P/E ratio）是判别一家公司股票价格合理性的一个重要目标，也是投资者评估公司股票投资价值的重要参阅目标。市盈率越高，表明相对于公司的收益来说，该公司的股票定价越高。市盈率越低，则表明该股票被低…...

编程日记 2023/8/30 8:27:28

Docker运维中常见错误以及解决方法汇总1

1.报错如下: Another app is currently holding the yum lock; waiting for it to exit... 另一个应用程序是：PackageKit 原因:另一个APP正在锁定yum,等待其退出！解决:执行指令 rm -f /var/run/yum.pid 2.CentOS7设置静态的IP且可以上网...

编程日记 2023/8/30 8:26:26

Maven - 使用maven-release-plugin规范化版本发布

文章目录 Maven Release plugin – IntroductionMaven Release plugin – Plugin DocumentationMaven Release plugin – Usage实战案例 Maven Release plugin – Introduction Maven Release Plugin（Maven 发布插件）是一个用于帮助在Maven项目中执行版…...

编程日记 2023/8/30 8:25:25

2023.8.29 关于性能测试

目录什么是性能测试？ 性能测试常见术语及其性能测试衡量指标并发用户数响应时间事务点击率吞吐量思考时间资源利用率性能测试分类基准性能测试负载性能测试压力性能测试可靠性性能测试性能测试执行流程什么是性能测试？ 性…...

编程日记 2023/8/30 8:24:23

基于MATLAB的径向基函数插值（RBF插值）（一维、二维、三维）

基于MATLAB的径向基函数插值（RBF插值）（一维、二维、三维） 0 前言1 RBF思路2 1维RBF函数2.1 参数说明2.1.1 核函数选择2.1.2 作用半径2.1.3 多项式拟合2.1.4 误差项（光滑项） 3 2维RBF函数4 3维RBF函数惯例声…...

编程日记 2023/8/30 8:23:21

flume拦截器

flume拦截器代码 1.依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apach…...

编程日记 2023/8/30 8:22:19

vue、elementui控制前一级选择后，后一级才会有数据

<el-form-item label"废物类型："><el-select clearable v-model"queryForm.hswCateType" placeholder"请选择" change"industryCategoryChange" focus"industryCategoryFocus"><el-option v-for&…...

编程日记 2023/8/30 8:21:18

亲测influxdb安装为window后台服务

InfluxDB 安装 64bit：https://dl.influxdata.com/influxdb/releases/influxdb-1.7.4_windows_amd64.zip 解压安装包修改配置文件 [meta]# Where the metadata/raft database is storeddir "D:/influxdb/meta"...[data]# The directory where the TSM…...

编程日记 2023/8/30 8:20:17

【LeetCode - 每日一题】823. 带因子的二叉树（2023.08.29）

823. 带因子的二叉树题意元素都大于1，元素不重复。计数满足要求的二叉树（每个非叶结点的值应等于它的两个子结点的值的乘积）的数量。元素可以重复使用。代码自上而下动态规划。所有元素大于1，所以不会有自己自己自己的…...

编程日记 2023/8/30 8:19:16

flutter 上传图片并裁剪

1.首先在pubspec.yaml文件中新增依赖pub.dev image_picker: ^0.8.75 image_cropper: ^4.0.1 2.在Android的AndroidManifest.xml文件里面添加权限 <activityandroid:name"com.yalantis.ucrop.UCropActivity"android:screenOrientation"portrait"andro…...

编程日记 2023/8/30 8:18:14

一台服务器上部署 Redis 伪集群

哈喽大家好，我是咸鱼今天这篇文章介绍如何在一台服务器（以 CentOS 7.9 为例）上通过 redis-trib.rb 工具搭建 Redis cluster （三主三从） redis-trib.rb 是一个基于 Ruby 编写的脚本，其功能涵盖了创建、管…...

编程日记 2023/8/30 8:17:13

ealtek高清晰音频管理器(realtek高清晰音频管理器怎么设置win10)

本文为大家介绍realtek高清晰音频管理器(realtek高清晰音频管理器怎么设置win10)，下面和小编一起看看详细内容吧。我们都使用电脑来听音乐、看电影或者进行其他操作，但是如果我们觉得电脑产生的音效不够立体，我们就会想要去Realtek来设置音…...

编程日记 2023/8/30 8:16:11

微信小程序 scroll-view 组件的 bindscroll 不触发不生效

使用微信小程序基础组件中的scroll-view，但是滑动的时候 bindscroll 一直不生效。 <view class"container log-list"><scroll-view scroll-y style"height:100%;white-space:nowrap;" scroll-into-view"{{toView}}" enable…...

编程日记 2023/8/30 8:15:10

datax 删除分区数据，再写入MySQL脚本

#! /bin/bashDATAX_HOME/opt/module/datax#1、判断参数是否传入 if [ $# -lt 1 ] thenecho "必须传入all/表名..."exit fi #2、判断日期是否传入 [ "$2" ] && datestr$2 || datestr$(date -d -1 day %F)#DataX导出路径不允许存在空文件&#xff0c…...

编程日记 2023/8/30 8:14:09

hyperf 十四国际化

一安装 composer require hyperf/translation:v2.2.33 二配置 1、设置语言文件文件结构： /storage/languages/en/messages.php /storage/languages/zh_CH/messages.php // storage/languages/en/messages.php return [welcome > Welcome to our applicat…...

编程日记 2023/8/30 8:13:07

哪个网站可有做投票搭建/网店推广是什么

2019独角兽企业重金招聘Python工程师标准>>> 一、关于AndroidManifest.xml AndroidManifest.xml 是每个android程序中必须的文件。它位于整个项目的根目录，描述了package中暴露的组件（activities, services, 等等）&#xf…...

编程日记 2024/11/11 14:55:56

wordpress复制插件/株洲seo排名

怎么不能修改了?给个带测试的#! /usr/bin/env python# -*- coding: cp936 -*-import randomfrom mytictoc import tic, tocdef randDiff( k,n ):产生k个不相等的从1到n的随机数p []y1 [random.randrange(1,n1) for i in range(n)]y2 []y2.extend(y1)y1.sort()for j in rang…...

编程日记 2024/11/11 14:26:08