位移-绝对定位居中
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
过度，旋转，位移，缩放
<title>旋转效果</title>
<style>
img {
width: 250px;
transition: all 2s;
/*transform-origin: left bottom;/*转换原点*/*/
}
img:hover {
/* 顺 */
transform: rotate(360deg);
/* 逆 */
/* transform: rotate(-360deg); */
/* 边走边转 */
/*transform: translate(600px) rotate(360deg);*/
/*缩放*/
/*transform: scale(1.2);*/
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="">
</body>
</html>
溢出隐藏，不透明度0-1
.box {
width: 249px;
height: 210px;
margin: 50px auto;
overflow: hidden;
/* 透明,看不见 */
opacity: 0;
}
渐变背景
<title>渐变背景</title>
<style>
.box {
width: 300px;
height: 200px;
/* background-image: linear-gradient(
pink,
green,
hotpink
); */
background-image: linear-gradient(
transparent,
rgba(0,0,0, .6)
);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
动画复合属性
<title>animation复合属性</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
/* animation: change 1s linear; */
/* 分步动画 */
/* 3: 重复3次播放 */
/* animation: change 1s steps(3) 1s 3; */
/* 无限循环 */
/* animation: change 1s infinite alternate; */
/* 默认值, 动画停留在最初的状态 */
/* animation: change 1s backwards; */
/* 动画停留在结束状态 */
animation: change 1s forwards;
}
@keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
/* 百分比指的是动画总时长的占比 */
/*@keyframes change {
0% {
width: 200px;
}
50% {
width: 500px;
height: 300px;
}
100% {
width: 800px;
height: 500px;
}
}*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
缩放背景图
/* 图片等比例缩放, 当宽度或高度和盒子尺寸相等, 图片就不再缩放 */
/* background-size: contain; */
/* 图片等比例缩放, 图片完全覆盖到整个盒子, 可能会导致图片显示不全 */
background-size: cover;
