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


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

    1.HTML5 模拟现实物理效果

    Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动。玩法介绍:可以随意拖动圆球、点击页面背景、晃动浏览器、双击页面背景或者按住鼠标左键,有不同的效果,赶紧来体验一下。

    8个web前端的精美HTML5 & CSS3效果及源码下载 - 爱七七五八网 - 1

    在线演示

    源码下载

    2.实现各种 CSS3 文本动画效果

    这个插件集成了一些非常好的 JavaScript 库,提供一个方便使用的文本动画插件,可以让你为网页中的文字运用各种动画。

    8个web前端的精美HTML5 & CSS3效果及源码下载 - 爱七七五八网 - 2

    在线演示

    源码下载

    3.离开你网站时显示模态弹窗

    Ouibounce 是一个微小的库,用于实现在用户离开你的网站的时候显示一个模式窗口。这个库可以帮助你增加着陆页的转换率。 Ouibounce 会在当鼠标光标移动到接近(或通过)视口(viewport)的顶部的时候触发。

    8个web前端的精美HTML5 & CSS3效果及源码下载 - 爱七七五八网 - 3

    在线演示

    源码下载

    4.实现各种好看的阴影效果

    Shine.js 是一个用于实现漂亮阴影的 JavaScript 库。您可以设置动态光的位置,可定制的阴影。不依赖于第三方库,兼容 AMD。能在支持 textShadow 或 boxShadow 的浏览器中正常使用,如果有需要会自动添加前缀。

    8个web前端的精美HTML5 & CSS3效果及源码下载 - 爱七七五八网 - 4

    在线演示

    源码下载

    5.表单填写进度提示效果

    Fort.js 是一款用于时尚、现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单。提供了Default、Gradient、Sections 以及 Flash 四种效果,满足开发的各种场合需要。

    8个web前端的精美HTML5 & CSS3效果及源码下载 - 爱七七五八网 - 5

    在线演示

    源码下载

    6.HTML5 WebGL 实现逼真的云朵效果

    使用 HTML5 WebGL 实现超逼真的云朵效果。WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示。

    8个web前端的精美HTML5 & CSS3效果及源码下载 - 爱七七五八网 - 6

    在线演示

    源码下载

    7.带有数字显示的加载进度条效果

    有的时候,在我们的应用程序中,我们希望能够显示特定任务的百分比进度。这里分享的这款小巧的 JavaScript 插件就是实现这个功能,易于使用和定制,而且是是免费开源的。

    8个web前端的精美HTML5 & CSS3效果及源码下载 - 爱七七五八网 - 7

    在线演示

    源码下载

    8.自适应的占位符效果

    在早期,我们都是通过使用 JavaScript 来实现占位符功能。而现在,HTML5 原生提供的 placeholder 属性让我们在现代浏览器轻松就能实现这样的功能。这里向大家分享一个自适应的占位符效果(Adaptive Placeholder),当你输入的时候,提示文字不会消失,而是以动画的方式移动到了输入框的上方。

    8个web前端的精美HTML5 & CSS3效果及源码下载 - 爱七七五八网 - 8

    在线演示

    源码下载

    本文固定链接: http://www.i7758.com/archives/1643.html

  • 相关阅读:
    聊天的时间显示
    Android下Affinities和Task
    android Notification 的使用
    Android Notification使用及取消
    类似微信发图片的样式
    Delphi---TServerSocket和TClientSocket发送和接收大数据包
    使用拷贝文件测试(BufferedInputStream,FileInputStream)
    android-getTextSize返回值是以像素(px)为单位的,setTextSize()以sp为单位
    怎样成为PHP 方向的一个合格的架构师
    mac 查看某个文件夹下所有隐藏文件(夹)的大小
  • 原文地址:https://www.cnblogs.com/i7758/p/4562529.html
Copyright © 2020-2023  润新知