css一些基礎效果

2022-09-08 00:54:21 字數 2233 閱讀 1342

1.旋轉

.center>.bj>.div1>ul>li>.img1:hover /*


旋轉*/


.center>.bj>.div1>ul>li>.img2:hover /*


y軸旋轉


*/.center>.bj>.div1>ul>li>.img3:hover
2.縮放

.center>.bj>.div2>.d2>ul>li>div/*


父元素設定溢位隱藏


*/.center>.bj>.div2>.d2>ul>li>div>img/*


設定過渡時間


*/.center>.bj>.div2>.d2>ul>li>div:hover img


/*點選縮放，此處是放大1.2倍，移開滑鼠恢復原狀


3.遮罩層覆蓋


.foot>.bj>.d2>ul>.li2/*


子級定位絕對+過渡時間


*/.foot>.bj>.d2>ul>.li4.foot>.bj>.d2>ul>.li1:hover +.li2/*


滑鼠劃過li1，li2的變化


4.遮罩層隱藏在img上方


溢位隱藏、父級相對定位


*/.foot>.bj>.d2>.u1>li>img.foot>.bj>.d2>.u1>li>div/*


子級絕對定位、透明度


*/.foot>.bj>.d2>.u1>li>div>img.foot>.bj>.d2>.u1>li:hover div/*top值為0.直接定位下來*/


5.遮罩層上下效果

				
css的一些基礎（一）
定位相關屬性用於設定目標元件的位置，常用的定位相關屬性如下。屬性說明 值position設定定位方法 static relative absolute fixed left right為定位元素設定偏移量 長度 百分比 auto top bottom z index設定定位元素的層疊順序 數字靜態定...

				
float一些效果
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。文字的特點 不會鑽入到任何東西的下邊。注 如果上層被設定position absolute的div覆蓋，則被覆蓋的下一層div中則文字不會展...

				
關於一些CSS動態效果的整理
僅列出一些常用命令，和常用簡寫 過渡半秒 transition 5s 放大縮小 transform scale 1 移動效果 translatex 100 translatey 100 translate x,y 旋轉效果 rotate 45deg 關聯到動畫 test keyframes dong...