WEB前端DAY8
變換效果3d
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
/* 視距：設(shè)置距離xy軸構(gòu)成的平面有多少像素距離 */
perspective: 500px;
}
div{
/* 設(shè)置變化效果為3d */
transform-style: preserve-3d;
width: 100px;
height: 100px;
border: 1px solid red;
/* margin: 100px; */
/* translateXYZ分別讓標(biāo)簽在xyz軸上發(fā)生位移 */
/* transform: translateZ(100px); */
/* 三個(gè)參數(shù)分別是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>
動(dòng)畫
@keyframe ：動(dòng)畫名稱{
from{}
to{}
}
JavaScript
首先JavaScript是一個(gè)動(dòng)態(tài)的解釋型編程語言。
所謂動(dòng)態(tài)就是指，代碼在運(yùn)行時(shí)變量的數(shù)據(jù)類型可以發(fā)生變化。（靜態(tài)就想類似c、java、go這種語言他們需要?jiǎng)?chuàng)建變量時(shí)就確定變量的數(shù)據(jù)類型，并且不可隨意更改）文章來源：http://www.zghlxwxcb.cn/news/detail-817430.html
所謂的解釋型語言，是指代碼運(yùn)行時(shí)不需要生成任何可執(zhí)行文件，代碼通過解釋器轉(zhuǎn)化為二進(jìn)制數(shù)據(jù)交給cpu運(yùn)行，并且解釋型語言通常是一行一行運(yùn)行的。（編譯型是生成可執(zhí)行文件，通過運(yùn)行可執(zhí)行文件達(dá)到執(zhí)行代碼的目的）文章來源地址http://www.zghlxwxcb.cn/news/detail-817430.html
如何在html引入js代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/new_file.css">
<!-- js的第三種書寫方式外鏈?zhǔn)?-->
<script src="./js/new_file.js"></script>
</head>
<body>
<!-- 第二種js的代碼書寫方式 行內(nèi)樣式 -->
<!-- <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>
// <!-- 第二種彈框，確認(rèn)框可以根據(jù)用戶的選擇獲取返回值 -->
// flag = confirm("你是困困的粉絲嗎")
// if(flag){
// console.log("太好了，我也是")
// }else{
// console.log("滾粗，小黑子！");
// }
// 第三種彈框prompt 第一個(gè)參數(shù)是提示信息 第二個(gè)參數(shù)是默認(rèn)值
// 謹(jǐn)慎使用 xss攻擊經(jīng)常攻擊的目標(biāo)
// str = prompt("請輸入你的年齡","18");
// console.log(str)
</script>
</body>
</html>
如何創(chuàng)建變量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/new_file.css">
</head>
<body>
<script>
// c中如何創(chuàng)建變量
// int 變量名 要么是 float string 。。。
// js中有三種創(chuàng)建的方式
// 第一種無聲明 創(chuàng)建的變量他事全局的
// function fun(){
// name = "string"
// }
// fun()
// console.log(name)
// 第二種使用var關(guān)鍵字創(chuàng)建變量
// console.log(name)
// var name = "string"
// name = "string2"
// console.log(name)
// var具有聲明提升作用 上面的代碼等價(jià)于下面的代碼
// var name="string"
// console.log(name)
// name = "string2"
// console.log(name)
// 第三種使用let創(chuàng)建變量 塊級(jí)別
// function fun(){
// if(0 == 0){
// var age = "123"
// }
// console.log(age)
// }
// fun()
// console.log(age)
// var 和 let的區(qū)別
// 1.let的最小作用域是塊級(jí)別 出了塊 變量就無法訪問
// var的變量最小作用域是函數(shù)級(jí)別 也就說var即使在代碼塊中創(chuàng)建只要在函數(shù)中都可以正常訪問
// 2.var可以重復(fù)的重建變量 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>
變量的命名規(guī)范
- 數(shù)字大小寫字母以及下劃線，$。
- 變量命名首字母不能是數(shù)字
- 不能使用關(guān)鍵字或者保留字來命名變量
- 變量命名時(shí)應(yīng)具備具體含義，浙江有效提高代碼的可讀性
- 官方推薦小駝峰命名法或者下劃線命名法
- 創(chuàng)建常量的時(shí)候要每一個(gè)字母都大寫，并且使用const關(guān)鍵字
數(shù)據(jù)類型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/new_file.css">
</head>
<body>
<script>
//c中數(shù)據(jù)類型大概有這些int short char long float longlong double unshort...
//js中基本數(shù)據(jù)類型 Number(int float double)、 Boolean、String、undefined、NaN、
// 引用類型：Array數(shù)組類型 object對象類型
let a = 100 / "a"
console.log(a)
</script>
</body>
</html>
到了這里，關(guān)于WEB前端3D變換效果以及如何應(yīng)用js代碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
