CSS3过渡与变形个人案例——旋转方块并弹入

前言

变形、旋转、转换、过渡和动画是现在前端必备的技能之一，也是为了更加便捷作出较为美观的页面。

因此个人会实践日常工作可能实现的功能作为例子让我们更加熟悉变形、旋转、转换、过渡和动画。以下是三者的相关叙述
《CSS3动画》、《CSS3过渡》、《CSS3变形、转换、旋转》

现在我们来实现窗口弹入的过渡与动画的案例,不喜欢样式可以自己搭配，同时也希望大家能给点鼓励或者提供需求。

1.gif

---

HTML

JS

let div=document.querySelector("div")
div.addEventListener("transitionend",function(){
  div.classList.add("move")
})

监听div的transitioned事件，即当旋转完成后就弹入显示内容，添加move的class。

CSS

*{
padding: 0;
margin: 0;
}
main{
background-color: #495A80;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
div{
width: 100px;
height: 100px;
position: relative;/*父元素进行相对定位，让伪元素不相对于屏幕进行定位*/
}
div::before{
content: "旋转";
position: absolute;
width: 100px;
height: 100px;
border-radius: 10%;
font-size: 1.5em;
background-color: #95a5a6;
display: flex;
justify-content: center;
align-items: center;
transition-duration: 2s;/*旋转过渡的时间*/
cursor: pointer;/*改变鼠标指针形态*/
}
div:hover::before{
transform: rotate(360deg);/*旋转360°*/
}
div::after{
content: "弹出";
position: absolute;
bottom: -30px;
width: 100px;
text-align: center;
color: #EEE8AB;
font-size: 1.2em;
transform: translateX(-999px) skew(45deg);/*设置起始位置以及起始倾斜角度*/
transition-duration: 1s;/*设置过渡时间*/
}
div.move::after {
transform: translateX(0px) skew(0);/*过渡之后的位置以及起始倾斜角度*/
}

案例总结：
本案例运用了过渡和变形，并且运用伪元素的形式编写，在学习过程中不仅需要了解如何运用过渡和变形，更能够知道伪元素与父元素之间的依赖，其实对父元素的相对定位position: relative以及伪元素的绝对定位position: absolute尤为重要。