行业动态
行业动态CSS3的新特性让微交互更轻松更便捷和兼具景深效果
发布：2020-11-22 12:28:23 浏览：2057
CSS3的新特性让微交互更轻松更便捷和兼具景深效果。页面结构即页面布局，是针对单个页面不同控件和元素的布局关系展示。网页上的微交互，就是控件和元素响应热点事件之后的变化，以前基本就是背景颜色或者图片的变化，这种变化常常来自替换和运动等带来的视觉特效演绎。而CSS3 最强能实现3D交互效果，却是利用了translateZ 属性，它是transform的子属性，它决定了元素沿着自身Z轴移动。
如果只有这么一个属性，是看不出来任何效果的，因为浏览器没有办法计算应该产生什么样的变化，所以我们需要给父元素添加一条 perspective属性，此时，表示父元素距离屏幕多远。perspective：__px决定元素距离屏幕的像素值，也就是平常说的景深效果再比如说超链接（包括菜单的超链接），CSS3自定义无穷变幻的样式超链接按钮，让鼠标滑过带动画特效。超链接和按钮在网页中是最为基本的元素了，我们可以通过设置CSS3样式将链接外观做一些简单的调整，比如文本大小、颜色和下划线。也可以利用上文提到过的属性，做更多的动画演绎。
现在我们浏览国外很多优秀的个人网站，在实现菜单跳转和页面切换的时候，基本都是使用了CSS3的技术，既使得画面舒适，又切换流畅。特别是我们传统认为的那种鼠标滑入、点击、滑过之后的效果变换，基本都是CSS3的技术应用，减少了很多加载环节和图片制作的繁琐，使得微交互更轻松更便捷[5]。比如图3，扁平化图标在hover（鼠标指针选择器类型）事件前后的变化，鼠标滑入之前效果为上排图片状态，鼠标滑入之后，产生背景颜色变化和前景元素的动画（前景元素由对角线四个方向的碎片元素飞入拼合成完整前景元素）。
>>> 查看《行业动态CSS3的新特性让微交互更轻松更便捷和兼具景深效果》更多相关资讯 <<<
本文地址：http://yunshangjianzhan.com/news/html/21852.html
