持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

前言：

掘友们，不好意思，我又卷了，今天不起眼的打开了Gitee，突然就看到了一个动画效果。蛮简单的，总的来说，就是搭建好模板之后，通过鼠标悬浮:hover来控制元素的旋转。既然这么简单，那就不废话了，开干！

示例：

搭建模板

根据demo示例，我们先将模板搭建好。元素层级不一，有的元素是覆盖到其他元素之上的，这里小编使用的是position: relative相对定位，和position: absolute绝对定位，脱离父元素，更好的搭建模板。 图示：使用transform的skew属性让元素倾斜transform: skew(水平倾斜角度，垂直倾斜角度(单位：deg));

正值：顺时针倾斜    负值：逆时针倾斜

鼠标悬停恢复旋转

给父元素绑定:hover控制子元素transform倾斜角度为0，子元素绑定过度时间transition: all .4s;

.boxItem:hover .box1{
   transform: skew(0deg, 0deg);
}
.boxItem:hover .box2{
   transform: skew(0deg, 0deg);
}
.boxItem:hover .box3{
   transform: skew(0deg, 0deg);
}
.boxItem:hover .box4{
   transform: skew(0deg, 0deg);
}
.boxItem:hover .box5{
   transform: skew(0deg, 0deg);
}
.item {
   transition: all .4s;
}

鼠标悬停控制元素移动

鼠标悬浮父元素，利用transform的translate属性控制元素移动。translate(x,y)：沿x轴和y轴平移，实现伸缩功能。

.boxItem:hover .box1{
   transform: skew(0deg, 0deg);
   transform: translate(-30px, -20px);
}
.boxItem:hover .box2{
   transform: skew(0deg, 0deg);
   transform: translate(-15px, -20px);
}
.boxItem:hover .box3{
   transform: skew(0deg, 0deg);
   transform: translate(-15px, 0px);
}
.boxItem:hover .box4{
   transform: skew(0deg, 0deg);transform: translate(-100px, 60px);
}
.boxItem:hover .box5{
   transform: skew(0deg, 0deg);
   transform: translate(20px, 20px);
}
.item {
   transition: all .4s;
}

鼠标悬停单个元素实现向上浮动效果

根据绝对定位设置的值，鼠标悬停在元素上动态修改浮动

.box1:hover {
    top: -15px;
}
.box2:hover {
    top: -15px;
}
.box3:hover {
    top: 100px;
}
.box4:hover {
    bottom: 45px;
}
.box5:hover {
    bottom: 12px;
}

码上掘金

总结：

这篇文章简单的实现了浮动+动画的效果，其实很简单的。通过transform和transition控制元素，达到效果，整体来说没有什么难度。坚持每天一个小demo！努力变得更优秀，也希望对大家有所帮助。