-
transform: scale(1.05) 用于缩放一个元素的大小。在这个值中，1.05是缩放因子。这意味着元素的大小将被放大到原始大小的1.05倍。
例如，如果一个元素原本的宽度是100像素，应用这个transform属性后，它的宽度将变为105像素。
// 效果：鼠标移入图片放大1.05倍，可以用一个块包裹并设置 overflow: hidden;
img{
width: 200px;
height: 100px;
&:hover {
transform: scale(1.05);
}
}
-
filter: drop-shadow(10px 24px 34px rgba(0, 0, 255, 0.8)); 用于给元素添加一个阴影效果。这个函数接受四个参数：水平偏移、垂直偏移、模糊半径、颜色
// 效果：鼠标移入出现一个阴影效果
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%) 用于给块设置一个 渐变背景，从深蓝色 (#06338E) 开始，然后逐渐变为透明（左 => 右），90deg为零的时候是 从上 => 下
div{
width: 200px;
height: 100px;
background: linear-gradient(90deg, #06338E 0%, rgba(6, 51, 142, 0) 100%);
}
-
transform: rotate(-2deg); 用于对元素进行转换操作，如旋转、缩放；rotate(-2deg) 表示元素会逆时针旋转 -2 度。注意这里的负号表示逆时针方向
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; // 作用是规定动画只执行一次
}
@keyframes hideDiv {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
-
图片镜像 css3
scale(x,y)，x表示元素沿着水平方向（X轴）缩放的倍数，y表示元素沿着垂直方向（Y轴）缩放的倍数；基础为1，大于一是放大，小于一是缩小，负一为镜像。
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;
}
}
