iphone6 外观：http://www.html5tricks.com/demo/css3-iphone6/index.html

天气图标：http://www.html5tricks.com/demo/pure-css3-weather-icon/index.html

3D太空船：http://www.html5tricks.com/demo/pure-css3-3d-air-ship/index.html

动态字体：http://www.html5tricks.com/demo/html5-canvas-side-text/index.html

个人思考：

  CSS3 纯图片
优点

1、加载速度快

2、放大不失真

1、制作简单

2、开发速度快
缺点

1、技能要求高

2、开发时间长

 1、大图加载速度慢

CSS3、HTML5实践:

在页面上的图形一般用两种方法，用CSS3或者canvas绘画

以下是CSS3的一些想法

1 一般比较多的会用到圆角，阴影，旋转和动画，

2 有三角图案的时候一般都会用到width:0;height:0;然后设置边框的粗细，弧度都是通过border-radious绘制

3 定位来说一般都会是绝对的absoulate,还有：before,after

有趣的HTML5 CSS3效果的更多相关文章

  1. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

  2. 8个前沿的 HTML5 & CSS3 效果【附源码下载】

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

  3. 10款让你心动的 HTML5 & CSS3 效果

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 1.超炫的 HT ...

  4. 8个web前端的精美HTML5 & CSS3效果及源码下载

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

  5. HTML5+CSS3 效果网站集合

    1.jquery插件库 HTML5制作3D樱花漫天飞舞  http://www.jq22.com/jquery-info3547 2.17素材网   http://www.17sucai.com/pi ...

  6. 有趣的HTML5/CSS3艺术网站

    http://www.html5tricks.com/ 2017年8月31日08:16:21

  7. 精选12个时尚的 CSS3 效果【附源码下载】

    这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...

  8. 发现两个有趣的CSS3效果

    一.CSS3画机器猫 http://keleyi.com/keleyi/phtml/html5/3.htm 哆啦A梦效果图: 可用于浏览器对CSS3支持情况的测试 但最近有人对这个测试表示怀疑,指该测 ...

  9. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

随机推荐

  1. three.js raycaster射线碰撞的坑 （当canvas大小 不是屏幕大小是解决拾取物体的办法）

    这里只是记录一下坑,方便查阅,内容主要援引自:three.js Raycaster 射线拾取 canvas不占满整屏时射线拾取存在偏差 1. 世界坐标系: 世界坐标系位于屏幕的中心(0,0,0),往右 ...

  2. hdu 5461(2015沈阳网赛 简单暴力) Largest Point

    题目;http://acm.hdu.edu.cn/showproblem.php?pid=5461 题意就是在数组中找出a*t[i]*t[i]+b*t[j]的最大值,特别注意的是这里i和i不能相等,想 ...

  3. 758B Blown Garland

    B. Blown Garland time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  4. BZOJ1047或洛谷2216 [HAOI2007]理想的正方形

    BZOJ原题链接 洛谷原题链接 显然可以用数据结构或\(ST\)表或单调队列来维护最值. 这里采用单调队列来维护. 先用单调队列维护每一行的最大值和最小值,区间长为正方形长度. 再用单调队列维护之前维 ...

  5. centos 6.5 上安装 nvm

    NVM 重磅推出NVM curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash Clos ...

  6. 虚函数与bind 实现设计模式的练习

    相同模式使用虚函数与bind function进行实现对比 #include "stdafx.h" #include <iostream> #include <f ...

  7. Java SE EE ME用处

    Java SE: 又称J2SE,开发部署桌面应用程序: Java EE:又称J2EE,开发网站 Java ME:是做手机APP开发 EE在SE基础上构建,提供web服务.组件模型.管理和通信API

  8. install virtualenv

    $ [sudo] pip install virtualenv $ mkdir ~/envs $ virtualenv ~/envs/lsbaws/ $ cd ~/envs/lsbaws/ $ ls ...

  9. 数位dp小结

    数位dp其实就是一种用来求区间[l, r]满足条件的数的个数.数位是指:个十百千万,而在这里的dp其实相当于暴力枚举每一位数. 我们通过把l, r的每位数分解出来,然后分别求r里满足条件的数有多少,l ...

  10. 前端之javascript的节点操作和Event

    一 节点的增删改查 创建节点:createElement(标签名):创建一个指定名称的节点. 追加节点: 追加一个子节点:somenode.appendChild(标签名) 指定某个位置前面添加一个节 ...