css过渡
<style>
.qq {
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
margin: 400px 0 0 0;
/* 加上过渡效果 */
/* transition: all 2s linear .5s; */
/* linear 相同速度开始至结束
ease慢速开始，中间快速，再慢速就结束的过渡
ease-in慢速开始
ease-out慢速结束
ease-in-out 慢速开始和结束的过渡*/
}
.qq:hover {
/* 自身的位置就是0,0 */
transform: translate(200px, -200px);
}
.box {
margin: 20px auto;
width: 100px;
}
.box img{ transition: all 1s ease-out .5s;}
.box:hover img {
transform: translateX(-14px);
/* transition: all 1s ease-out .5s;写在下面也可以实现 */
}
</style>
</head>
<body>
<div class="qq">
</div>
<div class="box">
<img src="./images/rss.png" alt="">
</div>
</body>
css3特效
<style>
*{margin: 0;padding: 0;}
div {
background-color: red;
width: 200px;
height: 200px;
}
div:hover {
/* transform: translate(100px, 100px); */
/* 平移，2个参数，表示x轴y轴 */
/* transform: scale(2); *//* 缩放，一个值表示x轴y轴都是2 */
/* transform: scaleX(2); *//* 在x轴方向变大，y轴不变，1表示本身不变，小于1表示缩小 */
/* transform: scale(2,1); */
/* 倾斜，度数的单位是deg */
/* skew第一个参数表示x轴，按照逆时针方向进行旋转，宽度变化，高度不变 */
/* skew第二个参数表示y轴，按照顺制作方向进行旋转，高度变化，宽度不变 */
/* transform: skew(60deg,20deg); */
/* 旋转，单位是deg */
/* transform: rotateX(30deg); *//* 沿着X轴旋转，会改变高度 */
/* transform: rotateY(30deg); *//* 沿着Y轴旋转，会改变宽度 */
transform: rotate(40deg);/* 只能设置一个值，表示沿着中心点转 */
}
</style>
</head>
<body>
<div>
</div>
</body>
