zoukankan      html  css  js  c++  java
  • 10款web前端基于html5/CSS3应用特效

    1.jQuery百叶窗效果焦点图 多种百叶窗动画方式

    对于百叶窗动画效果,我们介绍的不是很多,目前就介绍过一款CSS3百叶窗图片切换。这次要给大家带来一个基于jQuery的多种百叶窗动画效果焦点图,焦点图的切换伴随随机的百叶窗动画,每一种百叶窗动画都非常精巧,当然你也可以定义自己的百叶窗动画,将其加入动画列表中。

    10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 1

    在线演示

    源码下载

    2.jQuery多层级垂直手风琴菜单

    之前我们分享过一款类似的jQuery垂直手风琴菜单CSS3手风琴菜单 下拉展开带弹性动画,这次分享的这款手风琴菜单是多层级的,你可以通过HTML结构生成任意层级的菜单。由于是基于jQuery的,因此这款手风琴菜单的兼容性还不错。

    10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 2

    在线演示

    源码下载

    3.纯CSS3实现幽灵漂浮动画

    这又是一款基于纯CSS3的动画特效,先是用CSS3绘制了一个“可爱”的幽灵,没用运用图片,其实用CSS3绘制一些简单的线条和图形非常简单。然后通过CSS3的动画属性对幽灵进行上下的漂浮,动画效果还是非常不错的。

    10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 3

    在线演示

    源码下载

    4.jQuery加入购物车商品飞入动画

    现在网上商城很多,每一个网上商城都会有将商品加入购物车的功能,本文将要分享一个用jQuery实现的加入购物车商品飞入动画,与其他加入购物车效果不一样的是,当点击加入购物车,商品会自动飞入购物车里面,并通过抖动购物车来提示用户操作成功。

    10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 4

    在线演示

    源码下载

    5.CSS3可旋转的卡通小鸟头像

    这是一款很可爱的CSS3动画,关于HTML5小鸟的动画,大家可以去看看这个SVG HTML5可爱的小鸟卡通动画。今天要分享的这个也是基于纯CSS3实现的,只要我们将鼠标滑过小鸟头像,小鸟就会出现旋转的动画效果,非常可爱。

    10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 5

    在线演示

    源码下载

    6.jQuery悬浮标题的幻灯片播放焦点图 淡入淡出动画

    关于jQuery焦点图插件,html5tricks已经为大家分享过很多了。今天我们要来介绍一款很普通但相当实用的jQuery悬浮标题的幻灯片播放焦点图,焦点图十分简易,每张图片都可以有一个标题和简介内容,这些文字内容悬浮在图片下方。图片切换时也是简单的淡如淡出动画,这用jQuery是很容易实现的。

    10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 6

    在线演示

    源码下载

    7.CSS3网站地图可视化生成器

    SlickMap CSS是一款利用CSS文件直接将网站地图(sitemap)转换为可视化网页图表导航的CSS框架,它可以让一个枯燥的sitemap XML文件或者HTML文件转换成让人容易理解的组织架构图,让你对网站有个一目了然的了解。然后SlickMap CSS是自动化的,您自需要用XML或者HTML元素将站点地图结构描述好,SlickMap CSS会帮你直接渲染。

    10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 7

    在线演示

    源码下载

    8.jQuery滑动杆实现购买日期选择

    这是一款基于jQuery的滑动杆购买日期选择插件,它的外观仿的是阿里云的服务器购买日期选择界面。这款jQuery插件非常适合在一些虚拟产品购买页面上使用,它可以帮助你的用户快速选择产品的购买日期,十分方便。

    10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 8

    在线演示

    源码下载

    9.CSS气泡提示框 可自定义配置箭头

    今天我们要来分享一款基于纯CSS的气泡提示框,和之前分享的一款jQuery消息提示框插件Tipso类似,整个提示框由箭头和矩形框组成,并且气泡提示框的箭头可以有不同的方向。这款CSS气泡提示框由纯CSS完成,最大的特点就是可以自定义配置,包括文字颜色、背景颜色和箭头方向等。

    10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 9

    在线演示

    源码下载

    10.jQuery模拟抛物线轨迹动画

    利用jQuery和HTML5可以模拟很多数学中的函数图象,比如HTML5 Canvas正弦波动画。今天我们要介绍一个用jQuery实现简单的模拟抛物线轨迹的插件,可以开始和暂停抛物线的运动,以及重新设置抛物线的参数。

    10款web前端基于html5/CSS3应用特效 - 爱七七五八网 - 10

    在线演示

    源码下载

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

  • 相关阅读:
    hdu 5101 Select
    hdu 5100 Chessboard
    cf B. I.O.U.
    cf C. Inna and Dima
    cf B. Inna and Nine
    cf C. Counting Kangaroos is Fun
    Radar Installation 贪心
    spfa模板
    Sequence
    棋盘问题
  • 原文地址:https://www.cnblogs.com/i7758/p/4806251.html
Copyright © 2011-2022 走看看