CSS3应用及源码,移动端H5页面注意事项

by admin on 2019年4月1日

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

2017/02/18 · HTML5CSS3应用及源码,移动端H5页面注意事项。 ·
移动端

初稿出处: Alexee   

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

统一筹划常用尺寸:7501334 / 6401134,包罗了手提式有线电话机顶部信号栏的莫大。

举手投足端H5移动页面平时需求能够分享到各样社交App中,常用的有微信、QQ等。

采用移动装备查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里穿梭有顶部导航,底部也有操作栏(safari浏览器也同样),那一个都会占用设计稿展现区域,由此在 设计环节 就要求考虑内容的略微,页面底部要留住一定的空白,那样在微信或qq中才不会被遮住。

正如图(QQ内置浏览器):页面设计尺寸为 7501334,顶部占据
150px,底部占用 110px,共占用了 260px,因而设计稿内容应控制在
1334-260=1074px 的可观内。编写代码时,使用 Chrome
浏览器模拟设备大小,将该尺寸(**750
1074**)存下来,用于实时查看移动端页面效果。

若果页面已经写好了,就只能依照下边包车型客车尺码举行内容的调整了,缩短成分间距,缩放图片大小等。
享用下自家的败诉尝试:

  1. 即便对一切页面进行缩放(使用 meta
    标签),根据设计稿的比重,在中度知足的事态下上涨幅度会偏小,两边会有白底;
  2. 哪怕使用 rem
    作为相关间距的单位,也未曾办法找到三个老少咸宜的百分比在三种中度(微信/QQ)下切换,因而统一调成适配
    QQ
    的,那样固然在微信下有多余的空域,固定底部的指引降落箭头也能使其不会超负荷突兀。

必发88 1

750*1334 页面示例

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

精心选拔的HTML5/CSS3应用及源码,html5css3

那段日子自身曾经为大家享用了无数有关HTML5用到和jQuery插件了,先来回看一下:

  • 炫酷霸气的HTML5/jQuery应用及源码
  • 干货分享 超炫丽的HTML5/jQuery应用及代码
  • 姹紫嫣红而实用的jQuery/CSS3应用及源码

昨日大家继承来介绍一些与众不一致的HTML5/CSS3应用及源码,希望我们会喜欢。HTML5是WEB的前途,大家需求不断学习。

1. 单个页面内容无法过多

规划常用尺寸:7501334 / 6401134,包涵了手机顶部信号栏的冲天。

移动端H5平移页面平时须要可以享用到各个社交App中,常用的有微信、QQ等。

运用移动设备查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里穿梭有顶部导航,底部也有操作栏(safari浏览器也一样),那么些都会占有设计稿显示区域,因而在
统一筹划环节
就供给考虑内容的有点,页面底部要留下一定的空白,这样在微信或qq中才不会被遮住。

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

假诺页面已经写好了,就只可以依照上边包车型地铁尺寸举行内容的调整了,减少成分间距,缩放图片大小等。
分享下小编的破产尝试:

  1. 假若对任何页面进行缩放(使用 meta
    标签),遵照设计稿的比例,在中度知足的情景下上涨幅度会偏小,两边会有白底;
  2. 正是使用 rem
    作为相关间距的单位,也绝非办法找到3个适当的百分比在三种中度(微信/QQ)下切换,因而统一调成适配
    QQ
    的,那样即使在微信下有多余的空域,固定尾部的指导降落箭头也能使其不会过分突兀。

必发88 2

750*1334 页面示例

2. 标题简短

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

统一筹划常用尺寸:750 x 1334 / 640 x 1134,包涵了手提式有线电电话机顶部信号栏的中度。

HTML5 3D骨牌图片特效

很不错的HTML5 3D图片动画特效,图片也不再是平面包车型客车了。

核心CSS代码:

必发88 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

必发88 4

在线演示        源码下载

2. 标题简短

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

3. 二维码图片应用 img 标签引入

二维码图片不要写为要素背景,不然长按没有办法触发扫描功能。应使用 img 标签引入,如下:

![](images/qrcode.png)

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

jQuery UI滑杆插件 可Tooltip提示

那又是一款万分实用的jQuery插件,基于jQuery UI的,所以外观卓殊精美。

核心jQuery代码:

必发88 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

  • ‘%’ }); // append the span to the slider. this.element.append( s ); }
    } }; $.extend(true, $[‘ui’][‘slider’].prototype, extensionMethods);
    })(jQuery); (function($) { var extensionMethods = { float: function(
    settings ) { options = {}; $.extend( options, settings ); // add a class
    for the CSS this.element.addClass(‘ui-slider-float’); // if this is a
    range slider if( this.options.values ) { var $tip = [ $(‘<span
    class=”ui-slider-tip”>’+ this.options.values[0]+'</span>’),
    $(‘<span class=”ui-slider-tip”>’+
    this.options.values[1]+'</span>’) ]; // else if its just a
    normal slider } else { // create a tip element var $tip = $(‘<span
    class=”ui-slider-tip”>’+ this.options.value+'</span>’); } //
    now we append it to all the handles
    this.element.find(‘.ui-slider-handle’).each( function(k,v) {
    $(v).append($tip[k]); }) // if this slider also has numbers, we’ll
    make those into tips, too; by cloning and changing class.
    this.element.find(‘.ui-slider-number’).each(function(k,v) { var $e =
    $(v).clone().removeClass(‘ui-slider-number’).addClass(‘ui-slider-tip-number’);
    $e.insertAfter($(v)); }); // when slider changes, update handle tip
    value. this.element.on(‘slidechange slide’, function(e,ui) {
    $(ui.handle).find(‘.ui-slider-tip’).text( ui.value ); }); } };
    $.extend(true, $[‘ui’][‘slider’].prototype, extensionMethods);
    })(jQuery); /* ————————- */ /* demo stuff */
    $(document).ready(function() { $(‘.slider,
    .slider2’).slider({min:0,max:points,animate:true, value:3});
    $(‘.slider3’).slider({min:0,max:points,animate:true,range:true,
    values:[2,18]}); $(‘.slider’).slider(‘pips’);
    $(‘.slider2’).slider(‘pips’, {rest:’number’});
    $(‘.slider3’).slider(‘pips’, {first:’pip’, last: ‘pip’});
    $(‘.slider4’).slider({min:0,max:points,animate:true,value:4});
    $(‘.slider6’).slider({min:0,max:points,animate:true,range:
    true,values:[3,6] }); $(‘.slider4’).slider(‘pips’); $(‘.slider4,
    .slider6’).slider(‘float’); }); View
    Code

必发88 6

在线演示        源码下载

3. 二维码图片应用 img 标签引入

二维码图片不要写为要素背景,否则长按没有办法触发扫描作用。应利用 img
标签引入,如下:

JavaScript

![](images/qrcode.png)

1
![](images/qrcode.png)

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

偶然扫描二维码之后,会跳转至有个别地点,不幸的话QQ或许微信会对那个地点举行和谐提示,如下图所示:

必发88 7

QQ内的投机提醒

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

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

行使移动装备查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里不断有
顶部导航,底部也有
操作栏(safari浏览器也一样),这么些都会占用设计稿显示区域,由此在
设计环节 就供给考虑内容的有点,页面底部要
预留一定的空白,这样在微信或qq中才不会被遮住。

CSS二人资料表单 分两手续表单

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

核心jQuery代码:

必发88 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代码:

必发88 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 *CSS3应用及源码,移动端H5页面注意事项。/ } 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

必发88 10

在线演示        源码下载

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

有时扫描二维码之后,会跳转至有些地点,不幸的话QQ可能微信会对这么些地址实行和谐提醒,如下图所示:

必发88 11

QQ内的温馨提醒

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

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

5. 用到 居尔p 拼合图片

设若打算先布局,后选用自动化工具将图纸拼起来,减少请求数,须求注意:在编辑
CSS
的时候,图片宽高应固定,图片拼合后才能透过一定和显示区域的宽高来呈现图片。

举个例证,假诺布局时 width: 100%; background-position: center;,使用工具拼合图片后,该因素区域(百分之百的肥瘦)内会将其余图片显示出来,那不是大家想要看到的。

一般来说图:页面设计尺寸为 750 x 1334,顶部占有 150px,尾部占用
110px,共占用了 260px,由此设计稿内容应控制在 1334-260=1074px
的冲天内。编写代码时,使用 Chrome
浏览器模拟设施大小,将该尺寸(*7501074\)存下来,用于实时查看移动端页面效果。

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

一款很有风味的自定义Select下拉框,也是依照HTML5技能的,因为供给有的浮动动画。

核心jQuery代码:

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

必发88 13

在线演示        源码下载

5. 利用 居尔p 拼合图片

假设打算先布局,后选拔自动化学工业具将图纸拼起来,减弱请求数,须要注意:在编辑
CSS
的时候,图片宽高应固定,图片拼合后才能透过一定和体现区域的宽高来体现图片。

举个例证,假设布局时
width: 100%; background-position: center;,使用工具拼合图片后,该因素区域(百分百的肥瘦)内会将别的图片彰显出来,那不是大家想要看到的。

6. 有关链接的享受-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代码(略长):

必发88 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

必发88 15

在线演示        源码下载

6. 有关链接的享受-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内置浏览器里选取将页面分享出来,那一般不会出错。

7. 图纸压缩

利用自动化学工业具 gulp-imagemin(教程)
来压缩图片,效果举例:101 KB => 80.7
KB。后来本身利用了在线工具 Tinypng 又展开了二遍缩减,效果举例:(上边运用
gulp-imagemin 压缩过的图形)80.7 KB => 38.1
KB,可知光使用自动化学工业具来压缩是不够的,大多数图形仍存在较大的减少空间,能够再扔到 Tinypng 里压缩一下看看。

分享下自身的挫败尝试:

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

那款开关切换按钮我们应该看到过了,类似的特效很多,实用性有待研商,但是依然蛮不错的。

核心jQuery代码:

必发88 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代码:

必发88 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

必发88 18

在线演示        源码下载

7. 图纸压缩

应用自动化学工业具
gulp-imagemin(教程)
来压缩图片,效果举例:101 KB => 80.7 KB。后来小编动用了在线工具
Tinypng 又拓展了2回缩减,效果举例:(上面使用
gulp-imagemin 压缩过的图样)80.7 KB => 38.1
KB
,可知光使用自动化学工业具来裁减是不够的,大部分图片仍存在较大的缩减空间,能够再扔到
Tinypng 里压缩一下看看。

在线的 Tinypng 能够Infiniti次选用,借使想要使用其
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
    作为相关间距的单位,也没有章程找到3个适用的百分比在三种中度下切换,因而统一调成适配
    QQ
    的,那样即使在微信下有多余的空白,固定尾部的带领降落箭头也能使其不会超负荷突兀。

CSS3华丽的Tab菜单 带小图标动画

那是一款推动画作用的Tab菜单,也是依据HTML5和CSS3的,13分酷。

核心jQuery代码:

必发88 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

必发88 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==100) {
$(“.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();

9. 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。

必发88 21750*1334
页面示例

html5/CSS3做三个表格

给你写了个差不多的课表样式的报表
看一下

<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……余下全文>>
 

9. CSS 动画属性前缀 webkit

行使 CSS3 来构建动画效果的话,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/css3怎写以下那种效益,最棒有详尽代码,给高分

<!DOCTYPE html><html><head><meta
http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/><title>淡入阴影效果</title><style
type=”text/css”>*{ margin:0px; padding:0;}body{ color:#666;
font:16px/1.5 ‘微软雅黑’,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=”1.jpg”
alt=”” />詹二锋-野色风情<br/><span
class=”fcr”>¥40,000</span></a></li> <li><a
href=”#”><img src=”1.jpg” alt=””
/>詹二锋-野色风情<br/><span
class=”fcr”>¥40,000</span></a></li></ul></body></html>给你写了三个事例,运转一下,就足以了。

必发88 22
 

那段时日作者早已为大家大饱眼福了诸多关于HTML5采纳和jQuery插件了,先来回想一下:
炫酷霸气的HTML5/j…

参考

途牛Q2财报
2017青年花花花钱大告诉

1 赞 8 收藏
评论

必发88 23

二维码图片不要写为要素背景,否则长按没有主意触发扫描功效。应利用 img
标签引入,如下:

必发88 24代码示例.png

有时扫描二维码之后,会跳转至有些地点,不幸的话QQ或然微信会对那么些地址举办温馨提醒,如下图所示:

必发88 25QQ内的友爱提醒

诸如此类会阻拦部分用户继续走访,从而不能够很好的将用户引导到移动想要推广的成品/牌子页面,如
App 的下载页面等。因而二维码的围观测试无法少。

举个例证,假使二维码扫描结果是应用的下载地址的话,能够行使应用宝的微下载地址来生成二维码,这是不会被“温馨提示”的。

若果打算先布局,后选取自动化工具(如:gulp-sprite-generator2)将图片拼起来(即通过
css 生成精灵图),减弱请求数,需求留意:在编写 CSS
的时候,图片宽高应固定,图片拼合后才能因此定位和显示区域的宽高来显示图片。

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

提议先将图片拼起来再布局,能够行使:gulp.spritesmith,一步获取合并的Smart图和对应的
css 文件。

2017-11-25 更新:推荐二个自制的 Electron 客户端工具
Splice(集合了常用的 gulp 插件,包蕴上述的二种Smart图变化插件)。

补充七个关于选拔精灵图的难题:

  1. 将多张图纸通过工具生成Smart图和 css
    文件
    :尽管您转移精灵图时极大心使用了再次的图片(文件夹里设有重复的图纸分裂的名字),在手提式有线电话机上会出现图片大小地点都出错的气象,固然电脑浏览器里健康。解决:去掉这张重复的图样重新生成一次Smart图和
    css 就好了。
  2. 直接通过 css
    文件生成Smart图
    :制作手提式有线电话机端的活动页面时,平日需求翻页的功用,能够的话最棒每种页面的图纸拼成一张Smart图(工具提供正则筛选图片路径的坚守)。尽量不要将富有页面包车型大巴图样统一拼成一张,借使你拼完没难题也固然了,可是本身那边遇见过同地点第2点同样的题目,手提式有线电话机上页面效果出错。解决:最终排查不出难题,通过将五个页面包车型客车图样分成三张Smart图才勉强度过难关。

一经将页面链接直接复制分享给别的人,在手提式有线电话机上收取链接音讯的用户大概相会到链接的连带音讯,如页面标题、描述和图纸。相关音信设置格局如下:

<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.7
KB
。后来自身使用了在线工具 Tinypng
又展开了三次缩减,效果举例:(上边运用 gulp-imagemin
压缩过的图形)80.7 KB => 38.1
KB
,可知光使用自动化学工业具来收缩是不够的,超越八分之四图形仍存在较大的缩减空间,能够再扔到
Tinypng 里压缩一向下探底访。

在线的 Tinypng 能够极其次使用,如若想要使用其 API
来实行削减自动化的话,能够利用 gulp-tinypng
等插件,然而有每月收缩图片数量限制,每月前500张图纸免费,别的收费意况参考官网证实。使用其
API 还索要获得 API Key,这里能够获取。个人认为想要免费的话使用 API
会有数据限制,时刻挂念着数量有点心累,比不上直接行使在线工具,也不麻烦~

首屏 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").text(percent+'%'); // 加载结束后,隐藏相应的 loading 或遮罩 if(percent==100) { $.css('display','none'); } });}// 执行 loading 方法loading();

动用 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; transform: translateZ }}@keyframes f { 0% { opacity: 0; -webkit-transform: translate3d(750px,0,0); transform: translate3d(750px,0,0) } to { opacity: 1; -webkit-transform: translateZ; transform: translateZ }}

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

你只要求 Swiper.js 和 Animate.css 即可构建活动端 H5 活动页面~Swiper 是纯
javascript 创设的滑行特效插件,面向手提式无线电话机、平板总结机等活动终端。Animate.css
是纯 CSS 编写而成的卡通片库,蕴涵各类常见的 CSS 动画。引用
Swiper.js,同时在 Animate.css 中查找须要的卡通效果复制粘贴进 css
文件即可,完全不必引用 Animate.css。

<!-- 以下代码默认设计稿尺寸为 640 x 1134 --><meta content="width=device-width, user-scalable=yes,initial-scale=1" name="viewport" /><script> var detectBrowser = function { if(navigator.userAgent.toLowerCase().indexOf > -1) { return true; } else { return false; } }; var width = parseInt(window.screen.width); var scale = width/640; // 根据设计稿尺寸进行相应修改:640=>? var userScalable = 'no'; if(detectBrowser userScalable = 'yes'; document.getElementById('viewport').setAttribute( 'content', 'target-densitydpi=device-dpi,width=640,user-scalable='+userScalable+',initial-scale=' + scale); // 这里也别忘了改:640=>?</script>

利用 meta
标签对页面实行缩放,使得大家得以平昔依据安顿稿来拓展页面的编辑,不用再进行单位的折算等等,省却了广大劳动。

01:同三个页面里借使有三个二维码,长按扫描总是只好扫出 左边/第柒个二维码。化解:可视区域内只能出现1个二维码。

02:使用 meta
标签缩放页面后长按二维码图片无反应。化解:使用了以下代码之后,就能长按识别二维码了~

<!--同一张二维码图片--><!--下面这张 opacity 为 0,隐藏起来,但是实际存在,并且宽为 100%,屏幕有多大就多大-->< img style="right:0; top:0; height: auto;width: 100%;opacity: 0;position: absolute;" src="二维码图片地址"><!--下面这张是呈现给用户看的-->< img src="二维码图片地址" title="qrcode" alt="qrcode"><!--PS: img 标签前面的空格记得去掉,这里加上空格是因为简书有 bug,针对 img 标签代码渲染会出错-->

途牛Q2财报2017青年人花花花钱大告诉

发表评论

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

网站地图xml地图