-
transform: scale(1.05) 用于縮放一個(gè)元素的大小惰蜜。在這個(gè)值中带欢，1.05是縮放因子胁塞。這意味著元素的大小將被放大到原始大小的1.05倍。
例如溉奕，如果一個(gè)元素原本的寬度是100像素褂傀，應(yīng)用這個(gè)transform屬性后，它的寬度將變?yōu)?05像素加勤。
// 效果：鼠標(biāo)移入圖片放大1.05倍仙辟，可以用一個(gè)塊包裹并設(shè)置 overflow: hidden;
img{
width: 200px;
height: 100px;
&:hover {
transform: scale(1.05);
}
}
-
filter: drop-shadow(10px 24px 34px rgba(0, 0, 255, 0.8)); 用于給元素添加一個(gè)陰影效果。這個(gè)函數(shù)接受四個(gè)參數(shù)：水平偏移鳄梅、垂直偏移叠国、模糊半徑、顏色
// 效果：鼠標(biāo)移入出現(xiàn)一個(gè)陰影效果
img {
width: 200px;
height: 100px;
&:hover {
filter: drop-shadow(10px 24px 34px rgba(0, 0, 255, 0.8));
}
}
-
linear-gradient(90deg, #06338E 0%, rgba(6, 51, 142, 0) 100%) 用于給塊設(shè)置一個(gè) 漸變背景戴尸，從深藍(lán)色 (#06338E) 開始粟焊，然后逐漸變?yōu)橥该鳎ㄗ?=> 右），90deg為零的時(shí)候是 從上 => 下
div{
width: 200px;
height: 100px;
background: linear-gradient(90deg, #06338E 0%, rgba(6, 51, 142, 0) 100%);
}
-
transform: rotate(-2deg); 用于對(duì)元素進(jìn)行轉(zhuǎn)換操作，如旋轉(zhuǎn)项棠、縮放悲雳；rotate(-2deg) 表示元素會(huì)逆時(shí)針旋轉(zhuǎn) -2 度。注意這里的負(fù)號(hào)表示逆時(shí)針方向
p{
&:hover{
transition: 0.4s;
transform: rotate(-2deg);
}
}
// -ms-transform:rotate(250deg); /* IE 9 */
// -moz-transform:rotate(250deg); /* Firefox 兼容-moz-引擎瀏覽器*/
// -webkit-transform:rotate(250deg); /* Safari 和 Chrome *兼容-webkit-引擎瀏覽器**/
// -o-transform:rotate(250deg);
img{
animation: hideDiv 1s infinite linear;
animation-iteration-count: 1; // 作用是規(guī)定動(dòng)畫只執(zhí)行一次
}
@keyframes hideDiv {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
-
圖片鏡像 css3
scale(x,y)香追，x表示元素沿著水平方向（X軸）縮放的倍數(shù)合瓢，y表示元素沿著垂直方向（Y軸）縮放的倍數(shù)；基礎(chǔ)為1透典，大于一是放大晴楔，小于一是縮小，負(fù)一為鏡像掷匠。
transform: scaleX(-1);
filter: fliph; /*IE*/
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
html
<div class="wrap">
<ul class="list">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</div>
css
* {
margin:0;
padding:0;
}
.wrap {
overflow:hidden;
width:500px;
height:100px;
border:1px solid #000;
margin:50px auto;
}
.list {
position:relative;
top:0px;
left:0px;
width:200%;
height:100%;
border:1px solid #f00;
list-style:none;
animation:mymove 5s infinite linear;
}
.list li {
width:98px;
height:98px;
border:1px solid white;
background:blue;
float:left;
vertical-align:middle;
text-align:center;
line-height:98px;
color:white;
font-weight:600;
}
@-webkit-keyframes mymove {
from {
left:0px;
}
to {
left:-500px;
}
}
