CSS3在改善网站用户体验中的应用

　　CSS3作为CSS(层叠样式表)的第三个版本，是对CSS规范的一个很大改善和增强，既为网站前端开发者提供了易于开发的网站阅读功用，也为运用者提供了更好的用户体验，CSS3中的媒体查询技术、动画技术等在改善网站用户体验方面曾经失掉了很好的运用。

　　1.CSS3媒体查询在照应式网站中的运用

　　随着移动互联网的迅猛开展，用户阅读网站的设备也在不时丰厚，可以针对不同大小的屏幕停止网站阅读成为现代web运用的趋向，照应式设计在网站中的运用越来越多，照应式规划可以为不同终端的用户提供愈加温馨的界面和更好的用户体验，目前很多商业类网站都提供的是照应式网站，为用户的购物行为提供便利。CSS3提供的媒体查询功用，其语法结构及用法：

　　@media 设备名 only (选取条件) not (选取条件) and(设备选取条件)，设备二{sRules}

　　以此可以判别设备横竖屏、设备类型、设备宽高以及设备像素比，例如判别设备宽高的代码：

　　@media screen and (max-width：320px){

　　.logo{height：40px}

　　.header{height：40px}

　　}

　　在运用CSS3停止照应式网站设计中，网站内容方面的准绳是在较小屏幕的设备上，从上向下依据内容优先级依次显示，网站视觉与交互体验的准绳是设备不同体验分歧，保证用户在阅读网站时的熟识感受。

　　2.CSS3的2D动画和3D变换在图片相册中的运用

　　在网站中停止图片展现的运用实例十分多，例如企业产品宣传展现、营销类网站的商品图片展现，用户在阅读图片的进程中假设可以在全部平铺出来的缩略图中，经过鼠标悬浮在某一张图片获取较大尺寸的图片来了解更多的信息，将会给用户带来更良好的用户体验，如缤客网网站，CSS3的2D动画功用就可以完成，它的优势在于不需求编写事情接口，直接运用阅读器提供的事情接口(TransitionEnd，AnimationStart，AnimationIteration，AnimationEnd)即可，目前这些事情接口需求针对阅读器添加前缀，例如webkit内核的阅读器，提供的事情接口为webkitTransitionEnd，webkitAnimationStart，webkitAnimationIteration，webkitAnimationEnd。CSS3的2D动画运用的技术有translate()、rotate()、scale()等方法，以及transition过渡属性。下面提到的图片展理想例的相关实现代码：

　　img{

　　width： 150px;

　　height： 150px;

　　-moz-transition： width 1s，height 1s，transform 1s;

　　-webkit-transition： width 1s，height 1s，transform 1s;}

　　#pic：hover{

　　width： 800px;

　　height： 800px;

　　z-index： 10;

　　-moz-transform： translate(0px，-170px);

　　-webkit-transform： translate(0px，170px);}

　　CSS3中的3D transform变换效果更是将图片的展现置于模拟三维空间，为用户的阅读体验提供了愈加真实的环境，主要触及rotateX()、rotateY()、rotateZ()三个方法和perspective属性，相关代码如下：

　　perspective：**px;

　　transform-style： preserve-3d;

　　transition： transform 1s;

　　img： transform： rotateY(***deg) translateZ(***px)

　　3.CSS3在网站导航设计中的运用

　　网站导航是用户阅读网站的重要交互区域，因此对导航停止一些庞大的交互动画能有效提升一定的用户体验，CSS3在网站导航方面的运用一方面是仅运用CSS3来完成，配合border-radius、transition、transition-delay等主要的技术可以制造出过渡效果十分好的下拉式导航，相关代码如下：

　　transition：0.5s

　　transition-delay：0.5s;

　　background-image： -moz-linear-gradient(-90deg， rgba(255， 255， 255， 0.5)， rgba(255， 255， 255， 0));

　　另一方面是将CSS3与JQuery技术两者结合制造的导航，可以完成侧栏折叠展开式导航、垂直固定式导航等效果，在方式和交互方面都可以给用户带来更多的用户体验。

　　总之，CSS3在CSS2.1的基础上拓展了很多弱小的功用，为现代网站设计运用提供了更多方法，满足网站前端的设计开发需求，设计者经过运用CSS3的圆角、阴影、突变、变换、动画以及媒体查询等技术，为用户提供了愈加美观、愈加良好的用户体验界面，CSS3的新特性降低了网站开发的复杂度，网站在功用上失掉了很大提高，用户阅读网站的速度以及交互等多方面的体验都有很多改善，随着CSS3技术的进一步开展完善，网站用户体验将失掉更多的提高与完成。