标签归档:HTML

【web素材】11—15套免费网站后台管理模板

前面,我跟大家分享过一期关于网站后台管理的素材内容《【web素材】08—这50套高大上的后台管理系统模板,瞬间提升你的专业水平与审美能力》。今天,我再跟大家分享15款网站后台源码模板,这些网站模板都是我通过网络收集整理而成,供大家自我学习使用。下面我们就开始今天的内容。

01、订单销售统计电商后台系统

图片

这是一款使用Bootstrap构建的电商后台管理系统页面模板。里面包含订单销售、商品管理、销售营业额统计后台管理页面;还有多个ui组件,图表库、日历、文本表单、日期范围、上传区域,形成自动完成,滑块范围,进度条、通知消息等。下载地址:https://089u.com/f/21793581-479683529-69dd52 访问密码:2698

02、电商业务数据统计后台模板

图片

这一款后台管理模板是基于vue实现的电商app,电商订单,电商销售数据统计后台管理系统模板。适合电子商务商城网站admin系统。界面使用tab选项卡的方式,无刷新效果很好。这套后台模板是github项目,请参考帮助文档。ps:如果不懂vue,也没有编程基础的话,不建议直接学习。下载地址:https://089u.com/f/21793581-479683531-508d17 访问密码:2698

03、H5物流大数据展示后台投票模板

图片

这一款科技感十足的物流大数据系统,物流数据概况系统,物流订单系统,物流信息系统后台多个展示大屏模板。ps:本地需在localhost下进行访问。下载地址:https://089u.com/f/21793581-479683547-d9169e 访问密码:2698

04、App商城销售后台统计页面模板

图片

这一款是基于bootstrap构建,中文版的商品销售统计管理,商城订单销售,商城累计收入统计后台管理UI框架模板。包含完整的UI元素页面,是个通用的前端后台框架模板。下载地址:https://089u.com/f/21793581-479683550-a83b30 访问密码:2698

05、课程教育系统管理后台模板

图片

这款是基于bootstrap框架和jquery插件,多用途的教育行业以及网络课程系统管理,是一套教育平台网站后台页面模板。这套管理后台模板用途很广泛,适用于教育管理软件,很容易修改定制。下载地址:https://089u.com/f/21793581-479683584-b73b6e 访问密码:2698

06、电商业务销售管理系统模板

图片

这款是基于bootstrap框架构建的蓝色多用途电商产品业务销售管理系统,里面有每月营业额统计管理UI框架模板。下载地址:https://089u.com/f/21793581-479683628-ddd8ec 访问密码:2698

07、医院就诊统计管理模板

图片

这一款多用途的医院医生就诊统计,医疗服务统计管理后台HTML模板。适用于:医院、医疗行业管理系统,当然,你也可以使用这套模板创建任何类型的管理软件,或者网站后台、数据统计分析等。下载地址:https://089u.com/f/21793581-479683667-959f6b 访问密码:2698

08、电商业务销售统计后台界面模板

图片

这款模板是基于bootstrap前端框架构建的,电商销售统计/公司业绩销售管理后台模板。适用于任何类型的电商网站后台,管理应用软件web前端模板等。下载地址:https://089u.com/f/21793581-479683685-cc3c4a 访问密码:2698

09、广告流量分析统计管理后台模板

图片

这款也是基于Bootstrap构建的,黑色的app后台流量统计,访客数量统计,广告自媒体流量统计管理后台ui框架模板。使用了最新jQuery UI组件和Bootstrap插件。适用于任何的web应用程序电子商务仪表板,定制管理面板,crm、cms项目管理管理等。下载地址:https://089u.com/f/21793581-479683746-65cb37 访问密码:2698

10、产品订单销售电商后台模板

图片

这是一款基于Bootstrap构建,产品订单管理/产品销售/电商后台系统模板。模板附带很多小部件和组件。它有一个巨大的可重用的UI组件集成模板。下载地址:https://089u.com/f/21793581-479683782-4b6c41 访问密码:2698

11、云文件存储管理后台模板

图片

这个是一款多功能的云端图片文件管理,云共享,云储存后台管理系统模板。它由用户管理模块、auth模块、ui页面、表单页面等响应式后台页面布局。下载地址:https://089u.com/f/21793581-479683805-a016da 访问密码:2698

12、响应式app业务数据统计后台模板

图片

这款模板基于bootstrap框架,jQuery构建,响应式的app数据统计管理后台模板。包含很多UI元素、组件、web应用程序、数据仪表板、CRM、CMS、电子商务面板页面等。它有很多可以使用页面,如身份验证、电子邮件、日历、错误、faq、博客文章、搜索、用户配置文件等。

下载地址:https://089u.com/f/21793581-479683840-a45356 访问密码:2698

13、健身App管理后台模板

图片

这款模板基于Bootstrap构建,响应式的运动健身App统计管理,健身项目管理,私人健身服务后台管理模板。下载地址:https://089u.com/f/21793581-479683859-4b904d 访问密码:2698

14、餐饮业务管理系统后台模板

图片

这款模板是基于html5与 Bootstrap构建的,可以在餐饮行业进行使用,餐饮电商系统,餐饮外卖订单,餐饮业务销售管理响应式后台模板。
下载地址:https://089u.com/f/21793581-479683890-c57ebb 访问密码:2698

15、企业网站后台管理页面模板

图片

这款后面模板是基于Bootstrap构建,轻量级的BsAdmin企业网站后台模板,风格简洁简单,是中小型项目首选,不管你是初级还是高级工程师,都有可以快速上手。BsAdmin是由Bootstrap4开发,可以在模板任意使用jq或vue。下载地址:https://089u.com/f/21793581-479683944-e1b87a 访问密码:2698

原文链接

自行翻书特效,纯CSS+HTML

效果见下:

代码:

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
    <style>

::before,
::after {
	content: "";
}

.component{
	background: #deebef;
	color: #34495e;
	font-family: 'Lato', 'Arial', sans-serif;
	font-weight: 400;
	line-height: 1.2;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: #2c3e50;
	text-decoration: none;
}

.btn {
	display: inline-block;
	text-transform: uppercase;
	border: 2px solid #2c3e50;
	margin-top: 100px; 
	font-size: 0.7em;
	font-weight: 700;
	padding: 0.1em 0.4em;
	text-align: center;
	-webkit-transition: color 0.3s, border-color 0.3s;
	-moz-transition: color 0.3s, border-color 0.3s;
	transition: color 0.3s, border-color 0.3s;
}

.btn:hover {
	border-color: #16a085;
	color: #16a085;
}

/* basic grid, only for this demo */

.align {
	clear: both;
	margin: 90px auto 20px;
	width: 100%;
	max-width: 1170px;
	text-align: center;
}

.align > li {
	width: 500px;
	min-height: 300px;
	display: inline-block;
	margin: 30px 20px 30px 30px;
	padding: 0 0 0 60px;
	vertical-align: top;
}

/* ///////////////////////////////////////////////////

HARDCOVER
Table of Contents

1. container
2. background & color
3. opening cover, back cover and pages
4. position, transform y transition
5. events
6. Bonus
	- Cover design
	- Ribbon
	- Figcaption
7. mini-reset

/////////////////////////////////////////////////////*/

/*
	1. container
*/

.book {
	position: relative;
	width: 160px; 
	height: 220px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

/*
	2. background & color
*/

/* HARDCOVER FRONT */
.hardcover_front li:first-child {
	background-color: #eee;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* reverse */
.hardcover_front li:last-child {
	background: #fffbec;
}

/* HARDCOVER BACK */
.hardcover_back li:first-child {
	background: #fffbec;
}

/* reverse */
.hardcover_back li:last-child {
	background: #fffbec;
}

.book_spine li:first-child {
	background: #eee;
}
.book_spine li:last-child {
	background: #333;
}

/* thickness of cover */

.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
	background: #999;
}

/* page */

.page > li {
	background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
	box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
	border-radius: 0px 5px 5px 0px;
}

/*
	3. opening cover, back cover and pages
*/

.hardcover_front {
	-webkit-transform: rotateY(-34deg) translateZ(8px);
	-moz-transform: rotateY(-34deg) translateZ(8px);
	transform: rotateY(-34deg) translateZ(8px);
	z-index: 100;
}

.hardcover_back {
	-webkit-transform: rotateY(-15deg) translateZ(-8px);
	-moz-transform: rotateY(-15deg) translateZ(-8px);
	transform: rotateY(-15deg) translateZ(-8px);
}

.page li:nth-child(1) {
	-webkit-transform: rotateY(-28deg);
	-moz-transform: rotateY(-28deg);
	transform: rotateY(-28deg);
}

.page li:nth-child(2) {
	-webkit-transform: rotateY(-30deg);
	-moz-transform: rotateY(-30deg);
	transform: rotateY(-30deg);
}

.page li:nth-child(3) {
	-webkit-transform: rotateY(-32deg);
	-moz-transform: rotateY(-32deg);
	transform: rotateY(-32deg);
}

.page li:nth-child(4) {
	-webkit-transform: rotateY(-34deg);
	-moz-transform: rotateY(-34deg);
	transform: rotateY(-34deg);
}

.page li:nth-child(5) {
	-webkit-transform: rotateY(-36deg);
	-moz-transform: rotateY(-36deg);
	transform: rotateY(-36deg);
}

/*
	4. position, transform & transition
*/

.hardcover_front,
.hardcover_back,
.book_spine,
.hardcover_front li,
.hardcover_back li,
.book_spine li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.hardcover_front,
.hardcover_back {
	-webkit-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
}

.hardcover_front {
	-webkit-transition: all 0.8s ease, z-index 0.6s;
	-moz-transition: all 0.8s ease, z-index 0.6s;
	transition: all 0.8s ease, z-index 0.6s;
}

/* HARDCOVER front */
.hardcover_front li:first-child {
	cursor: default;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-transform: translateZ(2px);
	-moz-transform: translateZ(2px);
	transform: translateZ(2px);
}

.hardcover_front li:last-child {
	-webkit-transform: rotateY(180deg) translateZ(2px);
	-moz-transform: rotateY(180deg) translateZ(2px);
	transform: rotateY(180deg) translateZ(2px);
}

/* HARDCOVER back */
.hardcover_back li:first-child {
	-webkit-transform: translateZ(2px);
	-moz-transform: translateZ(2px);
	transform: translateZ(2px);
}

.hardcover_back li:last-child {
	-webkit-transform: translateZ(-2px);
	-moz-transform: translateZ(-2px);
	transform: translateZ(-2px);
}

/* thickness of cover */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
	position: absolute;
	top: 0;
	left: 0;
}

/* HARDCOVER front */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before {
	width: 4px;
	height: 100%;
}

.hardcover_front li:first-child:after {
	-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.hardcover_front li:first-child:before {
	-webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before {
	width: 4px;
	height: 160px;
}

.hardcover_front li:last-child:after {
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
}
.hardcover_front li:last-child:before {
	box-shadow: 0px 0px 30px 5px #333;
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
}

/* thickness of cover */

.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before {
	width: 4px;
	height: 100%;
}

.hardcover_back li:first-child:after {
	-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}
.hardcover_back li:first-child:before {
	-webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
	transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before {
	width: 4px;
	height: 160px;
}

.hardcover_back li:last-child:after {
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
}

.hardcover_back li:last-child:before {
	box-shadow: 10px -1px 80px 20px #666;
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
}

/* BOOK SPINE */
.book_spine {
	-webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
	-moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
	transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
	width: 16px;
	z-index: 0;
}

.book_spine li:first-child {
	-webkit-transform: translateZ(2px);
	-moz-transform: translateZ(2px);
	transform: translateZ(2px);
}

.book_spine li:last-child {
	-webkit-transform: translateZ(-2px);
	-moz-transform: translateZ(-2px);
	transform: translateZ(-2px);
}

/* thickness of book spine */
.book_spine li:first-child:after,
.book_spine li:first-child:before {
	width: 4px;
	height: 100%;
}

.book_spine li:first-child:after {
	-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
	transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.book_spine li:first-child:before {
	-webkit-transform: rotateY(-90deg) translateZ(-12px);
	-moz-transform: rotateY(-90deg) translateZ(-12px);
	transform: rotateY(-90deg) translateZ(-12px);
}

.book_spine li:last-child:after,
.book_spine li:last-child:before {
	width: 4px;
	height: 16px;
}

.book_spine li:last-child:after {
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
}

.book_spine li:last-child:before {
	box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
	-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
	transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
}

.page,
.page > li {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.page {
	width: 100%;
	height: 98%;
	top: 1%;
	left: 3%;
	z-index: 10;
}

.page > li {
	width: 100%;
	height: 100%;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	transform-origin: left center;
	-webkit-transition-property: transform;
	-moz-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	transition-timing-function: ease;
}

.page > li:nth-child(1) {
	-webkit-transition-duration: 0.6s;
	-moz-transition-duration: 0.6s;
	transition-duration: 0.6s;
}

.page > li:nth-child(2) {
	-webkit-transition-duration: 0.6s;
	-moz-transition-duration: 0.6s;
	transition-duration: 0.6s;
}

.page > li:nth-child(3) {
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.page > li:nth-child(4) {
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.page > li:nth-child(5) {
	-webkit-transition-duration: 0.6s;
	-moz-transition-duration: 0.6s;
	transition-duration: 0.6s;
}

/*
	5. events
*/

.book:hover > .hardcover_front {
	-webkit-transform: rotateY(-145deg) translateZ(0);
	-moz-transform: rotateY(-145deg) translateZ(0);
	transform: rotateY(-145deg) translateZ(0);
	z-index: 0;
}

.book:hover > .page li:nth-child(1) {
	-webkit-transform: rotateY(-30deg);
	-moz-transform: rotateY(-30deg);
	transform: rotateY(-30deg);
	-webkit-transition-duration: 1.5s;
	-moz-transition-duration: 1.5s;
	transition-duration: 1.5s;
}

.book:hover > .page li:nth-child(2) {
	-webkit-transform: rotateY(-35deg);
	-moz-transform: rotateY(-35deg);
	transform: rotateY(-35deg);
	-webkit-transition-duration: 1.8s;
	-moz-transition-duration: 1.8s;
	transition-duration: 1.8s;
}

.book:hover > .page li:nth-child(3) {
	-webkit-transform: rotateY(-118deg);
	-moz-transform: rotateY(-118deg);
	transform: rotateY(-118deg);
	-webkit-transition-duration: 1.6s;
	-moz-transition-duration: 1.6s;
	transition-duration: 1.6s;
}

.book:hover > .page li:nth-child(4) {
	-webkit-transform: rotateY(-130deg);
	-moz-transform: rotateY(-130deg);
	transform: rotateY(-130deg);
	-webkit-transition-duration: 1.4s;
	-moz-transition-duration: 1.4s;
	transition-duration: 1.4s;
}

.book:hover > .page li:nth-child(5) {
	-webkit-transform: rotateY(-140deg);
	-moz-transform: rotateY(-140deg);
	transform: rotateY(-140deg);
	-webkit-transition-duration: 1.2s;
	-moz-transition-duration: 1.2s;
	transition-duration: 1.2s;
}

/*
	6. Bonus
*/

/* cover CSS */

.coverDesign {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.coverDesign::after {
	background-image: -webkit-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
	background-image: -moz-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
	background-image: linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.coverDesign h1 {
	color: #fff;
	font-size: 2.2em;
	letter-spacing: 0.05em;
	text-align: center;
	margin: 54% 0 0 0;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
}

.coverDesign p {
	color: #f8f8f8;
	font-size: 1em;
	text-align: center;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
}

.yellow {
	background-color: #f1c40f;
	background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
	background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
	background-image: linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
}

.blue {
	background-color: #3498db;
	background-image: -webkit-linear-gradient(top, #3498db 58%, #2a90d4 0%);
	background-image: -moz-linear-gradient(top, #3498db 58%, #2a90d4 0%);
	background-image: linear-gradient(top, #3498db 58%, #2a90d4 0%);
}

.grey {
	background-color: #f8e9d1;
	background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
	background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
	background-image: linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
}

/* Basic ribbon */

.ribbon {
	background: #c0392b;
	color: #fff;
	display: block;
	font-size: 0.7em;
	position: absolute;
	top: 11px;
	right: 1px;
	width: 40px;
	height: 20px;
	line-height: 20px;
	letter-spacing: 0.15em; 
	text-align: center;
	-webkit-transform: rotateZ(45deg) translateZ(1px);
	-moz-transform: rotateZ(45deg) translateZ(1px);
	transform: rotateZ(45deg) translateZ(1px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 10;
}

.ribbon::before,
.ribbon::after{
	position: absolute;
	top: -20px;
	width: 0;
	height: 0;
	border-bottom: 20px solid #c0392b;
	border-top: 20px solid transparent;
}

.ribbon::before{
	left: -20px;
	border-left: 20px solid transparent;
}

.ribbon::after{
	right: -20px;
	border-right: 20px solid transparent;
}

/* figcaption */

figcaption {
	padding-left: 40px;
	text-align: left;
	position: absolute;
	top: 0%;
	left: 160px;
	width: 310px;
}

figcaption h1 {
	margin: 0;
}

figcaption span {
	color: #16a085;
	padding: 0.6em 0 1em 0;
	display: block;
}

figcaption p {
	color: #63707d;
	line-height: 1.3;
}

/* Media Queries */
@media screen and (max-width: 37.8125em) {
	.align > li {
		width: 100%;
		min-height: 440px;
		height: auto;
		padding: 0;
		margin: 0 0 30px 0;
	}

	.book {
		margin: 0 auto;
	}

	figcaption {
		text-align: center;
		width: 320px;
		top: 250px;
		padding-left: 0;
		left: -80px;
		font-size: 90%;
	}
}

</style>

</head>

<body>

  <div class="component">
				<ul class="align">
					<li>
						<figure class='book'>

							<!-- Front -->

							<ul class='hardcover_front'>
								<li>
									<div class="coverDesign blue">
										<h1>Felicity</h1>
										<p>cool</p>
									</div>
								</li>
								<li></li>
							</ul>

							<!-- Pages -->

							<ul class='page'>
								<li></li>
								<li>
									<a class="btn"  >你在闲逛</a>
								</li>
								<li></li>
								<li></li>
								<li></li>
							</ul>

							<!-- Back -->

							<ul class='hardcover_back'>
								<li></li>
								<li></li>
							</ul>
							<ul class='book_spine'>
								<li></li>
								<li></li>
							</ul>
							 
						</figure>
					</li>
				</ul>
			</div>
<div style="text-align:center;clear:both"></div>
</body>

</html>

参考原文:www.html5tricks.com

首页蜡烛代码

老版(无数字):

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<style>
.outerme {
  width: 10vw;
  height: 5px;
  margin-left: 0;
  margin-top: 10px;  
  margin-bottom: 150px;
  /*background:#de38a0;*/
  transform: scale(0.7, 0.7);
  -ms-transform: scale(0.7, 0.7);    /* IE 9 */
  -webkit-transform: scale(0.7, 0.7);      /* Safari and Chrome */
}

.thefloor {
  /*position: absolute;*/
  left: 50%;
  top: 50%;
  width: 280px;
  height: 5px;
  background: #673C63;
  transform: translate(0, -50%);
  box-shadow: 0px 2px 5px #111;
  z-index: 2;
}

.candles {
  /*position: absolute;*/
  left: 50%;
  top: 50%;
  width: 250px;
  height: 150px;
  transform: translate(0, 0);
  z-index: 1;
  /*background-color:#fff;
  animation: change-background 3s infinite linear;*/
}

.candle1 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 35px;
  height: 100px;
  background: #fff;
  border: 3px solid #673C63;
  border-bottom: 0px;
  border-radius: 3px;
  transform-origin: center right;
  transform: translate(60%, -25%);
  box-shadow: -2px 0px 0px #95c6f2 inset;
  animation: expand-body 3s infinite linear;
}

.candle1__stick, .candle2__stick {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 3px;
  height: 15px;
  background: #673C63;
  border-radius: 8px;
  transform: translate(-50%, -100%);
}

.candle2__stick {
  height: 12px;
  transform-origin: bottom center;
  animation: stick-animation 3s infinite linear;
}

.candle1__eyes, .candle2__eyes {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 35px;
  height: 30px;
  transform: translate(-50%, 0%);
}

.candle1__eyes-one {
  position: absolute;
  left: 30%;
  top: 20%;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #673C63;
  transform: translate(-70%, 0%);
  animation: blink-eyes 3s infinite linear;
}

.candle1__eyes-two {
  position: absolute;
  left: 70%;
  top: 20%;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #673C63;
  transform: translate(-70%, 0%);
  animation: blink-eyes 3s infinite linear;
}

.candle1__mouth {
  position: absolute;
  left: 40%;
  top: 20%;
  width: 0px;
  height: 0px;
  border-radius: 20px;
  background: #673C63;
  transform: translate(-50%, -50%);
  animation: uff 3s infinite linear;
}

.candle__smoke-one {
  position: absolute;
  left: 30%;
  top: 50%;
  width: 30px;
  height: 3px;
  background: grey;
  transform: translate(-50%, -50%);
  animation: move-left 3s infinite linear;
}

.candle__smoke-two {
  position: absolute;
  left: 30%;
  top: 40%;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: grey;
  transform: translate(-50%, -50%);
  animation: move-top 3s infinite linear;
}

.candle2 {
  position: absolute;
  left: 20%;
  top: 65%;
  width: 42px;
  height: 60px;
  background: #fff;
  border: 3px solid #673C63;
  border-bottom: 0px;
  border-radius: 3px;
  transform: translate(60%, -15%);
  transform-origin: center right;
  box-shadow: -2px 0px 0px #95c6f2 inset;
  animation: shake-left 3s infinite linear;
}

.candle2__eyes-one {
  position: absolute;
  left: 30%;
  top: 50%;
  width: 5px;
  height: 5px;
  display: inline-block;
  border: 0px solid #673C63;
  border-radius: 100%;
  float: left;
  background: #673C63;
  transform: translate(-80%, 0%);
  animation: changeto-lower 3s infinite linear;
}

.candle2__eyes-two {
  position: absolute;
  left: 70%;
  top: 50%;
  width: 5px;
  height: 5px;
  display: inline-block;
  border: 0px solid #673C63;
  border-radius: 100%;
  float: left;
  background: #673C63;
  transform: translate(-80%, 0%);
  animation: changeto-greater 3s infinite linear;
}

.light__wave {
  position: absolute;
  top: 35%;
  left: 35%;
  width: 75px;
  height: 75px;
  border-radius: 100%;
  z-index: 0;
  transform: translate(-25%, -50%) scale(2.5, 2.5);
  border: 2px solid rgba(255, 255, 255, 0.2);
  animation: expand-light 3s infinite linear;
}

.candle2__fire {
  position: absolute;
  top: 50%;
  left: 40%;
  display: block;
  width: 16px;
  height: 20px;
  background-color: red;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #FF9800;
  transform: translate(-50%, -50%);
  animation: dance-fire 3s infinite linear;
}

@keyframes blink-eyes {
  0%,35% {
    opacity: 1;
    transform: translate(-70%, 0%);
  }
  36%,39% {
    opacity: 0;
    transform: translate(-70%, 0%);
  }
  40% {
    opacity: 1;
    transform: translate(-70%, 0%);
  }
  50%,65% {
    transform: translate(-140%, 0%);
  }
  66% {
    transform: translate(-70%, 0%);
  }
}
@keyframes expand-body {
  0%,40% {
    transform: scale(1, 1) translate(60%, -25%);
  }
  45%,55% {
    transform: scale(1.1, 1.1) translate(60%, -28%);
  }
  60% {
    transform: scale(0.89, 0.89) translate(60%, -25%);
  }
  65% {
    transform: scale(1, 1) translate(60%, -25%);
  }
  70% {
    transform: scale(0.95, 0.95) translate(60%, -25%);
  }
  75% {
    transform: scale(1, 1) translate(60%, -25%);
  }
}
@keyframes uff {
  0%,40% {
    width: 0px;
    height: 0px;
  }
  50%,54% {
    width: 15px;
    height: 15px;
    left: 30%;
  }
  59% {
    width: 5px;
    height: 5px;
    left: 20%;
  }
  62% {
    width: 2px;
    height: 2px;
    left: 20%;
  }
  67% {
    width: 0px;
    height: 0px;
    left: 30%;
  }
}
@keyframes change-background{
  0%,59%,98%,100% {
    background: #fff;
  }
  61%,97% {
    background: #b3afcc;   /* 原色:f8ae39 */
  }
}
@keyframes move-left {
  0%,59%,100% {
    width: 0px;
    left: 40%;
  }
  60% {
    width: 30px;
    left: 30%;
  }
  68% {
    width: 0px;
    left: 20%;
  }
}
@keyframes move-top {
  0%,64%,100% {
    width: 0px;
    height: 0px;
    top: 0%;
  }
  65% {
    width: 10px;
    height: 10px;
    top: 40%;
    left: 40%;
  }
  80% {
    width: 0px;
    height: 0px;
    top: 20%;
  }
}
@keyframes shake-left {
  0%,40% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  50%,54% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  59% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  62% {
    left: 18%;
    transform: translate(60%, -15%);
  }
  65% {
    left: 21%;
    transform: translate(60%, -15%);
  }
  67% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  75% {
    left: 20%;
    transform: scale(1.15, 0.85) translate(60%, -15%);
    background: #fff;
    border-color: #673C63;
  }
  91% {
    left: 20%;
    transform: scale(1.18, 0.82) translate(60%, -10%);
    background: #F44336;
    border-color: #F44336;
    box-shadow: -2px 0px 0px #F44336 inset;
  }
  92% {
    left: 20%;
    transform: scale(0.85, 1.15) translate(60%, -15%);
  }
  95% {
    left: 20%;
    transform: scale(1.05, 0.95) translate(60%, -15%);
  }
  97% {
    left: 20%;
    transform: scale(1, 1) translate(60%, -15%);
  }
}
@keyframes stick-animation {
  0%,40% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
  50%,54% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
  59% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
  62% {
    left: 50%;
    top: 0%;
    transform: rotateZ(-15deg) translate(-50%, -100%);
  }
  65% {
    left: 50%;
    top: 0%;
    transform: rotateZ(15deg) translate(-50%, -100%);
  }
  70% {
    left: 50%;
    top: 0%;
    transform: rotateZ(-5deg) translate(-50%, -100%);
  }
  72% {
    left: 50%;
    top: 0%;
    transform: rotateZ(5deg) translate(-50%, -100%);
  }
  74%,84% {
    left: 50%;
    top: 0%;
    transform: rotateZ(0deg) translate(-50%, -100%);
  }
  85% {
    transform: rotateZ(180deg) translate(0%, 120%);
  }
  92% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
}
@keyframes expand-light {
  10%,29%,59%,89% {
    transform: translate(-25%, -50%) scale(0, 0);
    border: 2px solid rgba(255, 255, 191, 0);
  }
  90%,20%,50% {
    transform: translate(-25%, -50%) scale(1, 1);
  }
  95%,96%,26%,27%,56%,57% {
    transform: translate(-25%, -50%) scale(2, 2);
    border: 2px solid rgba(255, 255,191, 0.5);
  }
  0%,28%,58%,100% {
    transform: translate(-25%, -50%) scale(2.5, 2.5);
    border: 2px solid rgba(255, 255, 191, 0.2);
  }
}
@keyframes dance-fire {
  59%,89% {
    left: 40%;
    width: 0px;
    height: 0px;
  }
  90%,0%,7%,15%,23%,31%,39%,47%,55% {
    left: 40.8%;
    width: 16px;
    height: 20px;
    background: #FFC107;
  }
  94%,3%,11%,19%,27%,35%,43%,51%,58% {
    left: 41.2%;
    width: 16px;
    height: 20px;
    background: #FF9800;
  }
}
@keyframes changeto-lower {
  0%,70%,90% {
    padding: 0px;
    display: inline-block;
    border-radius: 100%;
    background: #673C63;
    border-width: 0 0 0 0;
    border: 0px solid #673C63;
    transform: translate(-90%, 0%);
  }
  71%,89% {
    background: none;
    border: solid #673C63;
    border-radius: 0px;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 1px;
    float: left;
    transform-origin: bottom left;
    transform: rotate(-45deg) translate(-50%, -65%);
    -webkit-transform: rotate(-45deg) translate(-50%, -65%);
  }
}
@keyframes changeto-greater {
  0%,70%,90% {
    top: 50%;
    padding: 0px;
    display: inline-block;
    border-radius: 100%;
    background: #673C63;
    border-width: 0 0 0 0;
    border: 0px solid #673C63;
    transform: translate(-80%, 0%);
  }
  71%,89% {
    top: 30%;
    background: none;
    border: solid #673C63;
    border-radius: 0px;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 1px;
    float: left;
    transform-origin: bottom left;
    transform: rotate(135deg) translate(-80%, 20%);
    -webkit-transform: rotate(135deg) translate(-80%, 20%);
  }
}
</style>

</head>
<body>

<div  class="outerme">
  <div class="candles">
    <div class="light__wave"></div>
    <div class="candle1">
      <div class="candle1__body">
        <div class="candle1__eyes">
          <span class="candle1__eyes-one"></span>
          <span class="candle1__eyes-two"></span>
        </div>
        <div class="candle1__mouth"></div>
      </div>
      <div class="candle1__stick"></div>
    </div>
    
    <div class="candle2">
      <div class="candle2__body">
        <div class="candle2__eyes">
          <div class="candle2__eyes-one"></div>
          <div class="candle2__eyes-two"></div>
        </div>
      </div>
      <div class="candle2__stick"></div>
    </div>
    <div class="candle2__fire"></div>
    <div class="sparkles-one"></div>
    <div class="sparkles-two"></div>
    <div class="candle__smoke-one">

    </div>
    <div class="candle__smoke-two">

    </div>
    
  </div>
  <div class="thefloor">
  </div>

</div>


</body>
</html>

新版(有数字):

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<style>
.outerme {
  width: 10vw;
  height: 5px;
  margin-left: 0;
  margin-top: 10px;  
  margin-bottom: 150px;
  /*background:#de38a0;*/
  transform: scale(0.7, 0.7);
  -ms-transform: scale(0.7, 0.7);    /* IE 9 */
  -webkit-transform: scale(0.7, 0.7);      /* Safari and Chrome */
}

.thefloor {
  /*position: absolute;*/
  left: 50%;
  top: 50%;
  width: 280px;
  height: 5px;
  background: #673C63;
  transform: translate(0, -50%);
  box-shadow: 0px 2px 5px #111;
  z-index: 2;
}

.candles {
  /*position: absolute;*/
  left: 50%;
  top: 50%;
  width: 250px;
  height: 150px;
  transform: translate(-5%, 0);
  z-index: 1;
  /*background-color:#fff;
  animation: change-background 3s infinite linear;*/
}

.candle-text {
  position: absolute;
  left: 72%;
  bottom: -13%;
  width: 50px;
  /*background: #ddd;*/
  transform-origin: center right;
  transform: translate(70%,0);
  text-align: center;
  font-size: 28pt;
  color: #673C63;
  font-family: "Helvetica", Serif,  "Times New Roman";
}

.candle1 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 35px;
  height: 100px;
  background: #fff;
  border: 3px solid #673C63;
  border-bottom: 0px;
  border-radius: 3px;
  transform-origin: center right;
  transform: translate(60%, -25%);
  box-shadow: -2px 0px 0px #95c6f2 inset;
  animation: expand-body 3s infinite linear;
}

.candle1__stick, .candle2__stick {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 3px;
  height: 15px;
  background: #673C63;
  border-radius: 8px;
  transform: translate(-50%, -100%);
}

.candle2__stick {
  height: 12px;
  transform-origin: bottom center;
  animation: stick-animation 3s infinite linear;
}

.candle1__eyes, .candle2__eyes {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 35px;
  height: 30px;
  transform: translate(-50%, 0%);
}

.candle1__eyes-one {
  position: absolute;
  left: 30%;
  top: 20%;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #673C63;
  transform: translate(-70%, 0%);
  animation: blink-eyes 3s infinite linear;
}

.candle1__eyes-two {
  position: absolute;
  left: 70%;
  top: 20%;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #673C63;
  transform: translate(-70%, 0%);
  animation: blink-eyes 3s infinite linear;
}

.candle1__mouth {
  position: absolute;
  left: 40%;
  top: 20%;
  width: 0px;
  height: 0px;
  border-radius: 20px;
  background: #673C63;
  transform: translate(-50%, -50%);
  animation: uff 3s infinite linear;
}

.candle__smoke-one {
  position: absolute;
  left: 30%;
  top: 50%;
  width: 30px;
  height: 3px;
  background: grey;
  transform: translate(-50%, -50%);
  animation: move-left 3s infinite linear;
}

.candle__smoke-two {
  position: absolute;
  left: 30%;
  top: 40%;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: grey;
  transform: translate(-50%, -50%);
  animation: move-top 3s infinite linear;
}

.candle2 {
  position: absolute;
  left: 20%;
  top: 65%;
  width: 42px;
  height: 60px;
  background: #fff;
  border: 3px solid #673C63;
  border-bottom: 0px;
  border-radius: 3px;
  transform: translate(60%, -15%);
  transform-origin: center right;
  box-shadow: -2px 0px 0px #95c6f2 inset;
  animation: shake-left 3s infinite linear;
}

.candle2__eyes-one {
  position: absolute;
  left: 30%;
  top: 50%;
  width: 5px;
  height: 5px;
  display: inline-block;
  border: 0px solid #673C63;
  border-radius: 100%;
  float: left;
  background: #673C63;
  transform: translate(-80%, 0%);
  animation: changeto-lower 3s infinite linear;
}

.candle2__eyes-two {
  position: absolute;
  left: 70%;
  top: 50%;
  width: 5px;
  height: 5px;
  display: inline-block;
  border: 0px solid #673C63;
  border-radius: 100%;
  float: left;
  background: #673C63;
  transform: translate(-80%, 0%);
  animation: changeto-greater 3s infinite linear;
}

.light__wave {
  position: absolute;
  top: 35%;
  left: 35%;
  width: 75px;
  height: 75px;
  border-radius: 100%;
  z-index: 0;
  transform: translate(-25%, -50%) scale(2.5, 2.5);
  border: 2px solid rgba(255, 255, 255, 0.2);
  animation: expand-light 3s infinite linear;
}

.candle2__fire {
  position: absolute;
  top: 50%;
  left: 40%;
  display: block;
  width: 16px;
  height: 20px;
  background-color: red;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #FF9800;
  transform: translate(-50%, -50%);
  animation: dance-fire 3s infinite linear;
}

@keyframes blink-eyes {
  0%,35% {
    opacity: 1;
    transform: translate(-70%, 0%);
  }
  36%,39% {
    opacity: 0;
    transform: translate(-70%, 0%);
  }
  40% {
    opacity: 1;
    transform: translate(-70%, 0%);
  }
  50%,65% {
    transform: translate(-140%, 0%);
  }
  66% {
    transform: translate(-70%, 0%);
  }
}
@keyframes expand-body {
  0%,40% {
    transform: scale(1, 1) translate(60%, -25%);
  }
  45%,55% {
    transform: scale(1.1, 1.1) translate(60%, -28%);
  }
  60% {
    transform: scale(0.89, 0.89) translate(60%, -25%);
  }
  65% {
    transform: scale(1, 1) translate(60%, -25%);
  }
  70% {
    transform: scale(0.95, 0.95) translate(60%, -25%);
  }
  75% {
    transform: scale(1, 1) translate(60%, -25%);
  }
}
@keyframes uff {
  0%,40% {
    width: 0px;
    height: 0px;
  }
  50%,54% {
    width: 15px;
    height: 15px;
    left: 30%;
  }
  59% {
    width: 5px;
    height: 5px;
    left: 20%;
  }
  62% {
    width: 2px;
    height: 2px;
    left: 20%;
  }
  67% {
    width: 0px;
    height: 0px;
    left: 30%;
  }
}
@keyframes change-background{
  0%,59%,98%,100% {
    background: #fff;
  }
  61%,97% {
    background: #b3afcc;   /* 原色:f8ae39 */
  }
}
@keyframes move-left {
  0%,59%,100% {
    width: 0px;
    left: 40%;
  }
  60% {
    width: 30px;
    left: 30%;
  }
  68% {
    width: 0px;
    left: 20%;
  }
}
@keyframes move-top {
  0%,64%,100% {
    width: 0px;
    height: 0px;
    top: 0%;
  }
  65% {
    width: 10px;
    height: 10px;
    top: 40%;
    left: 40%;
  }
  80% {
    width: 0px;
    height: 0px;
    top: 20%;
  }
}
@keyframes shake-left {
  0%,40% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  50%,54% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  59% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  62% {
    left: 18%;
    transform: translate(60%, -15%);
  }
  65% {
    left: 21%;
    transform: translate(60%, -15%);
  }
  67% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  75% {
    left: 20%;
    transform: scale(1.15, 0.85) translate(60%, -15%);
    background: #fff;
    border-color: #673C63;
  }
  91% {
    left: 20%;
    transform: scale(1.18, 0.82) translate(60%, -10%);
    background: #F44336;
    border-color: #F44336;
    box-shadow: -2px 0px 0px #F44336 inset;
  }
  92% {
    left: 20%;
    transform: scale(0.85, 1.15) translate(60%, -15%);
  }
  95% {
    left: 20%;
    transform: scale(1.05, 0.95) translate(60%, -15%);
  }
  97% {
    left: 20%;
    transform: scale(1, 1) translate(60%, -15%);
  }
}
@keyframes stick-animation {
  0%,40% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
  50%,54% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
  59% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
  62% {
    left: 50%;
    top: 0%;
    transform: rotateZ(-15deg) translate(-50%, -100%);
  }
  65% {
    left: 50%;
    top: 0%;
    transform: rotateZ(15deg) translate(-50%, -100%);
  }
  70% {
    left: 50%;
    top: 0%;
    transform: rotateZ(-5deg) translate(-50%, -100%);
  }
  72% {
    left: 50%;
    top: 0%;
    transform: rotateZ(5deg) translate(-50%, -100%);
  }
  74%,84% {
    left: 50%;
    top: 0%;
    transform: rotateZ(0deg) translate(-50%, -100%);
  }
  85% {
    transform: rotateZ(180deg) translate(0%, 120%);
  }
  92% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
}
@keyframes expand-light {
  10%,29%,59%,89% {
    transform: translate(-25%, -50%) scale(0, 0);
    border: 2px solid rgba(255, 255, 191, 0);
  }
  90%,20%,50% {
    transform: translate(-25%, -50%) scale(1, 1);
  }
  95%,96%,26%,27%,56%,57% {
    transform: translate(-25%, -50%) scale(2, 2);
    border: 2px solid rgba(255, 255,191, 0.5);
  }
  0%,28%,58%,100% {
    transform: translate(-25%, -50%) scale(2.5, 2.5);
    border: 2px solid rgba(255, 255, 191, 0.2);
  }
}
@keyframes dance-fire {
  59%,89% {
    left: 40%;
    width: 0px;
    height: 0px;
  }
  90%,0%,7%,15%,23%,31%,39%,47%,55% {
    left: 40.8%;
    width: 16px;
    height: 20px;
    background: #FFC107;
  }
  94%,3%,11%,19%,27%,35%,43%,51%,58% {
    left: 41.2%;
    width: 16px;
    height: 20px;
    background: #FF9800;
  }
}
@keyframes changeto-lower {
  0%,70%,90% {
    padding: 0px;
    display: inline-block;
    border-radius: 100%;
    background: #673C63;
    border-width: 0 0 0 0;
    border: 0px solid #673C63;
    transform: translate(-90%, 0%);
  }
  71%,89% {
    background: none;
    border: solid #673C63;
    border-radius: 0px;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 1px;
    float: left;
    transform-origin: bottom left;
    transform: rotate(-45deg) translate(-50%, -65%);
    -webkit-transform: rotate(-45deg) translate(-50%, -65%);
  }
}
@keyframes changeto-greater {
  0%,70%,90% {
    top: 50%;
    padding: 0px;
    display: inline-block;
    border-radius: 100%;
    background: #673C63;
    border-width: 0 0 0 0;
    border: 0px solid #673C63;
    transform: translate(-80%, 0%);
  }
  71%,89% {
    top: 30%;
    background: none;
    border: solid #673C63;
    border-radius: 0px;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 1px;
    float: left;
    transform-origin: bottom left;
    transform: rotate(135deg) translate(-80%, 20%);
    -webkit-transform: rotate(135deg) translate(-80%, 20%);
  }
}
</style>

</head>
<body>

<div  class="outerme">
  <div class="candles">
    <div class="light__wave"></div>
    <div class="candle1">
      <div class="candle1__body">
        <div class="candle1__eyes">
          <span class="candle1__eyes-one"></span>
          <span class="candle1__eyes-two"></span>
        </div>
        <div class="candle1__mouth"></div>
      </div>
      <div class="candle1__stick"></div>
    </div>
		   <!-- 在这里改数字 -->
    <div class="candle-text"> 0 </div>
    
    <div class="candle2">
      <div class="candle2__body">
        <div class="candle2__eyes">
          <div class="candle2__eyes-one"></div>
          <div class="candle2__eyes-two"></div>
        </div>
      </div>
      <div class="candle2__stick"></div>
    </div>
    <div class="candle2__fire"></div>
    <div class="sparkles-one"></div>
    <div class="sparkles-two"></div>
    <div class="candle__smoke-one">

    </div>
    <div class="candle__smoke-two">

    </div>
    
  </div>
  <div class="thefloor">
  </div>

</div>


</body>
</html>

用h5的canvas实现动画的泡沫

效果图1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            background-color: pink;
        }
        canvas{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas width="400" height="400"></canvas>
    <script>
        var oC = document.querySelector("canvas");
        if(oC.getContext){
            var ctx = oC.getContext("2d");
            var arr = [];
            //将数组中的圆绘制到画布上
            setInterval(function(){
                ctx.clearRect(0,0,oC.width,oC.height);
                for(i=0;i<arr.length;i++){
                    ctx.save();
                    ctx.beginPath();
                    ctx.fillStyle = "rgba("+arr[i].red+","+arr[i].blue+","+arr[i].yellow+","+arr[i].alp+")";
                    ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);
                    ctx.fill();
                    ctx.restore();
                    if(arr[i].alp<=0){
                        arr.splice(i,1);
                    }
                    arr[i].r++;
                    arr[i].alp -=0.01;
                }
            },1000/60)
             //往arr中注入随机圆的信息
            setInterval(function(){
                var x = Math.random()*oC.width;
                var y = Math.random()*oC.height;
                var r = 10;
                var red = Math.round(Math.random()*255);
                var blue = Math.round(Math.random()*255);
                var yellow = Math.round(Math.random()*255);
                var alp = 1;
                arr.push({
                    x:x,
                    y:y,
                    r:r,
                    red:red,
                    blue:blue,
                    yellow:yellow,
                    alp:alp,
                })
            },100)
        }
    </script>
</body>
</html>

效果图2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            background-color: pink;
        }
        canvas{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas width="150" height="400"></canvas>
    <script>
        var oC = document.querySelector("canvas");
        if(oC.getContext){
            var ctx = oC.getContext("2d");
            var arr = [];
            //将数组中的圆绘制到画布上
            setInterval(function(){
                ctx.clearRect(0,0,oC.width,oC.height);
                for(i=0;i<arr.length;i++){
                    ctx.save();
                    ctx.beginPath();
                    ctx.fillStyle = "rgba("+arr[i].red+","+arr[i].blue+","+arr[i].yellow+","+arr[i].alp+")";
                    ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);
                    ctx.fill();
                    ctx.restore();
                    arr[i].deg +=6;
                    arr[i].x = arr[i].startX + Math.sin(arr[i].deg*Math.PI/180)*arr[i].step*2;
                    arr[i].y = arr[i].startY - (arr[i].deg*Math.PI/180)*arr[i].step;
                    if(arr[i].Y<=50){
                        arr.splice(i,1);
                    }
                }
            },1000/60)
             //往arr中注入随机圆的信息
            setInterval(function(){
                var x = Math.random()*oC.width;
                var r = Math.random()*6+2;
                var y = oC.height-r;
                var startX = x;
                var startY = y;
                var red = Math.round(Math.random()*255);
                var blue = Math.round(Math.random()*255);
                var yellow = Math.round(Math.random()*255);
                var step = Math.random()*20+10;
                var alp = 1;
                var deg = 0;
                arr.push({
                    x:x,
                    y:y,
                    r:r,
                    red:red,
                    blue:blue,
                    yellow:yellow,
                    alp:alp,
                    step:step,
                    startX:startX,
                    startY:startY,
                    deg:deg
                })
            },100)
        }
    </script>
</body>
</html>

用到的知识点:

 h5中canvas相关的知识点:

  save()      canvas2D API通过将当前状态放入栈中,保存canvas全部状态的方法,调用sava时,将样式容器里的状态压入样式表。

restore()   调用restore时,将样式栈的栈顶状态弹出到样式容器里进行覆盖。

clearRect(x,y,width,height)    清楚指定矩形区域,让清除部分完全透明。

                x与y指定了画布上所绘制的矩形的左上角(相对于原点)的坐标。

fillStyle   设置图形的填充颜色。

closePath()  此方法会通过绘制一条从当前点到开始点的直线来闭合图形。

stroke()    通过线条来绘制图形轮廓。(不会自动调用closePath())

fill()      通过填充区域的内容区域生成实心的图形。(会自动调用closePath())

arc(x,y,radius,startAngle,endAngle,anticlockwise)      画一个以(x,y)为圆心的以radius为半径的圆弧,从startAngle开始到endAngle 结束,按照anticlockwise给定的方向(默认为顺时针)生成。

JS中用到的知识点

 Math.round()   可对一个数进四舍五入取整。

 Math.random() 可生成一个0~1之间的随机数。

 Math.sin()  正弦函数。

 Math.PI()圆周率。

 splice()  可用于删除数组中指定的元素。

                   两个参数:参数一:删除数组第几个。

                                     参数二:删除几个数据。

————————————————

原文链接:https://blog.csdn.net/weixin_43571052/article/details/90233193

首页花瓣代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.container {
  width: 10vw;
  height: 5vw;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.outme{
transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5); /* IE 9 */
-webkit-transform: scale(0.5, 0.5); /* Safari and Chrome */
margin-left: -50px;
}

.common {
  height: 5vw;
  max-height: 100%;
  overflow: auto;
  width: 2vw;
  margin: auto;
  max-width: 100%;
  position: absolute;
  background-color: ;
  border-radius: 0vw 10vw 0vw 10vw;
  box-shadow: inset 0vw 0vw 0vw .1vw #E645D0, 0vw 0vw 1.5vw 0vw #E645D0;
}

.one {
  transform: rotate(45deg);
  left: 0;
  right: 0;
  top: 0;
  bottom: 7.5vw;
}

.two {
  transform: rotate(90deg);
  left: 5.5vw;
  right: 0;
  top: 0;
  bottom: 5.5vw;
}

.three {
  transform: rotate(135deg);
  left: 7.5vw;
  right: 0;
  top: 0;
  bottom: 0;
}

.four {
  transform: rotate(180deg);
  left: 5.5vw;
  right: 0;
  top: 5.5vw;
  bottom: 0;
}

.five {
  transform: rotate(225deg);
  left: 0;
  right: 0;
  top: 7.5vw;
  bottom: 0;
}

.six {
  transform: rotate(270deg);
  left: 0;
  right: 5.5vw;
  top: 5.5vw;
  bottom: 0;
}

.seven {
  transform: rotate(315deg);
  left: 0;
  right: 7.5vw;
  top: 0;
  bottom: 0;
}

.eight {
  transform: rotate(360deg);
  left: 0;
  right: 5.5vw;
  top: 0;
  bottom: 5.5vw;
}

 
 
.one {
  animation: one 1s ease infinite;
  -moz-animation: one 1s ease infinite;
  /* Firefox */
  -webkit-animation: one 1s ease infinite;
  /* Safari and Chrome */
  -o-animation: one 1s ease infinite;
  /* Opera */
}

@keyframes one {
  0%,
  100% {}
  50% {
    background: ;
    box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
  }
}

.two {
  animation: two 1s .125s ease infinite;
  -moz-animation: two 1s .125s ease infinite;
  /* Firefox */
  -webkit-animation: two 1s .125s ease infinite;
  /* Safari and Chrome */
  -o-animation: two 1s .125s ease infinite;
  /* Opera */
}

@keyframes two {
  0%,
  100% {}
  50% {
    background: ;
    box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
  }
}

.three {
  animation: three 1s .25s ease infinite;
  -moz-animation: three 1s .25s ease infinite;
  /* Firefox */
  -webkit-animation: three 1s .25s ease infinite;
  /* Safari and Chrome */
  -o-animation: three 1s .25s ease infinite;
  /* Opera */
}

@keyframes three {
  0%,
  100% {}
  50% {
    background: ;
    box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
  }
}

.four {
  animation: four 1s .375s ease infinite;
  -moz-animation: four 1s .375s ease infinite;
  /* Firefox */
  -webkit-animation: four 1s .375s ease infinite;
  /* Safari and Chrome */
  -o-animation: four 1s .375s ease infinite;
  /* Opera */
}

@keyframes four {
  0%,
  100% {}
  50% {
    background: ;
    box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
  }
}

.five {
  animation: five 1s .5s ease infinite;
  -moz-animation: five 1s .5s ease infinite;
  /* Firefox */
  -webkit-animation: five 1s .5s ease infinite;
  /* Safari and Chrome */
  -o-animation: five 1s .5s ease infinite;
  /* Opera */
}

@keyframes five {
  0%,
  100% {}
  50% {
    background: ;
    box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
  }
}

.six {
  animation: six 1s .625s ease infinite;
  -moz-animation: six 1s .625s ease infinite;
  /* Firefox */
  -webkit-animation: six 1s .625s ease infinite;
  /* Safari and Chrome */
  -o-animation: six 1s .625s ease infinite;
  /* Opera */
}

@keyframes six {
  0%,
  100% {}
  50% {
    background: ;
    box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
  }
}

.seven {
  animation: seven 1s .750s ease infinite;
  -moz-animation: seven 1s .750s ease infinite;
  /* Firefox */
  -webkit-animation: seven 1s .750s ease infinite;
  /* Safari and Chrome */
  -o-animation: seven 1s .750s ease infinite;
  /* Opera */
}

@keyframes seven {
  0%,
  100% {}
  50% {
    background: ;
    box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
  }
}

.eight {
  animation: eight 1s .875s ease infinite;
  -moz-animation: eight 1s .875s ease infinite;
  /* Firefox */
  -webkit-animation: eight 1s .875s ease infinite;
  /* Safari and Chrome */
  -o-animation: eight 1s .875s ease infinite;
  /* Opera */
}

@keyframes eight {
  0%,
  100% {}
  50% {
    background: ;
    box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
  }
}

.container {
  animation: container 5s linear infinite;
  -moz-animation: container 5s linear infinite;
  /* Firefox */
  -webkit-animation: container 5s linear infinite;
  /* Safari and Chrome */
  -o-animation: container 5s linear infinite;
  /* Opera */
}

@keyframes container {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.progress {
  animation: progress 15s ease;
  -moz-animation: progress 15s ease;
  /* Firefox */
  -webkit-animation: progress 15s ease;
  /* Safari and Chrome */
  -o-animation: progress 15s ease;
  /* Opera */
}

@keyframes progress {
  0% {
    left: -24vw;
  }
  10% {
    left: -20vw;
  }
  30% {
    left: -16vw;
  }
  50% {
    left: -12vw;
  }
  65% {
    left: -10vw;
  }
  80% {
    left: -4vw;
  }
  100% {
    left: 0;
  }
}

.fade-in {
  animation: fade-in 2s ease;
  -moz-animation: fade-in 2s ease;
  /* Firefox */
  -webkit-animation: fade-in 2s ease;
  /* Safari and Chrome */
  -o-animation: fade-in 2s ease;
  /* Opera */
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.out {
  animation: out 2s 15s ease;
  -moz-animation: out 2s 15s ease;
  /* Firefox */
  -webkit-animation: out 2s 15s ease;
  /* Safari and Chrome */
  -o-animation: out 2s 15s ease;
  /* Opera */
}

@keyframes out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>

</head>
<body>

<div class="outme">
	<div class="fade-in">
		<div class="container">
			<div class="one common"></div>
			<div class="two common"></div>
			<div class="three common"></div>
			<div class="four common"></div>
			<div class="five common"></div>
			<div class="six common"></div>
			<div class="seven common"></div>
			<div class="eight common"></div>
		</div>
		 
	</div>
</div>

</body>
</html>

H5 – canvas实现帧动画

前言
相信大家小时候一定玩过这样的小人书:

原理是快速切换图片,利用人眼的 视觉暂留(Persistenceofvision)现象,脑补产生动画效果。其实我们的 vedio、GIF 等也是这样实现的,只是它的帧速可能更高。

下面我们就利用 爱奇艺万能播放器 拆分一张GIF图

获得 timg_vedio
显示本地图片
先将照片显示至 Web上,HTML5 中有两种标签可实现:

img
canvas
img
可使用其 src 指定图片,支持 .jpg、.png、.bmp

canvas
canvas 是画布,我们可通过 drawImage() 令其绘制图像:

drawImage(mixed image, int x, int y)
以canvas上指定的坐标点开始,按照图像的原始尺寸大小绘制整个图像。这里的image可以是Image对象,也可以是Canvas对象(下同)。

drawImage(mixed image, int x, int y, int width, int height)
以canvas上指定的坐标点开始,以指定的大小(width和height)绘制整个图像,图像将根据指定的尺寸自动进行相应的缩放。

drawImage(mixed image, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)
将指定图像的局部图像(以(imageX, imageY)为左上角、宽度为imageWidth、高度为imageHeight的矩形部分)绘制到canvas中以(canvasX,canvasY)为左上角坐标、宽度为canvasWidth、高度为canvasHeight的矩形区域中


var imge=document.getElementById(“bmp-test1”);

var cjpg=document.getElementById(“c-jpg”);
var cjpg_tx=cjpg.getContext(“2d”);

// onload 图片加载完后执行
imge.onload=function(){
// 图像偏移x50 y50 图像大小110*110
cjpg_tx.drawImage(imge,50,50,110,110);
}

值得注意的是 JS 中图片为 异步加载,所以我们必须等图片加载完后我们使用 drawImage( )才有效。

canvas实现动画效果
遍历
for (let index = 1; index < 20; index++) {
let testimge=new Image();
let imagename=”timg_vedio/timg_”+index+”.jpg”;
testimge.src=imagename;
testimge.onload=function(){
cjpg_tx.drawImage(testimge,50,50,110,110);
}
}

Q&A
Q: 由于JS 异步机制,无法保证 drawImage( ) 按顺序执行
A: 预加载 策略

var imgWrap = [];
//预加载
for (let i = 1; i < 20; i++) {

let imagename="timg_vedio/timg_"+i+".jpg";
imgWrap[i]=new Image();
imgWrap[i].src=imagename;

}
//定时循环显示
var index = 1;
window.setInterval(function() {
if(index < imgWrap.length-1){
index++;
}
else{
index = 1
}
cjpg_tx.drawImage(imgWrap[index],20,20,110,110);
},80);

代码及图片资源可至百度云 下载(请戳) 提取码: 33xq
————————————————


原文链接:https://blog.csdn.net/weixin_40774605/article/details/106627696

HTML+CSS+JS dTree 树形目录的使用

example 压缩包:https://pan.baidu.com/s/1DI2mM3iSnKtpkV45-gUzAA 提取码: m1pi

使用注意事项:

1)dtree.js里可以修改点击项目的操作

原js文件里的nodeSel和node的样式切换不生效,可以在点击方法里添加

var cur_sel_id = -1;
function setDetail(api_id, name){
    console.log(api_id);
    if(cur_sel_id >= 0){
        var old = document.getElementById("sd"+ cur_sel_id);
        old.className = "node";
    }
    eNew = document.getElementById("sd"+ api_id);
    eNew.className = "nodeSel";
    …………
}

也可在dTree官网查看学习dTree api使用

CSS—display详解

 inline

  常用的inline就是文字和图片,其实inline真没什么好说的,大家可以把它想象成一个杯子里的水,它是“流”,是没有大小和形状的,它的宽度取决于父容器的宽度。

  因此,针对inline的标签,你设置宽度和高度是无效的,通过监控可以知道,该元素实际的宽度和高度都是auto,并不是我们设定的值。

  一个很基础的问题:如何把inline元素转换成“块”元素?相信绝大部分人的回答是display:block,但是你应该知道这不是一个唯一的答案。至少我设置display:table也是可以的吧?

       还有两种情况你应该去了解(如果你不知道的话):

       第一,对inline元素设置float

       还是刚才那个例子,我们对span元素添加一个float:left,运行看看效果,你就会大吃一惊。从显示的效果和监控的结果上看来,span元素已经“块”化。注意,上一节刚刚讲完float,不要忘记float的“破坏性”、“包裹性”,在这里同样适用。

       第二,对inline元素设置position:absolute/fixed

       还是有同一个例子做演示,这次在span元素上加上absolute/fixed,效果大家应该能猜到,和加上float的效果相同。至于absolute/fixed有什么特性,会在下一节介绍position时提到。

3. block

  本系列有一节重点讲解了《盒子模型》,不知道大家看没看过,或者说你已经很了解盒子模型了。

  其实对于block,我觉得就是“盒子模型”。一个元素设置了block,它就必须遵循盒子模型的规则。因此,这里也不再去详细写它了,大家可以去盒子模型那一节好好看看,就那么点内容。

4. inline-block

  这个话题还得从《浏览器默认样式》这一节开始。浏览器默认样式中规定了几个html元素为display:inline-block,回顾一下。

  初学者对于inline-block可能比较陌生,没关系,一步一步来。首先,你应该知道inline是什么样子的,就是一般的文字、图片;其次,你应该知道block是什么样子的,一般的div就是;最后,inline-block顾名思义,它既有inline的特性,又有block的特性,大家可以想想一般的button、input是什么样子的。

  那button举例子。我们在页面中输入若干个<button>,发现它们是“流”式排列的(可以对比一下若干个<div>的排列方式)。但是针对一个button,我们还可以自定义修改它的形状,这样就有“块”的特征。

  因此,inline-block的特点可以总结为:外部看来是“流”,但是自身确实一个“块”。不知道大家理解也无?

1.解释一下display的几个常用的属性值,inline , block, inline-block

  • inline:
    1. 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行. 
    2. 不能更改元素的height,width的值,大小由内容撑开. 
    3. 可以使用padding,margin的left和right产生边距效果,但是top和bottom就不行.
  • block:
    1. 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度. 
    2. 能够改变元素的height,width的值. 
    3. 可以设置padding,margin的各个属性值,top,left,bottom,right都能够产生边距效果.
  •  inline-block:
    1. 结合了inline与block的一些特点,结合了上述inline的第1个特点和block的第2,3个特点.
    2. 用通俗的话讲,就是不独占一行的块级元素。如图:

图一:

图二:

两个图可以看出,display:inline-block后块级元素能够在同一行显示,有人这说不就像浮动一样吗。没错,display:inline-block的效果几乎和浮动一样,但也有不同,接下来讲一下inline-block和浮动的比较。

2.inline-block布局 vs 浮动布局

    a.不同之处:对元素设置display:inline-block ,元素不会脱离文本流,而float就会使得元素脱离文本流,且还有父元素高度坍塌的效果

    b.相同之处:能在某程度上达到一样的效果

  我们先来看看这两种布局:
图一:display:inline-block

图二:对两个孩子使用float:left,我在上一篇浮动布局讲过,这是父元素会高度坍塌,所以要闭合浮动,对box使用overflow:hidden,效果如下:

>>乍一看两个都能做到几乎相同的效果,(仔细看看display:inline-block中有间隙问题,这个留到下面再讲)

  c.浮动布局不太好的地方:参差不齐的现象,我们看一个效果:
图三: 

图四: 

>>从图3,4可以看出浮动的局限性在于,若要元素排满一行,换行后还要整齐排列,就要子元素的高度一致才行,不然就会出现图三的效果,而inline-block就不会。

3.inline-block存在的小问题:

  a.上面可以看到用了display:inline-block后,存在间隙问题,间隙为4像素,这个问题产生的原因是换行引起的,因为我们写标签时通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符,而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

  b.去除空隙的方法:
  1.对父元素添加,{font-size:0},即将字体大小设为0,那么那个空白符也变成0px,从而消除空隙
  现在这种方法已经可以兼容各种浏览器,以前chrome浏览器是不兼容的
图一:

  c.浏览器兼容性:ie6/7是不兼容 display:inline-block的所以要额外处理一下:
  在ie6/7下:
  对于行内元素直接使用{dislplay:inline-block;}
  对于块级元素:需添加{display:inline;zoom:1;}

4.总结:

  display:inline-block的布局方式和浮动的布局方式,究竟使用哪个,我觉得应该根据实际情况来决定的:
  a.对于横向排列东西来说,我更倾向与使用inline-block来布局,因为这样清晰,也不用再像浮动那样清除浮动,害怕布局混乱等等。
  b.对于浮动布局就用于需要文字环绕的时候,毕竟这才是浮动真正的用武之地,水平排列的是就交给inline-block了。

原文:https://www.cnblogs.com/moxuexiaotong/p/10071072.html

javascript中 visibility和display的区别

大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的。

visibility属性用来确定元素是显示还是隐藏的,这用visibility=”visible|hidden”来表示(visible表示显示,hidden表示隐藏)。

当visibility被设置为”hidden”的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。例:

<script language="JavaScript"> 
function toggleVisibility(me){
 if (me.style.visibility=="hidden"){ 
    me.style.visibility="visible"; 
  } 
  else { 
    me.style.visibility="hidden"; 
  } 
} 
</script> 

<div onclick="toggleVisibility(this)" style="position:relative">

第一行文本将会触发”hidden”和”visible”属性,注意第二行的变化。</div> <div>因为visibility会保留元素的位置,所以虽然第一行看不见了但位置还在,第二行内容不会上下移动。</div>

[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]

注意到,当元素被隐藏之后,就不能再接收到其它事件了,所以在第一段代码中,当其被设为”hidden”的时候,就不能再接收响应到事件了,因此也就无法通过鼠标点击第一段文本令其显示出来。

另一方面,display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置,而display实际上是设置元素的浮动特征。

当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像<div>元素一样,它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block,使其可以像<div>一样工作。

将display设置为inline,将使其行为和元素inline一样—即使它是普通的块元素如<div>,它也将会被组合成像<span>那样的输出流。

下面看我实例的代码和效果:

<script language="JavaScript"> 
function toggleDisplay(me){ 
  if (me.style.display=="block"){ 
    me.style.display="inline"; 
    alert("文本现在是:'inline'.");
  }  
  else { 
    if (me.style.display=="inline"){ 
      me.style.display="none";  
      alert("文本现在是:'none'. 3秒钟后自动重新显示。"); 
      window.setTimeout("blueText.style.display='block';",3000,"JavaScript"); 
    } else { me.style.display="block"; alert("文本现在是:'block'."); } } } </script> 
 
<div>在<span id="blueText" onclick="toggleDisplay(this)" style="color:blue;position:relative;cursor:hand;">蓝色</span>文字上点击来查看效果.</div>

[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]

最后是display被设置:none,这时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填。(此时应用display: none;的元素相当于消失,而visibility: hidden;则只表示隐藏,位置还在。)

display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试示例:

<h1>display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试</h1> 
<P><SPAN id="oSpan" style="">This is a SPAN</SPAN> in a sentence.</P> 
<P> 
<input type=button value="Inline" onclick="oSpan.style.display='inline'"> 
<input type=button value="Block" onclick="oSpan.style.display='block'">
<input type=button value="None" onclick="oSpan.style.display='none'"> 
<input type=button value="Hidden" onclick="oSpan.style.visibility='hidden'">
<input type=button value="Visible" onclick="oSpan.style.visibility='visible'"> 
</P> 
<UL> 
  <LI>将元素设为 block,会在该元素后换行。</LI> 
  <LI>将元素设为 inline,会消除元素换行。</LI> 
  <LI>将元素设为 none,隐藏该元素内容。</LI> 
</UL>

Input类型是checkbox时checked属性获取

记录一下checkbox 的 checked 属性的获取办法,以备忘记:

假如你的一个HTML页中有这么一段代码:

       <input name="chbRem" id="chbRem" type="checkbox" checked="checked"> 

那么如何通过JQuery获得chbRem的checked状态呢:

错误的写法如下:

      alert(  $("#chbRem").attr("checked")   );

正确的获取方式应该是:

      alert(  $("#chbRem")[0].checked   );

此时,会输出ture。