CSS3与网页视觉设计及技术呈现研究

CSS3 and Visual Design and Technology Presentation in Web Design

中文关键词: CSS3  网页视觉设计  动画  微交互

英文关键词: CSS3  web visual design  animation  micro-interaction

中文摘要:

      目的 研究网页视觉设计中，使得网页负载更小、交互更友好和更便捷、自适应性更好的方法和技术。基于当前CSS3、HTML5和JavaScript技术的甄别与筛选，基本涵盖了网页视觉设计呈现所必需的基本语言代码规范和格式要求。方法 利用CSS3、HTML5和JavaScript等进行联合测试，重点在于CSS3的源代码测试，比较使用CSS3与使用最基础版本的CSS代码实现同一效果的差异，这些差异包括HTML文件的大小和加载时间、线程比较等。结论 有无受体(如加载外部图片)，均可通过CSS3实现动画演绎和图片常见效果的变化，提高页面性能，降低网页载荷;使用CSS3实现网页自适应，使不同浏览终端设备之间更易实现无障碍切换，同时DIV不会错乱;CSS3的新特性让微交互更轻松、更便捷且兼具景深效果;CSS3更能有效优化页面性能，节省开发成本。

英文摘要:

      The work aims to research methods and techniques of visual design of web pages, which can make the web pages less loaded, friendlier, more convenient and more adaptive. Based on the current screening of CSS3, HTML5 and JavaScript technologies, it basically covers the basic language code specifications and format requirements necessary for the present visual design and presentation of web pages. CSS3, HTML5 and JavaScript were used to conduct joint testing, focusing on the source code testing of CSS3, comparing the differences after using CSS3 and using the most basic version of CSS code to achieve the same effect, including the size of HTML files and load time, thread comparison, etc. With or without acceptors (such as loading external pictures), animation deduction and common effect changes of pictures can be achieved through CSS3 to improve page performance and reduce page load. Web page adaptation can be achieved by using CSS3 to make accessible handover easier between different browsing terminal devices, while DIV will not be confused; new features of CSS3 can make the interaction easier, more convenient and have depth of field effect; CSS3 can also optimize page performance more effectively and save development costs.