分类：CSS3

2020
10-10

js+css3实现简单时钟特效

js+css3实现简单时钟特效 本文实例为大家分享了js+css3实现简单时钟的具体代码，供大家参考，具体内容如下1.实现了时钟的特效，可以转动，时间准确，画面美观大气；2.用到了css3的transform:rotate，transform-origin:,伪元素，border-radius，定位，z-index等等效果如图：代码如下：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>CSS3时钟特效</title><linkrel="shortcuticon"type="image/x-icon"href="img/an.ico"/><style>/*表... 继续阅读 >
2020
09-29

jquery+css3实现的经典弹出层效果示例

本文实例讲述了jquery+css3实现的弹出层效果。分享给大家供大家参考，具体如下：可能出现的情况1）一列都有，按顺序弹出对应的弹出层2）只有单个一个弹出层3）不按顺序不按规律随机弹出层jquery弹出层解决第一种情况参考资料移动端之“CSS3多动画弹框”引入jqueryJS代码这里关闭用的css3效果实现<scripttype="text/javascript">varw,h,className;functiongetSrceenWH(){w=$(window).width();h=$(window).he... 继续阅读 >
2018
01-19

CSS3系列-css3之线性渐变初探

CSS3系列-css3之线性渐变初探 CSS3系列-css3之线性渐变初探1.写在前面入行前端一年多的时间，想提高自己的css技术水平，于是在网上看了些关于css的书籍，想买几本比较好的css书籍啃啃，找来找去，终于找到了《CSS揭秘》这本书。入手这本书后，从开始看到后面，发现书中的很多效果都可以使用渐变来实现，于是，我对渐变产生了兴趣，决定好好掌握css3中的这个属性。结合《CSS揭秘》、张鑫旭大神的深入理解CSS3gradient斜向线性渐变和CSS3radi... 继续阅读 >
2017
03-07

CSS3 新特性学习

CSS3 新特性学习 CSS3是最新的CSS标准，并且完全向后兼容，不过目前W3C仍然在对CSS3规范进行开发，虽然标准的规范还没有正式发布，但是现代浏览器已经支持相当多的CSS3属性了。CSS3提供了很多可以把玩的新特性，模糊了之前只控制样式的定义，让之前很难处理的样式（如：圆角、多列等）和只能通过Javascript来实现的动画效果等现在都能通过CSS3新特性提供的属性很轻松的实现，功能是越来越强大。一、CSS3边框在css3中新增的... 继续阅读 >
2016
08-01

带你玩转css3的3D！

带你玩转css3的3D！ 话不多说，先上demo酷炫css3走马灯/正方体动画：https://bupt-hjm.github.io/css3-3d/github源码地址：https://github.com/BUPT-HJM/css3-3d酷炫css3翻页动画：https://bupt-hjm.github.io/css3-flip-book/github源码地址：https://github.com/BUPT-HJM/css3-flip-book以上均纯css3实现，没有使用任何js代码，希望能得到大家的star啦~css3的3d起步要玩转css3的3d，就必须了解几个词汇，便... 继续阅读 >
2015
09-02

推荐 10 个超棒的 CSS3 代码生成工具

推荐 10 个超棒的 CSS3 代码生成工具 新的在线工具和WebApp帮助开发者快速地创建网站而不用写代码。前端开发已经在框架和代码库方面有了很大的进展。但是许多开发者已经忘记了代码生成器在构建网站时的价值。下面的资源是完全免费的WebApp，这些WebApp能够为模板，渐变，甚至浏览器属性的前缀生成CSS3代码。如果你是前端开发者，这些资源可以帮助你节省很多时间，并可以为以后的项目提供可复用的源码。1.CSS3GeneratorCSS3Generator是... 继续阅读 >
2015
04-24

CSS 3中弹性盒布局的最新版

CSS 3中弹性盒布局的最新版 CSS3中弹性盒布局的最新版概述在CSS3中，CSSFlexibleBox模块为一个非常重要的模块，该模块用于以非常灵活的方式实现页面布局处理。虽然可以使用其他CSS样式属性来实现页面布局处理，但是如果使用CSSFlexibleBox模块中定义的弹性盒布局技术，可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理。虽然CSSFlexibleBox模块已经被公布了好几年，但是自开始公布... 继续阅读 >
2015
03-14

CSS3飘带状3D菜单 菜单带小图标

CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单，菜单的外观是飘带状的，并且每一个菜单项有一个精美的小图标，鼠标滑过菜单项时，菜单项就会向上凸起，像是飘带飘动一样，形成非常酷的3D视觉效果。这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航。在线演示        源码下载 2、jQuery动画二级下拉菜单对于jQuery菜单，大家已经非常熟悉了，我们也已经分享过很多jQuery菜单和CSS3... 继续阅读 >
2014
12-03

9款最新炫酷HTML5/CSS3应用推荐

9款最新炫酷HTML5/CSS3应用推荐 HTML5的强大之处我们已经体验过很多了，包括HTML5游戏、HTML5视频，另外结合CSS3，也能创造更多炫酷的动画特效和实用应用。今天我们要分享9款最新的炫酷HTML5/CSS3应用。如果你喜欢，赶紧分享给你的朋友吧。1、HTML5webkit3D立方体图片旋转滑块应用今天再来分享一款HTML5 3D立方体动画，这个只是一个3D效果模型，你可以用图片替换演示中的立方体4个面，这样就可以将这款HTML5立方体旋转动画改造成HTML53D焦... 继续阅读 >
2014
11-11

深入学习HTML5的history API

不得不佩服下谷歌Chrome团队，利用HTML5和CSS3实现了一本相当漂亮的在线电子书：《关于浏览器和互联网20件事》。访问地址：http://www.20thingsilearned.com话说这本电子书已经出来很久了，不过今天来看依然觉得相当的赞。我们无需刷新页面，就可以来回切换电子书页面，这正是OPOA（OnePageOneApplication）的完美体现。现在正在学习关于historyAPI这方面的东西，所以特别感兴趣的是他们如何使用window.history.pushState()... 继续阅读 >
2014
11-11

如何利用 Bootstrap 进行快速 Web开发

如何利用 Bootstrap 进行快速 Web开发 入门下载已编译的Bootstrap数据包（可以去这里下载）。我在本文中使用的是V2.3.2。下载内容包括Bootstrap的关键元素CSS，以及一些有用的图像和JavaScript文件。您可以根据我在文中的描述为Web页面提供HTML。Bootstrap文档中不包含框架支持的许多设计选项的样例HTML。但是Bootstrap文档页面（尽管其本身已说明了Bootstrap的灵活性）还不足以解释真正起作用的基本设计原则。响应式Web设计查看Web页面的设备... 继续阅读 >
2014
11-11

开源中最好的Web开发资源大全

开源中最好的Web开发资源大全 文章来源：Best“mustknow”opensourcestobuildthenewWeb。个人感觉这个收集贴收集成相当的全。学习HTML5编程和设计★ HTML5Rocks :MajorFeatureGroups 的学习 HTML5的资源 (HTML5演示,教程). 源码很不错的 HTML5Dashboard –Mozilla，效果很炫。WhatWGDevelopers,一个清楚的HTML5技术规格说明书。★ StackOverflow :大名鼎鼎的技术问答式论坛。★ Addyosmani,jQuery和JavaScript... 继续阅读 >