菜单

一举手一投足端H伍页面注意事项

2019年4月18日 - 金沙前端

运动端H5页面注意事项

2017/02/18 · HTML5 ·
移动端

初稿出处: Alexee   

一. 单个页面内容不能够过多

设计常用尺寸:7501334 / 640113四,包罗了手提式有线电话机顶部数字信号栏的冲天。

移动端H5运动页面平常必要能够分享到各样社交App中,常用的有微信、QQ等。

运用移动设备查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里不断有顶部导航,后面部分也有操作栏(safari浏览器也1律),那几个都会占领设计稿呈现区域,由此在 设计环节 就须要思索内容的有点,页面尾部要预留一定的空白,那样在微信或qq中才不会被遮住。

一般来讲图(QQ内置浏览器):页面设计尺寸为 750133四,顶部占用
150px,底部占用 1十px,共占用了 260px,因而设计稿内容应调整在
133四-260=拾7四px 的惊人内。编写代码时,使用 Chrome
浏览器模拟设施大小,将该尺寸(**750
1074**)存下来,用于实时查看移动端页面效果。

即使页面已经写好了,就不得不遵照下边包车型大巴尺码进行内容的调动了,裁减成分间距,缩放图片大小等。
享用下自家的战败尝试:

  1. 要是对全体页面实行缩放(使用 meta
    标签),遵照设计稿的比重,在中度满意的景况下升幅会偏小,两边会有白底;
  2. 不怕使用 rem
    作为相关间距的单位,也绝非艺术找到贰个适宜的比重在三种中度(微信/QQ)下切换,因而统一调成适配
    QQ
    的,那样固然在微信下有多余的空白,固定尾部的引导降落箭头也能使其不会过度突兀。

图片 1

750*133四 页面示例

2017-11-25 更新:5. 选取 居尔p 拼合图片

仔细甄选的HTML5/CSS叁应用及源码,html5css3

那段时间本人一度为大家享受了无数有关HTML5运用和jQuery插件了,先来回想一下:

前几天大家承接来介绍部分非凡的HTML5/CSS三应用及源码,希望我们会喜欢。HTML5是WEB的前途,大家须要不断学习。

1. 单个页面内容不可能过多

统一筹划常用尺寸:7501334 / 640113四,包蕴了手提式有线电话机顶部功率信号栏的万丈。

活动端H5移动页面平日要求能够享受到各样社交App中,常用的有微信、QQ等。

利用移动装备查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里不断有顶部导航,尾巴部分也有操作栏(safari浏览器也1如既往),这一个都会占领设计稿展现区域,由此在
统一筹划环节
就须求思索内容的有点,页面尾巴部分要预留一定的空白,这样在微信或qq中才不会被遮住。

如下图(QQ内置浏览器):页面设计尺寸为 750133四,顶部占有150px,底部占用 1拾px,共占用了 260px,由此设计稿内容应调整在
133肆-260=107四px 的惊人内。编写代码时,使用 Chrome
浏览器模拟设施大小,将该尺寸(**750
1074**)存下来,用于实时查看移动端页面效果。

假使页面已经写好了,就只能依据地点的尺寸举办内容的调动了,减少成分间距,缩放图片大小等。
分享下小编的曲折尝试:

  1. 比方对壹切页面进行缩放(使用 meta
    标签),遵照设计稿的百分比,在中度知足的气象下升幅会偏小,两边会有白底;
  2. 不畏使用 rem
    作为相关间距的单位,也绝非艺术找到三个相宜的百分比在二种中度(微信/QQ)下切换,由此统壹调成适配
    QQ
    的,那样固然在微信下有多余的空白,固定尾巴部分的指导降落箭头也能使其不会过分突兀。

图片 2

750*133四 页面示例

二. 题名简短

运动端浏览器导航条宽度有限,简短的标题能够使其出示完整。

安顿常用尺寸:750 x 133肆 / 640 x 113四,包蕴了手提式有线电电话机顶部非能量信号栏的莫斯中国科学技术大学学。

HTML5 3D骨牌图片特效

很不利的HTML五 3D图片动画特效,图片也不再是平面的了。

核心CSS代码:

图片 3figure {
margin: 0; width: 100%; height: 29.5vw; background:
url(“winter-hat.jpg”); background-size: 100%; transform-origin: center
bottom; transform-style: preserve-3d; transition: 1s transform; } figure
figcaption { width: 100%; background: linear-gradient(rgba(0, 0, 0,
0.4), rgba(0, 0, 0, 0.4)), url(“winter-hat.jpg”); background-size: 100%;
height: 50px; background-repeat: no-repeat; background-position: bottom;
color: #fff; position: relative; top: 29.5vw; transform-origin: center
top; transform: rotateX(-89.9deg); font-size: 1.2vw; font-family:
Montserrat, Arial, sans-serif; text-align: center; line-height: 3; }
figure:before { content: ”; position: absolute; top: 0; left: 0; width:
100%; height: 100%; box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.1), inset
0 0 250px 250px rgba(0, 0, 0, 0.1); transition: 1s; transform:
rotateX(95deg) translateZ(-80px) scale(0.75); transform-origin: inherit;
} div:hover figure { transform: rotateX(75deg) translateZ(5vw); }
div:hover figure:before { box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5),
inset 0 0 250px 250px rgba(0, 0, 0, 0.5); transform: rotateX(-5deg)
translateZ(-80px) scale(1); } @media screen and (max-width: 800px) { div
{ width: 50%; } figure { height: 45vw; } figure figcaption { top: 45vw;
font-size: 2vw; } } @media screen and (max-width: 500px) { div { width:
80%; margin-top: 1rem; } figure { height: 70vw; } figure figcaption {
top: 70vw; font-size: 3vw; } } View
Code

图片 4

在线演示        源码下载

二. 标题简短

挪动端浏览器导航条宽度有限,简短的标题能够使其出示完整。

三. 2维码图片接纳 img 标签引进

二维码图片不要写为要素背景,不然长按未有艺术触发扫描作用。应采纳 img 标签引进,如下:

![](images/qrcode.png)

一抬手一动脚端H五运动页面日常供给能够分享到各个社交App中,常用的有 微信、QQ
等。

jQuery UI滑杆插件 可Tooltip提醒

那又是一款杰出实用的jQuery插件,基于jQuery UI的,所以外观相当理想。

核心jQuery代码:

图片 5var points
= 20; /* jquery slider pips plugin, version 0.1 */ (function($) { var
extensionMethods = { pips: function( settings ) { options = { first:
“number”, // “pip” , false last: “number”, // “pip” , false rest: “pip”
// “number” , false }; $.extend( options, settings ); // get rid of all
pips that might already exist.
this.element.addClass(‘ui-slider-pips’).find( ‘.ui-slider-pip’
).remove(); // we need teh amount of pips to create. var pips =
this.options.max – this.options.min; // for every stop in the slider, we
create a pip. for( i=0; i<=pips; i++ ) { // hold a span element for
the pip var s = $(‘<span class=”ui-slider-pip”><span
class=”ui-slider-line”></span><span
class=”ui-slider-number”>’+i+'</span></span>’); // add a
class so css can handle the display // we’ll hide numbers by default in
CSS, and show them if set. // we’ll also use CSS to hide the pip
altogether. if( 0 == i ) { s.addClass(‘ui-slider-pip-first’); if(
“number” == options.first ) { s.addClass(‘ui-slider-pip-number’); } if(
false == options.first ) { s.addClass(‘ui-slider-pip-hide’); } } else if
( pips == i ) { s.addClass(‘ui-slider-pip-last’); if( “number” ==
options.last ) { s.addClass(‘ui-slider-pip-number’); } if( false ==
options.last ) { s.addClass(‘ui-slider-pip-hide’); } } else { if(
“number” == options.rest ) { s.addClass(‘ui-slider-pip-number’); } if(
false == options.rest ) { s.addClass(‘ui-slider-pip-hide’); } } // if
it’s a horizontal slider we’ll set the left offset, // and the top if
it’s vertical. if( this.options.orientation == “horizontal” ) s.css({
left: ” + (100/pips)*i + ‘%’ }); else s.css({ top: ” + (100/pips)*i

图片 6

在线演示        源码下载

叁. 贰维码图片选用 img 标签引进

2维码图片不要写为因素背景,不然长按未有章程触发扫描功能。应运用 img
标签引进,如下:

JavaScript

![](images/qrcode.png)

1
![](images/qrcode.png)

四. 二维码图片记得扫描测试

有时扫描二维码之后,会跳转至某些地方,不幸的话QQ或许微信会对这几个地址实行温馨提示,如下图所示:

图片 7

QQ内的投机提示

那般会阻止部分用户继续访问,从而不能很好的将用户辅导到运动想要推广的制品/品牌页面,如
App 的下载页面等。因而二维码的扫描测试不能够少。

举个例证,假使2维码扫描结果是选用的下载地址的话,能够动用应用宝的微下载地址来生成贰维码,那是不会被“温馨提醒”的。

选取移动装备查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里穿梭有
顶部导航,尾部也有
操作栏(safari浏览器也如出一辙),那么些都会攻下设计稿呈现区域,由此在
统一筹划环节 就需求思虑内容的略微,页面尾部要
雁过拔毛一定的空域,那样在微信或qq中才不会被遮住。

CSS二人资料表单 分两步骤表单

一款基于CSS三的表单应用,能够分步骤填写。

核心jQuery代码:

图片 8jQuery(document).ready(function(){
function doStep(){ // Next Button
$(‘a.next-step’).click(function(event){ event.preventDefault(); // Part
1 if($(‘.alpha’).hasClass(“in”)) { $(‘.alpha’).removeClass(“in”); }
$(‘.alpha’).addClass(“out”); // Part 2 if($(‘.beta’).hasClass(“out”)) {
$(‘.beta’).removeClass(“out”); } $(‘.beta’).addClass(“in”); }); //
Previous Button $(‘a.prev-step’).click(function(event){
event.preventDefault(); $(‘.alpha’).removeClass(“out”).addClass(“in”);
$(‘.beta’).removeClass(“in”).addClass(“out”); }); // Submit & Complete
$(‘.submit’).click(function(event){ event.preventDefault(); // Part 1
if($(‘.beta’).hasClass(“in”)) { $(‘.beta’).removeClass(“in”); }
$(‘.beta’).addClass(“out”); // Part 2 if($(‘.charlie’).hasClass(“out”))
{ $(‘.charlie’).removeClass(“out”); } $(‘.charlie’).addClass(“in”); });
} // Active Functions doStep(); }); View Code

核心CSS代码:

图片 9form {
float: left; display: block; width: 100%; position: relative; } form
fieldset { float: left; position: absolute; width: 100%; padding: 20px;
border: none; border-radius: 5px; box-shadow: 0 0 15px rgba(0, 0, 0,
0.7); background: #fff; background: whitesmoke; background:
-webkit-linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%); background:
-moz-linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%); background:
-o-linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%); background:
linear-gradient(0deg, #eeeeee 0%, whitesmoke 100%); /* W3C */ } form
fieldset legend { float: left; display: block; width: 100%; position:
relative; border-bottom: 1px solid #dfdfdf; top: 0; left: 0; clear:
both; margin-bottom: 20px; padding-bottom: 10px; line-height: 30px;
color: #444; text-shadow: 0 1px 0 #fff; } form fieldset.beta, form
fieldset.charlie { display: none; } form fieldset .frow { float: left;
display: block; width: 100%; margin-bottom: 10px; } form fieldset
.frow:last-child { margin-bottom: 0px; } form fieldset input { float:
left; width: 100%; padding: 12px 6px; font-size: 14px; font-weight: 400;
font-family: “Open Sans”, sans-serif; border: 1px solid #dedede;
border-radius: 5px; box-shadow: 0 0 0 transparent, inset 0 0 5px #eee;
-webkit-transition: all 0.2s ease-in-out; } form fieldset
input::-webkit-input-placeholder { color: #ccc; opacity: 1;
-webkit-transition: opacity 0.2s ease-in-out; } form fieldset
input:focus { outline: none; border: 1px solid #27c1bf; box-shadow: 0 0
10px #27c1bf; -webkit-transition: all 0.2s ease-in-out; } form fieldset
input:focus::-webkit-input-placeholder { opacity: 0.5; } form fieldset
a.next-step, form fieldset a.prev-step, form fieldset
input[type=”submit”] { display: block; width: 100%; height: 50px;
padding: 0; background: #31dddb; line-height: 50px; text-align: center;
text-decoration: none; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
font-size: 1.2em; font-family: “Helvetica Neue”, sans-serif;
font-weight: 400; color: #fff; border: 1px solid #27c1bf;
border-radius: 4px; box-shadow: 0 0 0 transparent; } form fieldset
a.prev-step { background: #4a76a8; border: 1px solid #1d5b90; } .out,
.alpha.out, .beta.out { z-index: 0; opacity: 1; display: block;
-webkit-animation: out 0.75s ease forwards; -moz-animation: out 0.75s
ease forwards; -o-animation: out 0.75s ease forwards; animation: out
0.75s ease forwards; } @-webkit-keyframes out { 0% { -webkit-transform:
scale(1); opacity: 1; } 25% { -webkit-transform: scale(1.05); } 99% {
-webkit-transform: scale(0.8); } 100% { opacity: 0; display: none; } }
@-moz-keyframes out { 0% { -moz-transform: scale(1); opacity: 1; } 25% {
-moz-transform: scale(1.05); } 99% { -moz-transform: scale(0.8); } 100%
{ opacity: 0; display: none; } } @-o-keyframes out { 0% { -o-transform:
scale(1); opacity: 1; } 25% { -o-transform: scale(1.05); } 99% {
-o-transform: scale(0.8); } 100% { opacity: 0; display: none; } }
@keyframes out { 0% { -webkit-transform: scale(1); transform: scale(1);
opacity: 1; } 25% { -webkit-transform: scale(1.05); transform:
scale(1.05); } 99% { -webkit-transform: scale(0.8); transform:
scale(0.8); } 100% { opacity: 0; display: none; } } .in, .beta.in {
z-index: 30; display: block; opacity: 0; -webkit-animation: in 0.75s
ease forwards 0.25s; -moz-animation: in 0.75s ease forwards 0.25s;
-o-animation: in 0.75s ease forwards 0.25s; animation: in 0.75s ease
forwards 0.25s; } @-webkit-keyframes in { 0% { -webkit-transform:
translate3d(150px, 0, 0); opacity: 0; } 100% { -webkit-transform:
translate3d(0px, 0, 0); opacity: 1; } } @-moz-keyframes in { 0% {
-moz-transform: translate3d(150px, 0, 0); opacity: 0; } 100% {
-moz-transform: translate3d(0px, 0, 0); opacity: 1; } } @-o-keyframes in
{ 0% { -o-transform: translate3d(150px, 0, 0); opacity: 0; } 100% {
-o-transform: translate3d(0px, 0, 0); opacity: 1; } } @keyframes in { 0%
{ -webkit-transform: translate3d(150px, 0, 0); -moz-transform:
translate3d(150px, 0, 0); -o-transform: translate3d(150px, 0, 0);
transform: translate3d(150px, 0, 0); opacity: 0; } 100% {
-webkit-transform: translate3d(0px, 0, 0); -moz-transform:
translate3d(0px, 0, 0); -o-transform: translate3d(0px, 0, 0); transform:
translate3d(0px, 0, 0); opacity: 1; } } .alpha.in { z-index: 30;
display: block; opacity: 0; -webkit-animation: in-prev 0.75s ease
forwards 0.25s; -moz-animation: in-prev 0.75s ease forwards 0.25s;
-o-animation: in-prev 0.75s ease forwards 0.25s; animation: in-prev
0.75s ease forwards 0.25s; } @-webkit-keyframes in-prev { 0% {
-webkit-transform: translate3d(-150px, 0, 0); opacity: 0; } 100% {
-webkit-transform: translate3d(0px, 0, 0); opacity: 1; } }
@-moz-keyframes in-prev { 0% { -moz-transform: translate3d(-150px, 0,
0); opacity: 0; } 100% { -moz-transform: translate3d(0px, 0, 0);
opacity: 1; } } @-o-keyframes in-prev { 0% { -o-transform:
translate3d(-150px, 0, 0); opacity: 0; } 100% { -o-transform:
translate3d(0px, 0, 0); opacity: 1; } } @keyframes in-prev { 0% {
-webkit-transform: translate3d(-150px, 0, 0); -moz-transform:
translate3d(-150px, 0, 0); -o-transform: translate3d(-150px, 0, 0);
transform: translate3d(-150px, 0, 0); opacity: 0; } 100% {
-webkit-transform: translate3d(0px, 0, 0); -moz-transform:
translate3d(0px, 0, 0); -o-transform: translate3d(0px, 0, 0); transform:
translate3d(0px, 0, 0); opacity: 1; } } .charlie.in { z-index: 30;
display: block; opacity: 0; -webkit-animation: in-charlie 0.75s ease-out
forwards 0.25s; -moz-animation: in-charlie 0.75s ease-out forwards
0.25s; -o-animation: in-charlie 0.75s ease-out forwards 0.25s;
animation: in-charlie 0.75s ease-out forwards 0.25s; }
@-webkit-keyframes in-charlie { 0% { -webkit-transform: translate3d(0,
150px, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0);
opacity: 1; } } @-moz-keyframes in-charlie { 0% { -moz-transform:
translate3d(0, 150px, 0); opacity: 0; } 100% { -moz-transform:
translate3d(0, 0, 0); opacity: 1; } } @-o-keyframes in-charlie { 0% {
-o-transform: translate3d(0, 150px, 0); opacity: 0; } 100% {
-o-transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes
in-charlie { 0% { -webkit-transform: translate3d(0, 150px, 0);
-moz-transform: translate3d(0, 150px, 0); -o-transform: translate3d(0,
150px, 0); transform: translate3d(0, 150px, 0); opacity: 0; } 100% {
-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0,
0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0,
0); opacity: 1; } } View Code

图片 10

在线演示        源码下载

肆. 贰维码图片记得扫描测试

有时扫描2维码之后,会跳转至有些地点,不幸的话QQ恐怕微信会对这一个地址举行自身提醒,如下图所示:

图片 11

QQ内的和谐提示

诸如此类会堵住部分用户继续走访,从而无法很好的将用户指导到移动想要推广的出品/品牌页面,如
App 的下载页面等。因而贰维码的扫描测试不能够少。

举个例证,要是二维码扫描结果是运用的下载地址的话,能够运用应用宝的微下载地址来生成贰维码,那是不会被“温馨提醒”的。

5. 行使 居尔p 拼合图片

只要打算先布局,后使用自动化学工业具将图纸拼起来,收缩请求数,须求小心:在编写制定CSS
的时候,图片宽高应固定,图片拼合后才干由此固定和出示区域的宽高来展现图片。

举个例子,假设布局时 width: 100%; background-position: center;,使用工具拼合图片后,该因素区域(100%的大幅度)内会将别的图片展现出来,那不是我们想要看到的。

一般来讲图:页面设计尺寸为 750 x 1334,顶部占用 150px,尾部占用
110px,共占用了 260px,因而设计稿内容应调控在 1334-260=十74px
的莫斯中国科学技术大学学内。编写代码时,使用 Chrome
浏览器模拟设备大小,将该尺寸(*7501074\)存下来,用于实时查看移动端页面效果。

HTML5/CSS三自定义浮动Select 超炫下拉菜单动画

壹款很有特色的自定义Select下拉框,也是按照HTML伍本领的,因为需求有的生成动画。

核心jQuery代码:

图片 12$(document).ready(function(){
$(“.dropdown”).click(function(){ $(“.menu”).toggleClass(“showMenu”);
$(“.menu > li”).click(function(){ $(“.dropdown >
p”).html($(this).html()); $(“.menu”).removeClass(“showMenu”); }); });
}); View Code

图片 13

在线演示        源码下载

五. 施用 居尔p 拼合图片

假定打算先布局,后选用自动化学工业具将图纸拼起来,收缩请求数,必要注意:在编辑
CSS
的时候,图片宽高应固定,图片拼合后技术经过定点和出示区域的宽高来突显图片。

举个例证,如若布局时
width: 100%; background-position: center;,使用工具拼合图片后,该因素区域(百分百的增长幅度)内会将别的图片突显出来,那不是我们想要看到的。

六. 有关链接的享用-QQ

倘若将页面链接直接复制分享给其别人,在三弟大上抽出链接新闻的用户恐怕晤面到链接的相关音讯,如页面标题、描述和图表。相关音信设置方法如下:

<title>QQ中链接的标题由此处获取</title>
<meta name="description" content="QQ中链接的描述由此处获取">
<!-- QQ默认获取的图片有可能出现缩放问题,效果不佳,可以通过如下方法进行设置 -->
<meta itemprop="image" content="http://*.*.com/staticshare.png" />

可参考 手提式有线电电话机QQ接口文书档案:setShareInfo。

难点:即便使用了以上的 image 设置格局,如故没能展现预期图片?
化解:鲜明下你发送的链接格式,会不会有着省略,如:somedomain/ 或者 somedomain/index,正确的应为 somedomain/index.html,本事科学解析到图片。

万一是开拓链接后,在QQ内置浏览器里甄选将页面分享出去,那一般不会出错。

如果页面已经写好了,就只能依照地点的尺寸实行内容的调整了,收缩成分间距,缩放图片大小等。

HTML5/CSS3书本翻页3D动画

和率先个利用类似,那也是HTML5 3D动画,是壹本3D的电子书,能够翻页。

核心CSS代码(略长):

图片 14/* 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%; } } View Code

图片 15

在线演示        源码下载

陆. 关于链接的享受-QQ

若是将页面链接直接复制分享给其余人,在堂哥大上接受链接新闻的用户恐怕会看出链接的有关新闻,如页面标题、描述和图片。相关音信设置方式如下:

XHTML

<title>QQ中链接的标题因而处获取</title> <meta
name=”description” content=”QQ中链接的描述因此处获取”> <!–
QQ私下认可获取的图形有望出现缩放难题,效果不好,能够经过如下方法开始展览设置
–> <meta itemprop=”image”
content=”” />

1
2
3
4
<title>QQ中链接的标题由此处获取</title>
<meta name="description" content="QQ中链接的描述由此处获取">
<!– QQ默认获取的图片有可能出现缩放问题,效果不佳,可以通过如下方法进行设置 –>
<meta itemprop="image" content="http://*.*.com/static/images/share.png" />

可参考
手提式有线电话机QQ接口文书档案:setShareInfo。

问题:纵然选取了以上的 image 设置方法,依然没能展现预期图片?
解决:鲜明下您发送的链接格式,会不会具有省略,如:somedomain/ 或者
somedomain/index,正确的应为
somedomain/index.html,本领正确分析到图片。

如要是开发链接后,在QQ内置浏览器里挑选将页面分享出来,那一般不会出错。

七. 图片压缩

运用自动化学工业具 gulp-imagemin(教程)
来压缩图片,效果举例:101 KB => 80.七KB。后来本人使用了在线工具 Tinypng 又实行了一回缩减,效果举例:(上边运用
gulp-imagemin 压缩过的图片)80.七 KB => 3捌.一KB,可知光使用自动化学工业具来压缩是不够的,大多数图纸仍存在较大的压缩空间,能够再扔到 Tinypng 里压缩一下看看。

分享下作者的倒闭尝试:

CSS3按钮切换开关 可左右横向切换

这款开关切换开关我们应该看到过了,类似的特效多数,实用性有待斟酌,可是照旧蛮不错的。

核心jQuery代码:

图片 16$(‘.track’).click(
function() { $indicator = $(‘.indicator’); if(
$indicator.hasClass(‘switch-on’) ) {
$indicator.removeClass(‘switch-on’).addClass(‘switch-off’); } else {
$indicator.removeClass(‘switch-off’).addClass(‘switch-on’); } }); View Code

核心CSS代码:

图片 17.track {
position: relative; margin: 10em auto; /* padding: .2em; */
background: #b7b7b7; width: 10em; height: 4em; border: .1em solid
#575757; border-radius: 10em; box-shadow: inset 0 .5em .5em #666,
inset 0 -.2em .5em #666; cursor: pointer; } .track:after { position:
absolute; content: “”; display: block; margin-top: -4.5em; margin-left:
-.6em; width: 11em; height: 5em; border: .1em solid #979797;
border-radius: 10em; box-shadow: inset 0 1em 1em #979797, inset 0 -1em
1em #e7e7e7, 0 .1em .2em #fff; z-index: -1; } .indicator { position:
relative; background: #ddd; height: 100%; width: 40%; border-radius:
50%; border: .1em solid #666; box-shadow: inset 0 .5em .5em #f7f7f7,
inset 0 -.3em .3em #666; } .indicator:after { content: “”; display:
block; margin: 1.2em auto; background: #ff3434; width: 1em; height:
1em; box-shadow: inset 0 .15em #499, 0 .15em #faa; border-radius: 50%;
} .indicator.switch-on { -webkit-animation: switch-on .3s;
-moz-animation: switch-on .3s; -o-animation: switch-on .3s; animation:
switch-on .3s; -webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards;
animation-fill-mode: forwards; } .indicator.switch-off {
-webkit-animation: switch-off .3s; -moz-animation: switch-off .3s;
-o-animation: switch-off .3s; animation: switch-off .3s;
-webkit-animation-fill-mode: forwards; -moz-animation-fill-mode:
forwards; -o-animation-fill-mode: forwards; -animation-fill-mode:
forwards; } @-webkit-keyframes switch-on { 0% { margin-left: 0; } 100% {
margin-left: 60%; } } @-moz-keyframes switch-on { 0% { margin-left: 0; }
100% { margin-left: 60%; } } @-o-keyframes switch-on { 0% { margin-left:
0; } 100% { margin-left: 60%; } } @keyframes switch-on { 0% {
margin-left: 0; } 100% { margin-left: 60%; } } @-webkit-keyframes
switch-off { 0% { margin-left: 60%; } 100% { margin-left: 0; } }
@-moz-keyframes switch-off { 0% { margin-left: 60%; } 100% {
margin-left: 0; } } @-o-keyframes switch-off { 0% { margin-left: 60%; }
100% { margin-left: 0; } } @keyframes switch-off { 0% { margin-left:
60%; } 100% { margin-left: 0; } } .indicator.switch-on:after {
-webkit-animation: light-on .3s; -moz-animation: light-on .3s;
-o-animation: light-on .3s; animation: light-on .3s;
-webkit-animation-fill-mode: forwards; -moz-animation-fill-mode:
forwards; -o-animation-fill-mode: forwards; -animation-fill-mode:
forwards; } .indicator.switch-off:after { -webkit-animation: light-off
.3s; -moz-animation: light-off .3s; -o-animation: light-off .3s;
animation: light-off .3s; -webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards;
-animation-fill-mode: forwards; } @-webkit-keyframes light-on { 0% {
background: #fa3434; box-shadow: inset 0 .15em #499, 0 .15em #faa; }
100% { background: #0f0; box-shadow: inset 0 .15em #494, 0 .15em
#afa; } } @-moz-keyframes light-on { 0% { background: #ff3434;
box-shadow: inset 0 .15em #499, 0 .15em #faa; } 100% { background:
#0f0; box-shadow: inset 0 .15em #494, 0 .15em #afa; } } @-o-keyframes
light-on { 0% { background: #ff3434; box-shadow: inset 0 .15em #499, 0
.15em #faa; } 100% { background: #0f0; box-shadow: inset 0 .15em
#494, 0 .15em #afa; } } @keyframes light-on { 0% { background:
#ff3434; box-shadow: inset 0 .15em #499, 0 .15em #faa; } 100% {
background: #0f0; box-shadow: inset 0 .15em #494, 0 .15em #afa; } }
@-webkit-keyframes light-off { 0% { background: #0f0; box-shadow: inset
0 .15em #494, 0 .15em #afa; } 100% { background: #ff3434; box-shadow:
inset 0 .15em #499, 0 .15em #faa; } } @-moz-keyframes light-off { 0% {
background: #0f0; box-shadow: inset 0 .15em #494, 0 .15em #afa; }
100% { background: #ff3434; box-shadow: inset 0 .15em #499, 0 .15em
#faa; } } @-o-keyframes light-off { 0% { background: #0f0; box-shadow:
inset 0 .15em #494, 0 .15em #afa; } 100% { background: #ff3434;
box-shadow: inset 0 .15em #499, 0 .15em #faa; } } @keyframes light-off
{ 0% { background: #0f0; box-shadow: inset 0 .15em #494, 0 .15em
#afa; } 100% { background: #ff3434; box-shadow: inset 0 .15em #499, 0
.15em #faa; } } View Code

图片 18

在线演示        源码下载

7. 图纸压缩

运用自动化学工业具
gulp-imagemin(教程)
来收缩图片,效果举例:101 KB => 80.7 KB。后来本身动用了在线工具
Tinypng 又张开了贰回缩减,效果举例:(上边运用
gulp-imagemin 压缩过的图形)80.7 KB => 38.1
KB
,可知光使用自动化学工业具来压缩是不够的,超过五成图片仍存在较大的滑坡空间,可以再扔到
Tinypng 里压缩一下看望。

在线的 Tinypng 能够极其次采取,假若想要使用其
API 来拓展削减自动化的话,能够采用
gulp-tinypng
等插件,不过有每月削减图片数量限制,每月前500张图纸免费,其他收取费用景况参考官网证实。使用其
API 还索要获得 API
Key,这里能够获得。
村办以为想要免费的话使用 API
会有数量限制,时刻思念着数量有点心累,不比直接采纳在线工具,也不费事~

8. Loading

代码段分享,拿走即用~

function loading(){

    function Load(){}

    Load.prototype.loadImgs = function(urls,callback) {
        this.urls = urls;
        this.imgNumbers = urls.length;
        this.loadImgNumbers = 0;
        var that =this;
        for(var i=0;i<urls.length;i++){
            var obj = new Image();
            obj.src = urls[i];
            obj.onload = function(){
                that.loadImgNumbers++;
                callback(parseInt((that.loadImgNumbers/that.imgNumbers)*100));
            }
        }
    };

    var loader = new Load();

    loader.loadImgs([
        // 将所有需要加载的图片地址写于此处
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png"
    ],function(percent){
        // 假设显示百分比的元素为 $(".percent")
        $(".percent").text(percent+'%');

        // 加载结束后,隐藏相应的 loading 或遮罩 
        if(percent==100) {
            $(".mask").css('display','none');
        }
    });
}

// 执行 loading 方法
loading();
  1. 假使对整个页面举办缩放(使用 meta
    标签),依照设计稿的比重,在中度知足的状态下升幅会偏小,两边会有白底;
  2. 纵使使用 rem
    作为相关间距的单位,也并没有办法找到一个万分的百分比在二种中度下切换,因而统1调成适配
    QQ
    的,那样纵然在微信下有多余的空域,固定尾巴部分的指点降落箭头也能使其不会超负荷突兀。

CSS叁华丽的Tab菜单 带小Logo动画

那是1款拉动画作用的Tab菜单,也是依据HTML5和CSS三的,十一分酷。

核心jQuery代码:

图片 19var
menuItems = $(‘.main-navigation li’); menuItems.on(“click”,
function(event) { menuItems.removeClass(“active”);
$(this).addClass(“active”); $(“.main-content”).css({ “background”:
$(this).data(“bg-color”) }); event.preventDefault(); }); View Code

图片 20

在线演示        源码下载

8. Loading

代码段分享,拿走即用~

JavaScript

function loading(){ function Load(){} Load.prototype.loadImgs =
function(urls,callback) { this.urls = urls; this.imgNumbers =
urls.length; this.loadImgNumbers = 0; var that =this; for(var
i=0;i<urls.length;i++){ var obj = new Image(); obj.src = urls[i];
obj.onload = function(){ that.loadImgNumbers++;
callback(parseInt((that.loadImgNumbers/that.imgNumbers)*100)); } } };
var loader = new Load(); loader.loadImgs([ //
将具有必要加载的图纸地址写于此处 “”,
“”,
“”,
“”,
“”,
“”,
“” ],function(percent){ //
假诺展现百分比的要素为 $(“.percent”) $(“.percent”).text(percent+’%’); //
加载停止后,隐藏相应的 loading 或遮罩 if(percent==拾0) {
$(“.mask”).css(‘display’,’none’); } }); } // 实践 loading 方法
loading();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
function loading(){
 
    function Load(){}
 
    Load.prototype.loadImgs = function(urls,callback) {
        this.urls = urls;
        this.imgNumbers = urls.length;
        this.loadImgNumbers = 0;
        var that =this;
        for(var i=0;i<urls.length;i++){
            var obj = new Image();
            obj.src = urls[i];
            obj.onload = function(){
                that.loadImgNumbers++;
                callback(parseInt((that.loadImgNumbers/that.imgNumbers)*100));
            }
        }
    };
 
    var loader = new Load();
 
    loader.loadImgs([
        // 将所有需要加载的图片地址写于此处
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png",
        "http://domain/site/dist/img/XX.png"
    ],function(percent){
        // 假设显示百分比的元素为 $(".percent")
        $(".percent").text(percent+’%’);
 
        // 加载结束后,隐藏相应的 loading 或遮罩
        if(percent==100) {
            $(".mask").css(‘display’,’none’);
        }
    });
}
 
// 执行 loading 方法
loading();

玖. CSS 动画属性前缀 webkit

采纳 CSS3来制作动画效果的话,webkit 前缀一定记得加,要不然在有个别手提式有线话机下动画功能是未有的。
如下:

-webkit-animation: f .8s 2s forwards ease-in-out;
animation: f .8s 2s forwards ease-in-out;

@-webkit-keyframes f {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(750px,0,0);
        transform: translate3d(750px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes f {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(750px,0,0);
        transform: translate3d(750px,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

推荐应用自动化学工业具来拍卖未加前缀的 CSS
文件,如 gulp-autoprefixer。

图片 21750*1334页面示例

html5/CSS叁做二个报表

给您写了个大概的课表样式的表格
看一下

<style type=”text/css”>
table { border-collapse:collapse;text-align:center;
vertical-align:middle;}
table tr{ height:25px;}
table td{ width:100px;}
.bg1{ background:#ccc;}
table tr:hover{ background:#09C;}
.bg2{ background:#999;}
.t1,.t2,.t3,.t4,.b1,.b2,.b3,.b4,.tab{ display:block; overflow:hidden;}
.t1,.t2,.t3,.b1,.b2,.b3{ height:1px;}
.t2,.t3,.t4,.b2,.b3,.b4,.tab{ border-left:2px solid #f6f;
border-right:2px solid #f6f;}
.t1,.b1{ margin:0 5px; background: #F6F;}
.t2,.b2{ margin:0 3px; border-width:2px;}
.t3,.b3{ margin:0 2px;}
.t4,.b4{ height:2px; margin:0 1px;}
.tab{ height:130px; background:#F7F8F9;}
.tab_width{ width:700px; margin:0 auto; cursor:pointer;}
</style>
<div class=”tab_width”>
<b class=”t1″></b><b class=”t2″></b><b
class=”t3″></b><b class=”t4″></b>
<div class=”tab”>
<table>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr class=”bg1″>
<td>国学</td>
<td>数学</td>
<td>英语</td>
<td>多媒体</td>
<td&g……余下全文>>
 

九. CSS 动画属性前缀 webkit

利用 CSS叁 来创造动画效果的话,webkit
前缀一定记得加,要不然在壹些手提式无线电话机下动画成效是向来不的。
如下:

CSS

-webkit-animation: f .8s 2s forwards ease-in-out; animation: f .8s 2s
forwards ease-in-out; @-webkit-keyframes f { 0% { opacity: 0;
-webkit-transform: translate3d(750px,0,0); transform:
translate3d(750px,0,0) } to { opacity: 1; -webkit-transform:
translateZ(0); transform: translateZ(0) } } @keyframes f { 0% { opacity:
0; -webkit-transform: translate3d(750px,0,0); transform:
translate3d(750px,0,0) } to { opacity: 1; -webkit-transform:
translateZ(0); transform: translateZ(0) } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
-webkit-animation: f .8s 2s forwards ease-in-out;
animation: f .8s 2s forwards ease-in-out;
 
@-webkit-keyframes f {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(750px,0,0);
        transform: translate3d(750px,0,0)
    }
 
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
 
@keyframes f {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(750px,0,0);
        transform: translate3d(750px,0,0)
    }
 
    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

引入应用自动化学工业具来处理未加前缀的 CSS 文件,如
gulp-autoprefixer。

一抬手一动脚端浏览器导航条宽度有限,简短的题目能够使其出示完整。

html5/css三怎写以下那种成效,最棒有详细代码,给高分

<!DOCTYPE html><html><head><meta
http-equiv=”Content-Type” content=”text/html; charset=utf-八”
/><title>淡入阴影效果</title><style
type=”text/css”>*{ margin:0px; padding:0;}body{ color:#66陆;
font:1陆px/1.伍 ‘微软雅黑’,Arial, Helvetica, sans-serif;}img{ border:0
none;}.ullist{ float:left; list-style:none; width:百分之百;}.ullist li{
background:#eee; float:left; margin:10px; width:228px;}.ullist li a{
border:10px solid #fff; color:#666; display:inline-block;
text-decoration:none;}.ullist li a:hover{ box-shadow:0 0 10px #666;
transition:all 0.40s ease-in-out;}.fcr{
color:#f00;}</style></head><body><ul
class=”ullist”> <li><a href=”#”><img src=”壹.jpg”
alt=”” />詹贰锋-野色风情<br/><span
class=”fcr”>¥40,000</span></a></li> <li><a
href=”#”><img src=”一.jpg” alt=””
/>詹二锋-野色风情<br/><span
class=”fcr”>¥40,000</span></a></li></ul></body></html>给你写了二个例证,运营一下,就足以了。

图片 22
 

那段时日自个儿早就为大家大快朵颐了很多有关HTML伍用到和jQuery插件了,先来回想一下:
炫丽霸气的HTML5/j…

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图