CSS3D+动画

CSS3D

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

1.css3D

  1. 给父元素设置

    • perspective:景深:近大远小的效果900-1200px这个范围内

    • transform-style:是否设置3D环境

      flat 2D环境 默认值

      perserve-3D环境

  2. 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:前者需要触发方式,后者页面一加载完就立即执行

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

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

相关文章

linux下载安装jdk

1.java安装unzip,zip yum install -y unzip zip 2.安装vim yum -y install vim* Linux-jdk1.8下载地址点击下载 jdk1.8-linux 提取码&#xff1a;h40h 1、将安装包上传至Linux服务器 2、创建安装文件夹 创建install mkdir -p /export/install3、解压到install文件夹中 tar…

13.搬砖

目录 题目 Description Input Output 思路&#xff08;归并排序&#xff09; 具体步骤如下 C整体代码&#xff08;含详细注释&#xff09; 归并排序总结 核心步骤 代码模板 题目 Description 小张在暑假时间来到工地搬砖挣钱。包工头交给他一项艰巨的任务&#xff0…

Royal TSX 6 Mac多协议远程软件

Royal TSX是一款功能强大的远程桌面管理软件&#xff0c;适用于Mac操作系统。它允许用户通过一个集成的界面来管理和访问多个远程计算机和服务器。 Royal TSX支持多种远程协议&#xff0c;包括RDP、VNC、SSH、Telnet和FTP等&#xff0c;可以方便地连接到Windows、Linux、Mac和其…

非煤矿山风险监测预警算法 yolov8

非煤矿山风险监测预警算法通过yolov8网络模型深度学习算法框架&#xff0c;非煤矿山风险监测预警算法在煤矿关键地点安装摄像机等设备利用智能化视频识别技术&#xff0c;能够实时分析人员出入井口的情况&#xff0c;人数变化并检测作业状态。YOLO的结构非常简单&#xff0c;就…

ios开发 swift5 苹果系统自带的图标 SF Symbols

文章目录 1.官网app的下载和使用2.使用代码 1.官网app的下载和使用 苹果官网网址&#xff1a;SF Symbols 通过上面的网址可以下载dmg, 安装到自己的mac上 貌似下面这样不能展示出动画&#xff0c;还是要使用动画的代码 .bounce.up.byLayer2.使用代码 UIKit UIImage(system…

解决报错Java: 非法字符: ‘\ufeff‘

方法一&#xff1a;直接remove BOM&#xff0c;再重新启动程序。 方法二&#xff1a;用notpad打开&#xff0c;点击编码为utf-8格式&#xff0c;保存。

GrapeCity Documents V6.0 Update 2发布,新增支持SpreadJS的.sjs文件格式

近日&#xff0c;GrapeCity Documents 正式迎来其V6.2 的发布更新&#xff0c;能够支持 SpreadJS 中 .sjs 类型的文件。这一重大更新将为用户带来更多地惊喜。 .sjs文件有两个关键优势&#xff1a;空间更小且导入导出速度更快。通过采用 .sjs格式&#xff0c;GcExcel实现了更高…

PO设计模式是selenium自动化测试中最佳的设计模式之一

Page Object Model&#xff1a;PO设计模式是selenium自动化测试中最佳的设计模式之一&#xff0c;主要体现在对界面交互细节的封装&#xff0c;也就是在实际测试中只关注业务流程就OK了传统的设计中&#xff0c;在新增测试用例之后&#xff0c;代码会有以下几个问题&#xff1a…

maven部署

一、下载Maven 地址&#xff1a;Maven – Download Apache Maven 二、解压缩&#xff0c;设置环境变量 tar -xvf apache-maven-3.8.8-bin.tar.gz export MAVEN_HOME/opt/apache-maven-3.8.8 export PATH$MAVEN_HOME/bin:$PATH echo $MAVEN_HOME echo $PATH mvn -v

Stable Diffusion Web UI的原理与使用

Stable Diffusion是一套基于Diffusion扩散模型生成技术的图片生成方案&#xff0c;随着技术的不断发展以及工业界对这套工程细节的不断优化&#xff0c;使其终于能在个人电脑上运行&#xff0c;本文将从github下载开始讲一讲如何使用Stable Diffusion Web UI进行AI图像的生成。…

水稻叶病害数据集(目标检测,yolo使用)

1.数据集文件夹 train文件夹&#xff08;44229张&#xff09;&#xff0c;test文件夹&#xff08;4741张&#xff09;&#xff0c;valid文件夹&#xff08;6000张&#xff09; 2.train文件夹展示 labels展示 标签txt展示 data.yaml文件展示 对数据集感兴趣的可以关注最后一行…

网络安全法+网络安全等级保护

网络安全法 2014年2月&#xff0c;中央网络安全和信息化领导小组成立&#xff0c;习主席当组长 2017年6月1日&#xff0c;网络安全法正式成立 网络安全是国家安全的重要组成部分没有网络安全就没有国家安全&#xff0c;没有信息化就没有现代化 网络安全法21条 网络安全法31条 …

[C/C++]天天酷跑游戏超详细教程-上篇

个人主页&#xff1a;北海 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏✨收录专栏&#xff1a;C/C&#x1f91d;希望作者的文章能对你有所帮助&#xff0c;有不足的地方请在评论区留言指正&#xff0c;大家一起学习交流&#xff01;&#x1f9…

视频剪辑音效处理软件有哪些?视频剪辑软件那个好用

音效是视频剪辑的重要部分&#xff0c;能起到画龙点睛的作用。在短视频平台中&#xff0c;一段出彩的音效能将原本平平无奇的视频变得生动有趣。那么&#xff0c;视频剪辑音效处理软件有哪些&#xff1f;本文会给大家介绍好用的音效处理软件&#xff0c;同时也会介绍视频剪辑音…

危险的套娃:攻击者在 PDF 文件中隐藏恶意Word 文档

据BleepingComputer消息&#xff0c;日本计算机紧急响应小组 (JPCERT) 日前分享了在2023 年 7 月检测到的利用PDF文档的新型攻击——PDF MalDoc攻击&#xff0c;能将恶意 Word 文件嵌入 PDF 来绕过安全检测。 JPCERT采样了一种多格式文件&#xff0c;能被大多数扫描引擎和工具识…

如何使用CSS实现一个带有动画效果的进度条?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ HTML 结构&#xff1a;⭐ CSS 样式&#xff1a;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那…

自然语言处理2-NLP

目录 自然语言处理2-NLP 如何把词转换为向量 如何让向量具有语义信息 在CBOW中 在Skip-gram中 skip-gram比CBOW效果更好 CBOW和Skip-gram的算法实现 Skip-gram的理想实现 Skip-gram的实际实现 自然语言处理2-NLP 在自然语言处理任务中&#xff0c;词向量&#xff08;…

运维Shell脚本小试牛刀(一)

运维Shell脚本小试牛刀(一) 运维Shell脚本小试牛刀(二) 一: Shell中循环剖析 for 循环....... #!/bin/bash - # # # # FILE: countloop.sh # USAGE: ./countloop.sh # DESCRIPTION: # OPTIONS: ------- # …

c++ boost::json

Boost社区12月11日发布了1.75版本&#xff0c;在之前&#xff0c;​​Boost使用Boost.PropertyTree解析​​JSON​​​&#xff0c;​​XML​​​&#xff0c;​​INI​​​和​​INFO​​​格式的文件。但是由于成文较早及需要兼容其他的数据格式&#xff0c;相比较于其他的​…

秒懂算法2

视频链接 : 希望下次秒懂的是算法题_哔哩哔哩_bilibili P1094 [NOIP2007 普及组] 纪念品分组 原题链接 : [NOIP2007 普及组] 纪念品分组 - 洛谷 思路 : 排序 贪心 双指针首先先对输入进来的数组进行排序(由小到大)运用贪心的思想 : 前后结合,令l1,rn,若a[l]a[r]<w…