简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

Web蓝天白云的极致体验_html/css_WEB-ITnose

WBOY
Release： 2016-06-21 08:54:09
Original
895 people have browsed it

还在感叹Web 3D云效果(《怎样用CSS做出3D效果的云》)的时候，发现一个将这种效果用到极致的网站。这个网站貌似是个纯净水品牌的展示网站，但是这不妨碍给人一种引人入胜的体验。

Smartewater网站

Smartewater网站链接

据介绍，网页是运用WebGL,canvas和CSS3D技术做的，实现了不错的用户交互。

有兴趣可以观赏下，寻找一些灵感。整个网站页面设计还是很高端洋气的(废话，就是国外大牛做的)，页面上下滚动时的视差效果，云层缥缈的动画，阅兵蓝的背景，给人清新之感。交互设计这部分还可以控制云层，随着鼠标移动的方向在云层中穿梭，有木有在空中翱翔之感，噢，页面还有音乐的。

不过美中还是有瑕疵的：卡顿。下面来几幅大图

Smartewater网站界面

导航栏

交互：云层拉伸

单击左键弹出模式菜单

按住左键随意画各种形状的云

Related labels：
Web蓝天白云的极致体验
source：php.cn
Previous article：HTML+CSS学习笔记 (15) Next article：如何让div充满整个页面的一个问题_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
2
1779
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
10
1921
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1635
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1541
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1579
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！