當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

零基础学前端之css3高级特效

發(fā)布時(shí)間：2024/1/23 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了零基础学前端之css3高级特效小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

css3高級(jí)特效

1、本章目標(biāo)

掌握2D轉(zhuǎn)換對元素進(jìn)行移動(dòng)、旋轉(zhuǎn)、縮放和傾斜

掌握在3D空間中改變元素的形狀、位置和大小

2、2D轉(zhuǎn)換方法

移動(dòng)：translate()
旋轉(zhuǎn)：rotate()
縮放：scale()
傾斜：skew()

2D轉(zhuǎn)換

屬性：transform
作用：對元素進(jìn)行移動(dòng)、旋轉(zhuǎn)、縮放、傾斜
語法：transform: none | transform-functions;

3、2D移動(dòng)

設(shè)定元素從當(dāng)前位置移動(dòng)至給定的位置（x坐標(biāo) y坐標(biāo)）

方法說明

translate(x,y)	2D轉(zhuǎn)換，沿X和Y軸移動(dòng)元素
translateX(n)	2D轉(zhuǎn)換，沿X軸移動(dòng)元素
translateY(n)	2D轉(zhuǎn)換，沿Y軸移動(dòng)元素

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 300px;background: url(./image/mv1.jpg) no-repeat;background-size: 300px 300px;border: 1px solid black;/* 兩個(gè)值：2D轉(zhuǎn)換，沿X和Y軸移動(dòng)元素不脫離標(biāo)準(zhǔn)流*/transform: translate(100px,200px);}</style> </head> <body><div></div><h1>哈哈</h1> </body> </html>

3、旋轉(zhuǎn)

設(shè)定元素順時(shí)針旋轉(zhuǎn)給定的角度，負(fù)值表示逆時(shí)針旋轉(zhuǎn)

語法：

transform:rotate(ndeg);

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div{width: 300px;height: 300px;background: url(./image/mv1.jpg) no-repeat;background-size: 300px 300px;border: 1px solid black;transform: translate(100px,200px) ;/* 旋轉(zhuǎn)默認(rèn)旋轉(zhuǎn)點(diǎn)是元素的中心位置 *//* transform: rotate(30deg); *//* 修改旋轉(zhuǎn)點(diǎn) 以左上角為原點(diǎn) *//* transform-origin: bottom left; */transform-origin: 20px 20px;transform: rotate(30deg);}</style> </head> <body><div></div><h1>哈哈</h1> </body> </html>

4、2D縮放

設(shè)定元素的尺寸會(huì)增加或減少，根據(jù)給定的寬度（X軸）和高度（Y軸）的參數(shù)

方法說明

scale(x,y)	2D縮放轉(zhuǎn)換，改變元素的寬度和高度
scaleX(n)	2D縮放轉(zhuǎn)換，改變元素的寬度
scaleY(n)	2D縮放轉(zhuǎn)換，改變元素的高度

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div{width: 300px;height: 300px;background: url(./image/mv1.jpg) no-repeat;background-size: 300px 300px;border: 1px solid black;transform: translate(100px,200px) ;/* 旋轉(zhuǎn)默認(rèn)旋轉(zhuǎn)點(diǎn)是元素的中心位置 *//* transform: rotate(30deg); *//* 修改旋轉(zhuǎn)點(diǎn) 以左上角為原點(diǎn) *//* transform-origin: bottom left; */transform-origin: 20px 20px;transform: rotate(30deg);/* 寬高縮放2倍 */transform: scale(2,2);}</style> </head> <body><div></div><h1>哈哈</h1> </body> </html>

5、2D傾斜

設(shè)定元素翻轉(zhuǎn)給定的角度，根據(jù)給定的水平線（X軸）和垂直線參數(shù)（Y軸）

方法說明

skew(x-angle,y-angle) 單位是deg	2D傾斜轉(zhuǎn)換，沿著X軸和Y軸
skewX(angel)	2D傾斜轉(zhuǎn)換，沿著X軸
skewY(angle)	2D傾斜轉(zhuǎn)換，沿著Y軸

6、下載使用字體圖標(biāo)庫

http://www.fontawesome.com.cn/

下載解壓：

移動(dòng)文件的時(shí)候，這兩個(gè)文件夾要一起移動(dòng)

1、引入 CSS

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-S3wUjiBD-1629980914869)(/assetis/image-20210329000155592.png)]

2、使用具體圖標(biāo)

可以通過設(shè)置CSS前綴fa和圖標(biāo)的具體名稱，來把Font Awesome 圖標(biāo)放在任意位置

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="./css/font-awesome.min.css"> </head> <body><div><span class="fa fa-camera-retro"></span> fa-camera-retro</div> </body> </html>

3、查看圖標(biāo)具體名稱

http://www.fontawesome.com.cn/faicons/

4、修改圖標(biāo)大小

1、為了增加圖標(biāo)大小相對于它們的容器, 使用 fa-lg (33% 遞增), fa-2x, fa-3x, fa-4x, 或 fa-5x classes.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg<i class="fa fa-camera-retro fa-2x"></i> fa-2x<i class="fa fa-camera-retro fa-3x"></i> fa-3x<i class="fa fa-camera-retro fa-4x"></i> fa-4x<i class="fa fa-camera-retro fa-5x"></i> fa-5x

2、修改字體大小

但要注意，我們引入樣式的是類的樣式，自己修改的時(shí)候，需要注意優(yōu)先級(jí)權(quán)重

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="./css/font-awesome.min.css"><style>span {font-size: 200px !important;color: brown;}</style> </head><body><div><span class="fa fa-camera-retro"></span> <span class="fa fa-folder-open"></span></div></body></html>

7、制作多彩照片墻

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>多彩照片墻</title><style>.box{width: 1000px;margin: 50px auto;/* background-color: rgb(238, 202, 202); *//* overflow: hidden; */}.box::after{content: '';display: block;clear: both;}.box li{width: 220px;height: auto;float: left;margin: 40px 15px;border: 1px solid #999;padding: 5px;padding-right: 30px;border-radius: 8px;list-style: none;box-sizing: border-box ;}.box li img{width: 200px;height: auto;border-radius: 8px;}.box li:nth-of-type(1){transform: rotate(30deg);}.box li:nth-of-type(2){transform: rotate(-15deg);}.box li:nth-of-type(3){transform: rotate(20deg);}.box li:nth-of-type(4){transform: rotate(-20deg);}.box li:nth-of-type(5){transform: rotate(30deg);}.box li:nth-of-type(6){transform: rotate(-15deg);}.box li:nth-of-type(7){transform: rotate(20deg);}.box li:nth-of-type(8){transform: rotate(-20deg);}.box li:hover{transform:scale(1.3,1.3);}</style> </head> <body><ul class="box"><li> <img src="./image/pic_01.png" alt=""></li><li> <img src="./image/pic_02.png" alt=""></li><li> <img src="./image/pic_03.png" alt=""></li><li> <img src="./image/pic_04.png" alt=""></li><li> <img src="./image/pic_05.png" alt=""></li><li> <img src="./image/pic_06.png" alt=""></li><li> <img src="./image/pic_01.png" alt=""></li><li> <img src="./image/pic_02.png" alt=""></li></ul> </body> </html>

/li>

</ul> ```

總結(jié)

以上是生活随笔為你收集整理的零基础学前端之css3高级特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。