在【uni-app|vue组件实现鼠标滑过平滑过渡动效之播放与暂停】这篇文章中,小凡跟大家详细分析了整个动效的原理以及实现过程,那么,今天,小凡再来跟大家分享一个类似的鼠标滑过平滑过渡效果,相信大家在有了上一篇文章的基础上,再来学习这一篇文章中的动效原理的话,应该就会变的简单了许多。
|
|
|
|
|
第一部分 圆形按钮形状
第二部分 按钮中间三条白色平行线(表示菜单)
第三部分 按钮中间两条白色交叉线(表示关闭)
重点:接下来就是解决动效平滑过渡的问题了,我们只需要利用transfrom属性,设置元素的Y轴偏移量以及旋转角度;利用filter属性,灵活运用元素的阴影;利用transition属性,实现两种状态的平滑切换。
在正式开始写代码之前,需要先下载相应的IDE,以及进行必要的配置工作。
小凡在【uni-app项目|vue组件形式实现的科技感loading纯CSS动效】文章中详细讲解过如何进行必要的配置工作,这里就不再重复讲解了,大家可以点击右侧链接查看→科技感Loading动效详解
(1)在home.vue应用启动页中添加一个布局,引入并注册自定义vue组件,在模版中使用自定义vue组件
(2) 编写自定义vue组件FloatingButton.vue
注意:样式代码并没有考虑浏览器兼容性问题,本代码的测试环境是谷歌浏览器
.floating-btn{
position: relative;
width: 40px;
height: 40px;
border-radius: 100%;
background-image: linear-gradient(45deg, #52ffaf, #2196f3);
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}
.floating-btn::before,
.floating-btn::after{
content: '';
position: absolute;
left: 50%;
top: 0;
display: block;
margin-left: -9px;
border-radius: 3px;
width: 18px;
height: 3px;
background-color: white;
/*设置元素过渡效果 实现平滑变化的关键*/
transition: all 0.2s ease;
}
分析:此时的两个伪元素,都被设置成了两个长方形,并且重叠在一起,都被定位到圆形按钮的顶部
首先将before选择器创建的伪元素移动到合适的位置上,然后在利用filter过滤器属性,添加该伪元素的阴影,把阴影设置成白色,通过设置阴影与伪元素的位置从而变成两个平行的长方形。(牛!真牛!!实在是牛!!!)
.floating-btn::before{
transform: translateY(12px);
/*利用滤镜,将元素的阴影设置成白色,从而形成第二个横线*/
filter:drop-shadow(0 6px 0 white);
}
接下来,将after选择器创建的伪元素定位到合适的位置上,这样就做出了三条横线的效果了。
.floating-btn::after{
transform: translateY(24px);
}
分析:为before选择器创建的伪元素设置hover选择器中的样式,将过滤器设置为none,这样刚才的阴影形成的横线就不显示了,接着,设置元素在Y轴的偏移量,然后逆时针旋转45度,使其变成差号符号的其中一条斜线
.floating-btn:hover::before{
filter: none;
transform: translateY(18px) rotate(-45deg);
}
分析:为after选择器创建的伪元素设置hover选择器中的样式,设置元素在Y轴的偏移量,然后顺时针旋转45度,使其变成差号符号的另外一条斜线
.floating-btn:hover::after{
transform: translateY(18px) rotate(45deg);
}
至此,这个平滑过渡动效就讲完了。怎么样?在页面中,当你用鼠标滑过菜单按钮时,是不是可以看到里面的三条横线平滑的变成了差号标志的关闭按钮,然后又平滑的变回了三条横线的菜单按钮了呢?如果能看到这个效果,那么恭喜你,一不小心,你又掌握了一个“不得了”的技能,赶快跟你的小伙伴们去分享吧,够你得瑟一阵子的了。O(∩_∩)O哈哈~
如果喜欢小凡的这篇文章,记得点赞、收藏和分享哦!也欢迎大家在评论区留言。
相关文章推荐: