HTML5小组件

hzp666

已于 2022-04-20 10:50:07 修改

阅读量557

点赞数

分类专栏： HTML 文章标签： HTML css 特效

于 2022-04-20 10:38:10 首次发布

原文链接：https://www.html5tricks.com/16-pure-css3-icon.html

版权

HTML 专栏收录该内容

131 篇文章 17 订阅

订阅专栏

38 jQuery和HTML5实现16宫格的翻牌消除游戏 | HTML5资源教程

36 HTML5超级玛丽游戏重体验 HTML5游戏经典 | HTML5资源教程

35 纯CSS3炫酷3D菜单菜单项3D旋转动画 | HTML5资源教程

34 CSS3超炫酷圆形计时器进度条动画 | HTML5资源教程

33 纯CSS3实现超炫酷的萤火虫动画 | HTML5资源教程

31 4 组有趣的 HTML5 SVG 文字播放动画 | HTML5资源教程

28 CSS3/SVG实现的任务列表超酷的按钮点击动画 | HTML5资源教程

27

华丽的HTML5图表可展示实时数据 | HTML5资源教程

26基于 ApexCharts 的 HTML5 曲线图表可选取数据范围 | HTML5资源教程

25CSS3 SVG实现的卡片内容翻转切换动画 | HTML5资源教程

24 不可错过的16个纯CSS3动画小图标 | HTML5资源教程

23HTML5雨滴滑落动画及天气预报代码 | HTML5资源教程

21 CSS3 3D弹性按钮效果带弹性质感 | HTML5资源教程

20 CSS3超酷3D弹性按钮按钮实现非常简单 | HTML5资源教程

19HTML5/CSS3一组可爱的3D按钮 | HTML5资源教程

18

超实用CSS3 3D菜单菜单项悬浮凸出立体效果 | HTML5资源教程

17CSS3 3D动画菜单 4种颜色主题 | HTML5资源教程

15

HTML5/CSS3文字投影特效乳白阴影文字效果 | HTML5资源教程

14CSS3文字阴影效果阴影角度可随鼠标变化 | HTML5资源教程

13 CSS3深色背景的垂直手风琴菜单 | HTML5资源教程

12CSS3 3D按钮按钮有漂亮的边线 | HTML5资源教程

11简易的CSS3下拉菜单外观比较清新 | HTML5资源教程

10.CSS3手风琴下拉菜单支持多菜单展开 | HTML5资源教程

9.Jquery

jQuery菜单插件 | HTML5资源教程

CSS3弧形曲线循环菜单导航DEMO演示

jQuery圆形旋转切换菜单DEMO演示

jQuery圆形多选菜单选项DEMO演示

jQuery SVG高端圆形菜单导航DEMO演示

jQuery水平滑动菜单可筛选菜单项DEMO演示

8.CSS菜单目录

CSS3菜单 | HTML5资源教程 | 第2页

7、jQuery多功能日历插件带事件记录功能 | HTML5资源教程

jQuery多功能日历插件带事件记录功能

21,514 人浏览

1条回复

2014-12-13 21:36:22

本文作者html5tricks，转载请注明出处

之前我们也已经分享过不少jQuery日历插件，有些应用了CSS3的特性，外观就特别漂亮。今天要分享的这款jQuery日历插件不仅有着绚丽的外观，而且带有日期事件记录功能，点击日期即可展开事件记录窗口，你可以设置事件的描述以及提醒的时间，是一款相对实用的jQuery日历插件。

jquery-calendar-with-event

接下来我们一起来看看实现这款jQuery带事件记录功能的日历插件的实现过程及源码，代码主要由HTML、CSS和jQuery组成。

HTML代码：

<div id="myId" class="jalendar">
        <div class="added-event" data-date="14/12/2017" data-time="Tüm Gün" data-title="WWDC 13 on San Francisco, LA"></div>
        <div class="added-event" data-date="16/12/2017" data-time="20:45" data-title="Tarkan İstanbul Concert on Harbiye Açık Hava Tiyatrosu"></div>
        <div class="added-event" data-date="17/12/2017" data-time="21:00" data-title="CodeCanyon İstanbul Meeting on Starbucks, Kadıköy"></div>
        <div class="added-event" data-date="17/12/2017" data-time="22:00" data-title="Front-End Design and Javascript Conferance on Haliç Kongre Merkezi"></div>
        <div class="added-event" data-date="17/12/2017" data-time="22:00" data-title="Lorem ipsum dolor sit amet"></div>
    </div>

CSS代码：

.jalendar {
    position: relative;
    width: 300px;
    margin: 30px auto;
}
.jalendar .left {
    float: left;
}
.jalendar .clear {
    clear: both;
}
.jalendar.mid {
    width: 420px;
}
.jalendar .added-event {
    display: none;
}
.jalendar-wood {
    position: relative;
    background: url('../images/jalendar-wood-bg.png') left top;
    border-radius: 10px;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.7), inset 0 -2px 10px rgba(255,255,255,0.3);
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    border-top: 1px solid #e1bf89;
    border-right: 1px solid #b4925d;
    border-left: 1px solid #b4925d;
    display: inline-block;
    z-index: 2;
}

jQuery代码：

$(function () {
    $('#myId').jalendar({
        customDay: '2017/12/01',  // Format: Year/Month/Day
        color: '#ed145a', // Unlimited Colors
        lang: 'EN' // Format: English — 'EN', Türkçe — 'TR'
    });
});

6、

如何在网页上编辑表格数据，这通过自己编写JS和CSS实现都是比较麻烦的，jQuery有很多插件可以完成这种功能，比如这款jQuery简易版的Excel表格功能插件，就可以基本满足网页上的数据编辑。这次我们分享的这款插件是基于Layui的，layui 是一款采用自身模块规范编写的前端UI框架，这款表格插件可以允许你非常方便的添加、删除表格行数据，并且通过服务器接口进行保存。你只需要定制前端的数据列和后端的保存逻辑即可，数据交互均采用JSON格式。

在线演示源码下载

5、

CSS3卡片3D翻转动画卡片带3D按钮

很多现代网站现在都喜欢用卡片式的风格，即在首页中将文章标题、内容和主题图片制作成卡片展示。今天这款就是基于CSS3的卡片动画，卡片中的元素可以是任意HTML元素，这里比较特别的是在文字下方显示一个3D按钮，同时当我们将鼠标滑过卡片时，卡片会呈现3D的翻转动画。

在线演示源码下载

4、

jQuery事件循环滚动的时间轴插件

今天给大家分享一款基于jQuery的时间轴插件，它的功能就像是扩展版的jQuery焦点图那样，不仅可以像时间轴那样沿着轴向前翻滚，而且可以点击按钮向前或者向后翻滚，这有点类似传统的焦点图插件，并且这些在时间轴上的事件可以循环滚动。

在线演示源码下载

3、

CSS3个性化自定义样式的Radiobox单选框

单选框Radiobox是网页表单中比较常用的元素，有时候为了统一网页风格，让页面变得更加协调，我们通常需要重写浏览器单选框的默认样式。今天我们要分享的是一款基于CSS3的个性化自定义样式Radiobox单选框，它不仅有着扁平化的样式外观，而且在选中项切换的时候伴随动画效果。

在线演示源码下载

2、

超酷的CSS3复古风格和字体的3D按钮

我们分享过很多基于CSS3的3D按钮，很多都非常漂亮，例如这篇7款外观迷人的HTML5/CSS3 3D按钮特效文章中就收藏了不少。这次我们要带来一款也是基于CSS3的3D按钮，它有着复古的风格和字体。第一个按钮根据光标在悬停时的位置向左或向右倾斜，它的风格类似于老式游戏机按钮。这些按钮配置了sm，md，lg大小类以及bootstrap-esque类，如primary，secondary，dangerous，warning，success和info。第二个按钮是一个加载程序按钮，按下它时会有自己的进度条。它只会向中心推动，但随后向上打开，在它的正面显示一个进度条。根据操作的成功与否，它将在完成时显示具体信息。

在线演示源码下载

1、CSS3和SVG实现的圆环菜单动画

网页菜单的样式真实多种多样，特别是HTML5和CSS3的流行，让网页菜单的外观更加丰富多彩了。今天我们要给大家分享一个基于CSS3和SVG的圆环形状的菜单，在圆环上一共有7个节点，表示菜单项，当鼠标滑过或者点击其中一个节点时，就会弹出文字菜单项，圆环形状和节点都是采用SVG绘制而成，动画效果也非常不错。

在线演示源码下载

本条目发布于一月 10, 2019。属于HTML5应用分类，被贴了 CSS3菜单、SVG 标签。

hzp666

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
HTML5小组件

24不可错过的16个纯CSS3动画小图标 | HTML5资源教程23HTML5雨滴滑落动画及天气预报代码 | HTML5资源教程22动态背景的CSS3登录表单 | HTML5资源教程一套精美的 CSS3 新拟物风格 UI 元素 | HTML5资源教程21CSS3 3D弹性按钮效果带弹性质感 | HTML5资源教程20CSS3超酷3D弹性按钮按钮实现非常简单 | HTML5资源教程19HTML5/CSS3一组可爱的...
复制链接

扫一扫