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>
  • 35
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要实现HTML的3D倒计时,可以使用CSS3的3D变换JS的计时器来实现。以下是一个简单的实现示例: HTML代码: ```html <div class="countdown"> <div class="box"> <div class="side front"> <span id="days">00</span> <span>Days</span> </div> <div class="side back"> <span id="hours">00</span> <span>Hours</span> </div> <div class="side top"> <span id="minutes">00</span> <span>Minutes</span> </div> <div class="side bottom"> <span id="seconds">00</span> <span>Seconds</span> </div> <div class="side left"></div> <div class="side right"></div> </div> </div> ``` CSS代码: ```css .countdown { perspective: 800px; margin: 50px auto; width: 300px; height: 300px; } .box { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: rotate 1s linear infinite; } .side { position: absolute; width: 100%; height: 100%; background-color: #333; font-size: 40px; color: #fff; text-align: center; line-height: 300px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); } .front { transform: rotateY(0deg) translateZ(150px); } .back { transform: rotateY(180deg) translateZ(150px); } .top { transform: rotateX(-90deg) translateZ(150px); } .bottom { transform: rotateX(90deg) translateZ(150px); } .left { transform: rotateY(-90deg) translateZ(150px); } .right { transform: rotateY(90deg) translateZ(150px); } @keyframes rotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } ``` JS代码: ```js function countdown() { var now = new Date(); var eventDate = new Date("2022-01-01"); var currentTime = now.getTime(); var eventTime = eventDate.getTime(); var remTime = eventTime - currentTime; var seconds = Math.floor(remTime / 1000); var minutes = Math.floor(seconds / 60); var hours = Math.floor(minutes / 60); var days = Math.floor(hours / 24); hours %= 24; minutes %= 60; seconds %= 60; document.getElementById("days").innerHTML = days; document.getElementById("hours").innerHTML = hours; document.getElementById("minutes").innerHTML = minutes; document.getElementById("seconds").innerHTML = seconds; setTimeout(countdown, 1000); } countdown(); ``` 在上面的代码中,我们使用了CSS3的3D变换来创建一个带有6个面的盒子,然后使用JS的计时器来计算剩余时间,并将其更新到对应的面上。最后,我们使用CSS的动画来使盒子无限旋转。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

桔梗.py

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值