日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2024/1/23 HTML 29 豆豆
生活随笔 收集整理的這篇文章主要介紹了 零基础学前端之css3高级特效 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

css3高級特效

1、本章目標

掌握2D轉換對元素進行移動、旋轉、縮放和傾斜

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

2、2D轉換方法

移動：translate()
旋轉：rotate()
縮放：scale()
傾斜：skew()

2D轉換

屬性：transform
作用：對元素進行移動、旋轉、縮放、傾斜
語法：transform: none | transform-functions;

3、2D移動

設定元素從當前位置移動至給定的位置（x坐標 y坐標）

方法說明
translate(x,y)2D轉換，沿X和Y軸移動元素
translateX(n)2D轉換，沿X軸移動元素
translateY(n)2D轉換，沿Y軸移動元素
<!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;/* 兩個值：2D轉換，沿X和Y軸移動元素不脫離標準流*/transform: translate(100px,200px);}</style> </head> <body><div></div><h1>哈哈</h1> </body> </html>

3、旋轉

設定元素順時針旋轉給定的角度，負值表示逆時針旋轉

語法：

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) ;/* 旋轉默認旋轉點是元素的中心位置 *//* transform: rotate(30deg); *//* 修改旋轉點 以左上角為原點 *//* transform-origin: bottom left; */transform-origin: 20px 20px;transform: rotate(30deg);}</style> </head> <body><div></div><h1>哈哈</h1> </body> </html>

4、2D縮放

設定元素的尺寸會增加或減少，根據給定的寬度（X軸）和高度（Y軸）的參數

方法說明
scale(x,y)2D縮放轉換，改變元素的寬度和高度
scaleX(n)2D縮放轉換，改變元素的寬度
scaleY(n)2D縮放轉換，改變元素的高度
<!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) ;/* 旋轉默認旋轉點是元素的中心位置 *//* transform: rotate(30deg); *//* 修改旋轉點 以左上角為原點 *//* 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傾斜

設定元素翻轉給定的角度，根據給定的水平線（X軸）和垂直線參數（Y軸）

方法說明
skew(x-angle,y-angle) 單位是deg2D傾斜轉換，沿著X軸和Y軸
skewX(angel)2D傾斜轉換，沿著X軸
skewY(angle)2D傾斜轉換，沿著Y軸

6、下載使用字體圖標庫

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

下載解壓：

移動文件的時候，這兩個文件夾要一起移動

1、引入 CSS

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

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

2、使用具體圖標

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

<!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、查看圖標具體名稱

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

4、修改圖標大小

1、為了增加圖標大小相對于它們的容器, 使用 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、修改字體大小

但要注意，我們引入樣式的是類的樣式，自己修改的時候，需要注意優先級權重

<!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> ```

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。