transform（平移、旋转、缩放、3d转换）、渐变、动画笔记
生活随笔
收集整理的這篇文章主要介紹了
transform（平移、旋转、缩放、3d转换）、渐变、动画笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- HTML5
- 1. HTML5新增標簽
- 2. 表單屬性--交互表單屬性
- CSS3
- 1. 選擇器
- 1.1 屬性選擇器
- 1.2 結構偽類選擇器
- 1.3 偽元素選擇器
- 2. css屬性
- 2.1 平面轉換transform
- 2.1.1 平移
- 2.1.2旋轉
- 2.1.3 多重轉換
- 2.1.4 縮放
- 2.1.5 漸變背景
- 案例1 給圖片蒙上漸變色
- 案例2 實現開門效果
- 空間轉換（3D轉換）
- 空間位移
- perspective屬性實現透視效果
- 空間旋轉
- 動畫
- 邊框圓角
- 盒子陰影
HTML5
語義化標簽，本地存儲，視頻，音頻…
1. HTML5新增標簽
<!-- 語義化標簽 --><header>頭部</header><nav>導航</nav><article>文章 頁面中有一塊獨立的內容區域 放標簽</article><footer>底部</footer><aside>側邊欄</aside><section>內容</section>2. 表單屬性–交互表單屬性
<form action=""><p>郵箱:<input type="email" required placeholder="提示文字"></p><p>地址：<input type="url" name="" id="" autofocus></p><p>日期<input type="date" name="" id=""></p><p>時間<input type="time" name="" id=""></p><p>月<input type="month" name="" id=""></p><p>周<input type="week" name="" id=""></p><p>數字<input type="number" name="" id=""></p><p>電話<input type="tel" name="" id=""></p><p>搜索<input type="search" name="" id=""></p><p>顏色<input type="color" name="" id=""></p></form>required 必填placeholder 提示文字autofocus 自動獲取焦點CSS3
選擇器 屬性 過渡 動畫 平移 3d空間 邊框…
1. 選擇器
1.1 屬性選擇器
E[attr] 標簽名[屬性]{} E[attr="value"] 標簽名[屬性名=屬性值]{} E[attr^="value"] 標簽名[type^='t'] 選中有type屬性的，屬性值以t開頭的標簽 E[attr$="value"] 標簽名[type$='t'] 選中有type屬性的，屬性值以t結尾的標簽1.2 結構偽類選擇器
first-child last-child nth-child(n) even odd -n+3 3n1.3 偽元素選擇器
::before ::after ------------- 1:偽元素 content屬性必不可少 2：必須依附于真正的元素 （標簽+內容） 3：after顯示在內容最后邊 before顯示內容的最前邊 4：偽元素具有行內元素的特點2. css屬性
2.1 平面轉換transform
改變盒子在平面內的形態（位移，旋轉，縮放）
2.1.1 平移
transform:translate(水平移動距離，垂直移動距離)
取值: (正負都可以)
1:像素單位數值
2:百分比(參照物盒子自身的尺寸)
x軸正向為右,y軸正向為下
translate如果只給出一個值,表示x軸方向移動距離 單獨設置某個方向的移動距離 translateX 和 translateY <!DOCTYPE html> <html> <head><style>.father{width: 500px;height: 300px;margin: 100px auto;border: 1px solid #000;}.son{width: 200px;height: 100px;background-color: pink;/* 過渡 */transition: all 1s;}.father:hover .son{/* transform: translate(100px,50px); *//* 百分比：盒子自身尺寸的百分比 *//* transform: translate(100%,50%); *//* transform: translate(-100%,-50%); *//* 只給出一個值 x軸移動距離 *//* transform: translate(100px); */transform: translateY(100px);}</style> </head> <body><div class="father"><div class="son"></div></div> </body> </html>平移還在原來的文檔流，平移后的位置也可以重疊。
2.1.2旋轉
transform:rotate(角度) 角度單位是deg取值正負均可取值為正,順時針旋轉取值為負,逆時針旋轉默認原點是盒子中心
transform-origin:原點水平位置 原點垂直位置; 改變轉換原點
方位名詞(left,top,right,bottom,center) 像素單位數值 百分比(參照盒子自身尺寸計算) <!DOCTYPE html> <html> <head><style>.three {width: 200px;transform-origin: 0px 0px;height: 200px; background-color: yellowgreen;/* 過渡 */transition:all 1s;/* 改變原點 *//* transform-origin: right bottom; */transform-origin:0px 0px;}div:hover{/* 順 */transform: rotate(360deg);/* 逆 *//* transform: rotate(-360deg);*/} </style> </head> <body><div>我是綠盒子</div> </body> </html>2.1.3 多重轉換
使用transform復合屬性實現多形態轉換
transform: translate(600px) rotate(360deg); <!DOCTYPE html> <html> <head><style>.box{width: 1200px;height: 50px;border-bottom: 3px solid gray;margin: 200px auto;}img{width: 50px;transition: all 8s;}.box:hover img{/* 邊走邊旋轉 */transform: translate(1150px) rotate(2000deg);/* transform: rotate(360deg) translate(600px); */}</style> </head> <body><div class="box"><img src="https://i.bmp.ovh/imgs/2022/07/04/68909f552ee6d2c1.png" alt=""></div> </body> </html>2.1.4 縮放
transform: scale(x軸縮放倍數,y軸縮放倍數);一般情況下,只為scale設置一個值,表示x軸和ye軸等比例縮放 transform:scale(縮放倍數) scale值大于1 表示放大 scale值小于1 表示縮小 <!DOCTYPE html> <html> <head><style>.box{width: 400px;height: 400px;border: 1px solid;}.son{width: 100px;height: 100px;background-color: pink;transition: all 1s;}.box:hover .son{/* width: 300px; *//* transform: scale(x軸縮放倍數,y軸縮放倍數); *//* transform: scale(0.5,0.5); */transform: scale(1.5);}</style> </head> <body><div class="box"><div class="son"></div></div> </body> </html>2.1.5 漸變背景
使用background-image屬性實現漸變背景效果
background-image: linear-gradient(顏色1,顏色2);案例1 給圖片蒙上漸變色
<!DOCTYPE html> <html> <head><style>.box{width: 400px;height: 200px;background: url(https://i.bmp.ovh/imgs/2022/07/04/db0bbf5a32f7be92.jpg) center;border: 1px solid ;overflow: hidden;}.box::before{content:"";display: block;width: 400px;height: 200px;background-image: linear-gradient(transparent,rgba(0,0,0,.6));transform: translateY(100%);transition: all 1s;}.box:hover::before{transform: translateY(0%);}</style> </head> <body><div class="box"></div> </body> </html>流程如下：
案例2 實現開門效果
主要是平移和偽元素的使用
給盒子的::before和::after分別裝上圖片的左半和右半，設置盒子:hover，懸停時將圖片移開。
可以給盒子加overflow:hidden隱藏移開時的超出部分。
空間轉換（3D轉換）
空間: 從坐標軸的角度定義的, x,y,z三條坐標軸構成了一個立體空間,z軸位置與視線方向相同
transform
w3school 3d轉換
空間位移
transform:translateX(值) transform:translateY(值) transform:translateZ(值)像素單位值 百分比 正負均可 transform: translateX(100px);transform: translateY(100px);transform: translateZ(100px);perspective屬性實現透視效果
生活中,同一個物體,觀察距離不同,視覺上有什么區別?
近大遠小 近清楚 遠模糊
默認情況下,為什么無法觀察到Z軸位移效果?
z軸是實現方向,移動效果應該是距離的遠和近,電腦屏幕都是平面,默認是無法觀察遠近效果
添加給父級perspective:值取值:像素單位數值,數值一般在800~1200作用:空間轉換時,為元素添加近大遠小,近實遠虛 視覺效果透視距離 也稱為視距, 就是人的眼睛到屏幕的距離i
空間旋轉
transform:rotateZ(值) transform:rotateX(值) transform:rotateY(值)左手法則
判斷旋轉方向,左手握住旋轉軸,拇指指向正值方向,手指彎曲方向為旋轉正值方向動畫
使用animation添加動畫效果
動畫效果: 實現多個狀態間的變化過程,動畫過程可控(重復播放 ,最終畫面,是否暫停)
步驟: 1:定義動畫 @keyframes 動畫名稱{from {}to {} }@keyframes 動畫名稱{0% {} 10% {} 20% {} 50% {} 100% {} }2:使用動畫 animation:動畫名稱 動畫花費時長; animation: 動畫名稱 動畫時長 速度曲線 延遲時間 重復次數 動畫方向 執行完畢時的狀態動畫名稱和動畫時長必須賦值 取值不分先后順序 如果右2個時間值 第一個時間表示動畫時長 第二個時間表示延遲時間邊框圓角
border-radius
/* 一個值 表示4個角都是 相同的 *//* border-radius: 10px; *//* border-radius: 50%; */ /* 左上 右上 右下 左下 從左上順時針轉一圈 *//* border-radius: 10px 20px 40px 80px; *//* 沒有的角找對角線 *//* border-radius: 10px 40px 80px; */border-radius:10px 30px ;盒子陰影
box-shadow: 水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內/外陰影;前兩個屬性是必須寫的，其余的都可以省略 外陰影(outset) 是默認的，但是不寫 inset內陰影 是需要寫的總結
以上是生活随笔為你收集整理的transform（平移、旋转、缩放、3d转换）、渐变、动画笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Kubernetes学习笔记（一）：Po
- 下一篇： 职场小白必学技巧之：手把手教你分割PDF