WEB前端3D变换效果以及如何应用js代码

WEB前端DAY8

变换效果3d

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{/* 视距:设置距离xy轴构成的平面有多少像素距离 */perspective: 500px;}div{/* 设置变化效果为3d */transform-style: preserve-3d;width: 100px;height: 100px;border: 1px solid red;/* margin: 100px; *//* translateXYZ分别让标签在xyz轴上发生位移 *//* transform: translateZ(100px); *//*  三个参数分别是xyz轴上的位移*//* transform: translate3d(200px,100px,500px); *//* transform: rotateX(45deg); *//* transform: rotateY(45deg); *//* transform: rotateZ(90deg); */}</style></head><body><div></div></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div>img{width: 100px;height: 100px;position: absolute;transition: 3s;}body{perspective: 500px;}div{margin:200px;width: 100px;height: 100px;border: 1px solid red;transform-style: preserve-3d;position: relative;}.container:hover>img:first-child{top: -100px;transform-origin: bottom;transform: rotateX(-90deg);}.container:hover>img:nth-child(2){top: 100px;transform-origin: top;transform: rotateX(90deg);}.container:hover>img:nth-child(3){left: -100px;transform-origin: right;transform:rotateY(90deg)}.container:hover>img:nth-child(4){left: 100px;transform-origin: left;transform: rotateY(-90deg);}.container:hover>img:last-child{transform: translateZ(100px);}.container:hover{transform: rotate3d(1,1,1,45deg);}.container{transition: 3s;}</style></head><body><div class="container"><img src="./img/11.webp" alt=""><img src="./img/22.jpeg" alt=""><img src="./img/33.jpeg" alt=""><img src="./img/44.jpeg" alt=""><img src="./img/55.webp" alt=""><img src="./img/66.jpeg" alt=""></div></body>
</html>

过渡属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span,div{width: 100px;height: 100px;border: 1px solid red;transition:2s width linear 1000ms;}span:hover,div:hover{width: 200px;height: 200px;background-color: black;}span{display: inline-block;}</style></head><body><div></div><span></span></body>
</html><!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span,div{width: 100px;height: 100px;border: 1px solid red;transition:2s width linear 1000ms;}span:hover,div:hover{width: 200px;height: 200px;background-color: black;}span{display: inline-block;}</style></head><body><div></div><span></span></body>
</html>

动画

@keyframe :动画名称{from{}to{}
}

JavaScript

首先JavaScript是一个动态的解释型编程语言。

所谓动态就是指,代码在运行时变量的数据类型可以发生变化。(静态就想类似c、java、go这种语言他们需要创建变量时就确定变量的数据类型,并且不可随意更改)

所谓的解释型语言,是指代码运行时不需要生成任何可执行文件,代码通过解释器转化为二进制数据交给cpu运行,并且解释型语言通常是一行一行运行的。(编译型是生成可执行文件,通过运行可执行文件达到执行代码的目的)

如何在html引入js代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/new_file.css"><!-- js的第三种书写方式外链式 --><script src="./js/new_file.js"></script></head><body><!-- 第二种js的代码书写方式 行内样式 --><!-- <button οnclick="alert('hello world')">按钮</button> --><!-- 书写JS代码的第一种方式 页面样式 --><script></script></body>
</html>

三种弹框

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/new_file.css"></head><body><!-- 第一种弹框警告框,向用户展示信息 --><!-- <button οnclick="alert('hello world')">按钮</button> --><script>// <!-- 第二种弹框,确认框可以根据用户的选择获取返回值 -->// flag = confirm("你是困困的粉丝吗")// if(flag){// 	console.log("太好了,我也是")// }else{// 	console.log("滚粗,小黑子!");// }// 第三种弹框prompt 第一个参数是提示信息 第二个参数是默认值// 谨慎使用 xss攻击经常攻击的目标// str = prompt("请输入你的年龄","18");// console.log(str)</script></body>
</html>

如何创建变量

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/new_file.css"></head><body><script>// c中如何创建变量// int 变量名 要么是 float string 。。。// js中有三种创建的方式// 第一种无声明 创建的变量他事全局的// function fun(){// 	name = "string"// }// fun()// console.log(name)// 第二种使用var关键字创建变量 // console.log(name)// var name = "string"// name = "string2"// console.log(name)// var具有声明提升作用 上面的代码等价于下面的代码// var name="string"// console.log(name)// name = "string2"// console.log(name)// 第三种使用let创建变量 块级别// function fun(){// 	if(0 == 0){// 		var age = "123"// 	}// 	console.log(age)// }// fun()// console.log(age)// var 和 let的区别// 1.let的最小作用域是块级别 出了块 变量就无法访问// var的变量最小作用域是函数级别 也就说var即使在代码块中创建只要在函数中都可以正常访问// 2.var可以重复的重建变量 let不可以// 3.var具备声明提升的效果 let不可以// let a = 1// console.log(a)// let a = 2// console.log(a)// let a = 3// console.log(a)</script></body>
</html>

变量的命名规范

  • 数字大小写字母以及下划线,$。
  • 变量命名首字母不能是数字
  • 不能使用关键字或者保留字来命名变量
  • 变量命名时应具备具体含义,浙江有效提高代码的可读性
  • 官方推荐小驼峰命名法或者下划线命名法
  • 创建常量的时候要每一个字母都大写,并且使用const关键字

数据类型

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/new_file.css"></head><body><script>//c中数据类型大概有这些int short char long float longlong double unshort...//js中基本数据类型 Number(int float double)、 Boolean、String、undefined、NaN、// 引用类型:Array数组类型 object对象类型let a = 100 / "a"console.log(a)</script></body>
</html>

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

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

相关文章

开源项目_大模型应用_Chat2DB

1 基本信息 项目地址&#xff1a;https://github.com/chat2db/Chat2DBStar&#xff1a;10.7K 2 功能 Chat2DB 是一个智能且多功能的 SQL 客户端和报表工具&#xff0c;适用于各种数据库。 对于那些平时会用到数据库&#xff0c;但又不是数据库专家的程序员来说&#xff0c;…

9月大湾区塑料橡胶工业博览会,佛山潭洲国际会展中心

PLAS SHOW 2024大湾区塑料橡胶工业博览会 时间&#xff1a;2024年9月5日-7日 地点&#xff1a;佛山潭洲国际会展中心 中国大型塑料橡胶展&#xff0c;全国塑料橡胶产品的优选平台 共同塑造未来&#xff0c;双循环协作发展 大湾区塑料机械展|大湾区橡胶机械展|大湾区注塑机…

盘点几种有线扩展Wifi覆盖范围方式的优缺点

前言 前几天小白到一个朋友的家里&#xff0c;发现她家的主路由是放在玄关的。 这个方式就导致了她家三个卧室的Wifi信号都很弱。 她叫我过去帮忙弄一下网络的问题&#xff0c;这个对于有一点电脑知识的小伙伴来说&#xff0c;基本上不是什么难事&#xff0c;因为每个房间基本…

AVL树底层实现

目录 AVL树简介 AVL树节点定义​编辑 AVL树特性 AVL树的建立 AVL树的插入 AVL树的旋转 验证AVL树 AVL树的实现&#xff08;代码部分&#xff09; AVL树简介 AVL树是对二叉搜索树的改进&#xff0c;二叉搜索树虽可以缩短查找的效率&#xff0c;但如果数据有序或接近有序…

PDsehell16连接pgsql出现“Could not initialize JavaVM“时的解决步骤

问题原因:PowerDesigned16是32位的&#xff0c;只能使用32位的JDK来运行JDBC驱动 解决方案&#xff1a; 一、弄一个32为jdk的免安装包 二、 接下来就是配置系统环境变量了&#xff08;注意是系统不是用户环境变量&#xff09; JAVA_HOME配置刚刚32位的存放地址&#xff0c; …

(二十四)Kubernetes系列之Helm3

Helm为kubernetes的包管理工具&#xff0c;就像Linux下的包管理器&#xff08;yum/apt等&#xff09;&#xff0c;可以很方便的将之前打包好的yaml文件部署到kubernetes上。 1.安装访问地址&#xff1a;https://github.com/helm/helm/releases 点击查看最新的版本&#xff0c…

文件操作与IO(3)

文件内容的读写--数据流 这里我们将要讲到文件操作中的重要概念--流. 之前也在C语言讲解中提到了文件流的概念---读写文件内容 分为这几步:(1)打开文件;(2)读/写文件;(3)关闭文件. 数据流主要分为字节流和字符流. 字节流:以字节为单位进行读写(代表:InputStream,OutputStrea…

【Java网络编程01】网络原理初识

【Java网络编程01】网络原理初识 1. 网络通信基础概念 网络通信&#xff1a;网络互连的目的就是网络通信&#xff0c;即网络数据传输&#xff0c;再直白点而言就是不同主机的不同进程之间基于网络进行数据的传输交互。 那么&#xff0c;在组建的网络上有各种各样的主机&#…

Python量化交易- mplfinance库 -画K线图

mplfinance库 1. mplfinance 模块说明2. mplfinance安装3. mplfinance 模块 plot 基本用法参数typestylemake_addplot设置图表颜色 make_marketcolors添加图表样式 make_mpf_style 4. mplfinance 的基本K线图实现自定义风格和颜色图表尺寸调整、相关信息的显示添加完整移动平均…

Vue 实例创建流程

✨ 专栏介绍 在当今Web开发领域中&#xff0c;构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架&#xff0c;正是为了满足这些需求而诞生。它采用了MVVM架构模式&#xff0c;并通过数据驱动和组件化的方式&#xff0c;使…

CentOs7 安装Mysql(5.7和8.0版本)密码修改跳过 超详细教程

CSDN 成就一亿技术人&#xff01; 今天出一期Centos下安装Mysql&#xff08;详细教程&#xff09;包括数据库密码跳过修改 CSDN 成就一亿技术人&#xff01; 目录 1.获取安装包 2.安装程序 安装下载的rpm包 查看安装包 修改5.7版本&#xff08;重要&#xff09; 安装M…

设置代码模板创建sql映射文件、Mybatis主配置文件

目录 1、Sql映射&#xff08;Sql Mapper&#xff09;文件的介绍 2、Mybatis的主配置文件的介绍 3、通过代码模板创建Sql映射文件 4、通过代码模板创建Mybatis主配置文件 1、Sql映射&#xff08;Sql Mapper&#xff09;文件的介绍 <?xml version"1.0" encod…

太太二字的由来?

“太太”这个称谓的由来可以追溯到周朝时期的“周室三母”。这三位贤妃分别是太姜、太任和太姒。她们以母仪天下的德范&#xff0c;养育和辅佐了开创太平盛世的数位君王&#xff0c;成为了夫君的良佐、胎教的典范。因此&#xff0c;后世尊称别人的妻子为“太太”&#xff0c;以…

jwt和token区别是什么

jwt和token区别为主要体现在接收的信息是否需要进入数据库查询信息&#xff1b; Token需要查库验证token 是否有效&#xff0c;而JWT不用查库&#xff0c;直接在服务端进行校验&#xff0c;因为用户的信息及加密信息&#xff0c;和过期时间&#xff0c;都在JWT里&#xff0c;只…

竹子 题解

更好的阅读体验 竹子 题解 赛题来自 OIFHA 第四场模拟赛。 原题展现 青蛙哥种了 n n n 棵竹子&#xff0c;一开始第 i i i 棵竹子的高度为 h i h_i hi​&#xff0c;每天会长高 a i a_i ai​。由于竹子长得太快&#xff0c;青蛙哥不得不砍掉一些竹子&#xff0c;但是&a…

13.XXL-JOB应用

XXL-JOB应用 1.介绍 XXL-JOB是大众点评员工徐雪里于2015年发布的分布式任务调度平台 2.XXL-JOB与Quartz的关系 老版本依赖Quartz的定时任务触发&#xff0c;在V2.1.0版本开始移除了Quartz 3.官方地址 官方文档&#xff1a;https://www.xuxueli.com/xxl-job/gitee&#xf…

面试经典 150 题 - 多数元素

多数元素 给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例 1&#xff1a; 输入&#xff1a;nums [3,2,3] 输出&#xff1…

搜索引擎优化:利用Python爬虫实现排名提升

什么是搜索引擎优化&#xff08;SEO&#xff09; 搜索引擎优化&#xff08;SEO&#xff09;是通过优化网站内容和结构&#xff0c;提高网站在搜索引擎中的排名&#xff0c;从而增加网站流量和曝光度的技术和方法。SEO的目标是使网站在搜索引擎结果页面中获得更高这个过程包括吸…

windows11上安装虚拟机VMware

1、安装虚拟机&#xff08;待补充&#xff09; 第二步&#xff1a;安装VMware tools 实现windows文件上传到虚拟机中 1、安装好虚拟机后&#xff0c;查看虚拟机ip用Xshell连接虚拟机&#xff0c;并安装VMware tools(只有安装了VMware tools才能实现虚拟机和本机的文件共享。在…

python:socket基础操作(2)-《udp发送信息》

基础发送udp信息 1.导入socket模块 2.使用udp模块 3.发送内容 4.关闭套接字 很简单的4步就可以实现udp的消息发送 import socket # 导入模块udp_socket socket.socket(socket.AF_INET,socket.SOCK_DGRAM) # 使用ipv4 udp协议udp_socket.sendto(b"hello world",(&…