【益阳网站建设】CSS3的新特性让微交互更轻松更便捷和兼具景深效果

  技术分享     |      2021/05/26

       CSS3的新特性让微交互更轻松更便捷和兼具景深效果。页面结构即页面布局,是针对单个页面不同控件和元素的布局关系展示。网页上的微交互,就是控件和元素响应热点事件之后的变化,以前基本就是背景颜色或者图片的变化,这种变化常常来自替换和运动等带来的视觉特效演绎。而CSS3 最强能实现3D交互效果,却是利用了translateZ 属性,它是transform的子属性,它决定了元素沿着自身Z轴移动。

【益阳网站建设】CSS3的新特性让微交互更轻松更便捷和兼具景深效果

       如果只有这么一个属性,是看不出来任何效果的,因为浏览器没有办法计算应该产生什么样的变化,所以我们需要给父元素添加一条 perspective属性,此时,表示父元素距离屏幕多远。perspective:__px决定元素距离屏幕的像素值,也就是平常说的景深效果再比如说超链接(包括菜单的超链接),CSS3自定义无穷变幻的样式超链接按钮,让鼠标滑过带动画特效。超链接和按钮在网页中是最为基本的元素了,我们可以通过设置CSS3样式将链接外观做一些简单的调整,比如文本大小、颜色和下划线。也可以利用上文提到过的属性,做更多的动画演绎。

【益阳网站建设】CSS3的新特性让微交互更轻松更便捷和兼具景深效果

       现在我们浏览国外很多优秀的个人网站,在实现菜单跳转和页面切换的时候,基本都是使用了CSS3的技术,既使得画面舒适,又切换流畅。特别是我们传统认为的那种鼠标滑入、点击、滑过之后的效果变换,基本都是CSS3的技术应用,减少了很多加载环节和图片制作的繁琐,使得微交互更轻松更便捷[5]。比如图3,扁平化图标在hover(鼠标指针选择器类型)事件前后的变化,鼠标滑入之前效果为上排图片状态,鼠标滑入之后,产生背景颜色变化和前景元素的动画(前景元素由对角线四个方向的碎片元素飞入拼合成完整前景元素)。