资讯频道 → Web前端
阅读更多

7顶
0踩

Web前端

原创新闻 9 款赏心悦目的 HTML5/CSS3 特效

2014-03-10 13:21 by 见习编辑 html5_dev 评论(4) 有12176人浏览
html5 css3 web前端

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

1、HTML5 WebGL实验，超酷的HTML5 Canvas波浪墙

这是一款HTML5 Canvas实验项目，也是波浪特效，只是这不是真正的水波，而是利用柱体高度的变化实现的波浪墙效果。



在线演示    /    源码下载

2、HTML5重力感应动画特效，冲撞小球演示

页面上会掉落大小不等的小球，我们可以拖动小球，也可以点击页面空白来生产更多的小球，如果你的电脑配置高，可以试试产生更多的小球来玩，非常有趣。



在线演示    /    源码下载

3、HTML5 Canvas图表应用RGraph，图表功能非常强大

一款功能强大的HTML5 Canvas图表应用，这款HTML5图表有多种类型，直线图，柱状图，饼状图，甚至还有混合图，图表配置也十分简单，功能却非常强大。



在线演示    /    源码下载

4、新款CSS3按钮组合，5组可爱CSS3按钮

一款可爱的CSS3按钮组合，该CSS3按钮一共有5种不同的风格，有几款还有3D立体的效果。一起来欣赏这些可爱的CSS3按钮吧。



在线演示    /    源码下载

5、CSS3图片层叠展开特效，可展开扇形效果

这款CSS3图片特效没有那么绚丽，它的功能非常简单，当你把鼠标移到图片上时，多张图片便会由原先的叠在一起变成展开状态，展开过程中伴随CSS3动画，展开的形状是扇形。这款简单的CSS3图片层叠展开动画可以应用在图片展示和图片分享上。



在线演示    /    源码下载

6、HTML5 Canvas饼状图表，HTML5&jQuery图表应用

一款基于HTML5 Canvas的饼状图图表应用，鼠标点击饼状图的某块区域时，即可高亮突出显示该区域。由于该饼状图是基于HTML5开发的，所以需要支持HTML5的浏览器才能够使用。



在线演示    /    源码下载

7、CSS3 Loading进度条加载动画特效，3款绚丽风格

一款炫酷的CSS3进度条加载动画特效，该动画特效有3个不同的风格，注意，IE6/7/8是不支持该进度条动画的。



在线演示    /    源码下载

8、纯CSS3进度条，华丽5色进度条示例

这是一款利用纯CSS3实现的进度条，它的实现非常简单，没有复杂的动画，该CSS3进度条最大的特点是拥有非常漂亮的5种颜色，整个进度条看上去非常专业。



在线演示    /    源码下载

9、CSS3联系表单，清新外观带美化Select表单

这款CSS3表单比较清新简单，表单整体看上去很干净，特别的是，该CSS3联系表单有一个自定义的美化select表单，表单项在被激活的时候边框颜色会改变。



在线演示    /    源码下载

以上就是9款赏心悦目的HTML5/CSS3应用特效，欢迎收藏和分享。

本文由html5tricks收集整理，转载请务必保留原文链接
  • 大小: 39.2 KB
  • 大小: 40.4 KB
  • 大小: 30.4 KB
  • 大小: 43.7 KB
  • 大小: 33.2 KB
  • 大小: 23.9 KB
  • 大小: 10.4 KB
  • 大小: 20 KB
  • 大小: 14.2 KB
来自: html5tricks
7
顶
0
踩
评论 共 4 条 请登录后发表评论
4 楼 文仁126520 2014-03-13 16:08
感觉不错啊
3 楼 CodingDNA 2014-03-12 22:29
还不错，但是感觉好像太卡通化了。
2 楼 aiai20062079 2014-03-11 17:41
好炫
1 楼 sxwgf0003 2014-03-11 09:57
mark 

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 9款赏心悦目的HTML5&CSS3应用特效

    9款赏心悦目的HTML5&CSS3应用特效

  • Android_HttpURLConnection GET、POST网络请求封装

    用到一个IO 依赖 implementation 'io.janusproject.guava:guava:19.0.0' import android.os.AsyncTask; import android.text.TextUtils; import com.google.common.io.ByteStreams; import java.io.InputStream; import...

  • 赵小妞

    依赖： implementation 'io.janusproject.guava:guava:19.0.0' implementation 'com.android.support:design:27.1.1' implementation 'com.github.bumptech.glide:glide:4.9.0' implementation 'com.goog...

  • 南飞的雁

    你从遥远北方飞来 带着满脸的倦意 轻轻停靠在我的肩头 打着盹儿 等着夜幕的降临 而我安静的看着你 沉沉的睡去 眼角分明有岁月的年轮   我是一颗树 一颗年轻瘦小的树 当你停留在我的肩头 看着你安详疲倦的面容 我放下了心中年轻的躁动 就那么一动不动 站立在茂密高大的树林中 生怕惊走了你   春天的暖香扑来 你到了离开的季节 你还是决定离开 温暖了你一整个冬天 那简陋蓬...

  • android 封装Http请求的帮助类

    整理好的帮助类，注意Post请求使用编码我用的是utf-8 /**   * This class is used for : http request helper  *    * @author limengxiao   * @version    *     1.0 ${2016_4_24} ${23:58}   */   package com.example.lmx

  • 9款赏心悦目的HTML5/CSS3应用特效

     9款赏心悦目的HTML5/CSS3应用特效 原文地址： ... ...经过几天的收集，在html5tricks网站上又增加了不少HTML5的教程和应用，今天我把几款赏心悦目的HTML5/CSS3应用特效总结了一下，一共9款HT

  • Html5系列（二十四）款赏心悦目的 HTML5/CSS3 特效

    这是一款HTML5 Canvas实验项目，也是波浪特效，只是这不是真正的水波，而是利用柱体高度的变化实现的波浪墙效果。 在线演示 源码下载 2、HTML5重力感应动画特效，冲撞小球演示 页面上会掉落大小不等的小球，...

  • HTML5资源教程9款赏心悦目的HTML5/CSS3应用特效

    9款赏心悦目的HTML5/CSS3应用特效 经过几天的收集，在html5tricks网站上又增加了不少HTML5的教程和应用，今天我把几款赏心悦目的HTML5/CSS3应用特效总结了一下，一共9款HTML5特效，分享给大家。 1、...

  • 9款赏心悦目的HTML5/CSS3应用特效（免积分下载咯）

    经过几天的收集，在html5tricks网站上又增加了不少HTML5的教程和应用，今天我把几款赏心悦目的HTML5/CSS3应用特效总结了一下，一共9款HTML5特效，分享给大家。 1、HTML5 WebGL实验 超酷的HTML5 Canvas波浪墙

  • 【源码案例】14个超炫酷 HTML5/CSS3应用和动画特效实例

    html5现在已经不是很前卫的东西了，越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验。今天我们要分享几款超绚丽的HTML5/CSS3应用和动画特...

  • 【前端三剑客】CSS3 层叠样式表

    CSS3 字体4.1 字体库格式5. CSS3 2D转换6. CSS3 多列7. CSS3 模态弹框（Modal）8. CSS3 图片滤镜9. CSS3 弹性盒子10. CSS3 多媒体【每日一面】不同元素垂直居中的方法   1. CSS3 简介 CSS3（Cascading Style...

  • html 气泡动画效果,css3实现好看的气泡按钮动画特效

    CSS3在我们网页设计中是最关键的一环，为什么这么说呢？我们在浏览别人的网站时，经常会看到特别好看的动画效果，比如一个按钮啊，一个图片啊，每次看到都能够让人有种赏心悦目的感觉，这就使网站更具有吸引力和互动...

  • html 动态导航菜单,导航菜单,css3,javascript,响应式菜单,html,css

    最近关于 HTML5 和 CSS3 的内容挺多的，说明这项技术日趋成熟，本文介绍 20 个效果很酷的导航菜单。导航栏是一个网站最常使用的部分之一，用户可以通过它有序地访问网页并返回到主页。这就要求导航栏一定要简单、...

  • HTML和CSS基础讲解

    文章目录1 HTML/CSS1.1 网站生成HTML静态页面的好处1.1.1 网站的访问速度更快1.1.2 网站运行更安全1.1.3 网站更容易被搜索到1.2 盒子模型1.3 行内元素,块级元素,空(void)元素,可变元素1.4 CSS实现垂直水平居中1.5 ...

  • html是什么css,什么是CSS

    什么是CSSCSS是Cascading style Sheets的简称，中文译作“层叠样式表单”.在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就...

  • 用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript

    网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。 网站素材方面：计划收集各大平台好看...

  • html5鼠标经过tr显示隐藏,Html中 <tr> 标签的隐藏与显示

    9 款赏心悦目的 HTML5/CSS3 特效 1.HTML5 WebGL实验,超酷的HTML5 Canvas波浪墙 这是一款HTML5 Canvas实验项目,也是波浪特效,只是这不是真正的水波,而是利用柱体高度的变化实现的波浪墙效果. 在线演示 ... 关于PHP的...

  • css 百度百科

    我的百科 我的贡献草稿箱百度首页 | 登录 新闻 网页 贴吧 知道 MP3 图片 视频 百科帮助设置 添加到搜藏 返回百度百科首页 编辑词条CSS目录[隐藏]CSS历史 使用C

  • CSS基础入门，导入方式，选择器

    CSS基础入门 本博客为视频学习笔记 原视频作者：狂神 原视频地址：https://www.bilibili.com/video/BV1YJ411a7dy?p=2 1 了解CSS 1.1 如何学习css css是什么 css怎么用（快速入门） css选择器，重难点 美化网页...

Global site tag (gtag.js) - Google Analytics