零基础学前端之css3高级特效
生活随笔
收集整理的這篇文章主要介紹了
零基础学前端之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軸移動元素 |
3、旋轉
設定元素順時針旋轉給定的角度，負值表示逆時針旋轉
語法：
transform:rotate(ndeg);
4、2D縮放
設定元素的尺寸會增加或減少，根據給定的寬度（X軸）和高度（Y軸）的參數
| scale(x,y) | 2D縮放轉換，改變元素的寬度和高度 |
| scaleX(n) | 2D縮放轉換，改變元素的寬度 |
| scaleY(n) | 2D縮放轉換，改變元素的高度 |
5、2D傾斜
設定元素翻轉給定的角度，根據給定的水平線（X軸）和垂直線參數（Y軸）
| skew(x-angle,y-angle) 單位是deg | 2D傾斜轉換，沿著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-5x2、修改字體大小
但要注意，我們引入樣式的是類的樣式，自己修改的時候，需要注意優先級權重
<!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高级特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 零基础跟我学前端之css3基础
- 下一篇： 多久能学会前端？怎么学？