澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站:用CSS开启硬件加速来提

移动端H5页面注意事项

2017/02/18 · HTML5 · 移动端

原文出处: Alexee   

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

这段时间我已经为大家分享了不少关于HTML5应用和jQuery插件了,先来回顾一下:

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

今天我们继续来介绍一些新鲜的HTML5/CSS3应用及源码,希望大家会喜欢。HTML5是WEB的未来,我们需要不断学习。

1. 何为硬件加速

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

设计常用尺寸:7501334 / 6401134,包含了手机顶部信号栏的高度。

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

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

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

如果页面已经写好了,就只能按照上面的尺寸进行内容的调整了,缩小元素间距,缩放图片大小等。
分享下我的失败尝试:

  1. 如果对整个页面进行缩放(使用 meta 标签),按照设计稿的比例,在高度满足的情况下宽度会偏小,两边会有白底;
  2. 就算使用 rem 作为相关间距的单位,也没有办法找到一个合适的比例在两种高度(微信/QQ)下切换,因此统一调成适配 QQ 的,这样就算在微信下有多余的空白,固定底部的引导下滑箭头也能使其不会过于突兀。

澳门新浦京娱乐场网站 1

750*1334 页面示例

HTML5 3D骨牌图片特效

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

核心CSS代码:

澳门新浦京娱乐场网站 2figure { 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

澳门新浦京娱乐场网站 3

在线演示        源码下载

就是将浏览器的渲染过程交给GPU处理,而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅。

2. 标题简短

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

jQuery UI滑杆插件 可Tooltip提示

这又是一款相当实用的jQuery插件,基于jQuery UI的,所以外观非常漂亮。

核心jQuery代码:

澳门新浦京娱乐场网站 4var 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

澳门新浦京娱乐场网站 5

在线演示        源码下载

我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能

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

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

JavaScript

![](images/qrcode.png)

1
![](images/qrcode.png)

CSS3个人资料表单 分两步骤表单

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

核心jQuery代码:

澳门新浦京娱乐场网站 6jQuery(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代码:

澳门新浦京娱乐场网站 7form { 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

澳门新浦京娱乐场网站 8

在线演示        源码下载

现在大多数电脑的显卡都支持硬件加速。鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅。

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

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

澳门新浦京娱乐场网站 9

QQ内的温馨提醒

这样会阻止部分用户继续访问,从而无法很好的将用户引导到活动想要推广的产品/品牌页面,如 App 的下载页面等。因此二维码的扫描测试不能少。

举个例子,如果二维码扫描结果是应用的下载地址的话,可以使用应用宝的微下载地址来生成二维码,这是不会被“温馨提醒”的。

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

一款很有特色的自定义Select下拉框,也是基于HTML5技术的,因为需要一些浮动动画。

核心jQuery代码:

澳门新浦京娱乐场网站 10$(document).ready(function(){ $(".dropdown").click(function(){ $(".menu").toggleClass("showMenu"); $(".menu > li").click(function(){ $(".dropdown > p").html($(this).html()); $(".menu").removeClass("showMenu"); }); }); }); View Code

澳门新浦京娱乐场网站 11

在线演示        源码下载

2硬件加速原理

5. 使用 Gulp 拼合图片

如果打算先布局,后使用自动化工具将图片拼起来,减少请求数,需要注意:在编写 CSS 的时候,图片宽高应固定,图片拼合后才能通过定位和显示区域的宽高来展示图片。

举个例子,如果布局时 width: 100%; background-position: center;,使用工具拼合图片后,该元素区域(100% 的宽度)内会将其他图片显示出来,这不是我们想要看到的。

HTML5/CSS3书本翻页3D动画

和第一个应用类似,这也是HTML5 3D动画,是一本3D的电子书,可以翻页。

核心CSS代码(略长):

澳门新浦京娱乐场网站 12/* 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

澳门新浦京娱乐场网站 13

在线演示        源码下载

浏览器接收到页面文档后,会将文档中的标记语言解析为DOM树。DOM树和CSS结合后形成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素,每一个渲染元素会被分到一个图层中,每个图层又会被加载到GPU形成渲染纹理,而图层在GPU中transform 是不会触发 repaint 的,最终这些使用 transform 的图层都会由独立的合成器进程进行处理。

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内置浏览器里选择将页面分享出去,那一般不会出错。

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

这款开关切换按钮大家应该看到过了,类似的特效很多,实用性有待讨论,不过还是蛮漂亮的。

核心jQuery代码:

澳门新浦京娱乐场网站 14$('.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代码:

澳门新浦京娱乐场网站 15.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 #澳门新浦京娱乐场网站:用CSS开启硬件加速来提高网站性能,精心挑选的HTML5。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

澳门新浦京娱乐场网站 16

在线演示        源码下载

CSS transform 会创建了一个新的复合图层,可以被GPU直接用来执行 transform 操作。

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 会有数量限制,时刻惦记着数量有点心累,不如直接使用在线工具,也不麻烦~

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

这是一款带动画效果的Tab菜单,也是基于HTML5和CSS3的,相当酷。

核心jQuery代码:

澳门新浦京娱乐场网站 17var 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

澳门新浦京娱乐场网站 18

在线演示        源码下载

浏览器什么时候会创建一个独立的复合图层呢?事实上一般是在以下几种情况下:

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();

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

  • 3D 或者 CSS transform
  • <video> 和 <canvas> 标签
  • CSS filters
  • 元素覆盖时,比如使用了 z-index 属性

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:100%;}.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>给你写了一个例子,运行一下,就可以了。

澳门新浦京娱乐场网站 19  

这段时间我已经为大家分享了不少关于HTML5应用和jQuery插件了,先来回顾一下: 炫酷霸气的HTML5/j...

 

参考

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

1 赞 8 收藏 评论

澳门新浦京娱乐场网站 20

3 为什么硬件加速会使页面流畅

因为 transform 属性不会触发浏览器的 repaint(重绘),而绝对定位absolute中的 left 和 top 则会一直触发 repaint(重绘)。

为什么 transform 没有触发 repaint 呢?简而言之,transform 动画由GPU控制,支持硬件加速,并不需要软件方面的渲染。

 

浏览器什么时候会创建一个独立的复合图层呢?事实上一般是在以下几种情况下:

3D 或者 CSS transform

<video> 和 <canvas> 标签

CSS filters

元素覆盖时,比如使用了 z-index 属性

 

4并不是所有的CSS属性都能触发GPU的硬件加速,实际上只有少数属性可以,比如下面的这些:

transform

opacity

filter

 

 

5.如何在桌面端和移动端用CSS开启硬件加速

CSS animations, transforms 以及 transitions 不会自动开启GPU加速,而是由浏览器的缓慢的软件渲染引擎来执行。那我们怎样才可以切换到GPU模式呢,很多浏览器提供了某些触发的CSS规则。

现在,像Chrome, FireFox, Safari, IE9 和最新版本的Opera都支持硬件加速,当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启,最显著的特征的元素的3D变换。

例如:

.cube {

   -webkit-transform: translate3d(250px,250px,250px)

   rotate3d(250px,250px,250px,-120deg)

   scale3d(0.5, 0.5, 0.5);

}

可是在一些情况下,我们并不需要对元素应用3D变换的效果,那怎么办呢?这时候我们可以使用个小技巧“欺骗”浏览器来开启硬件加速。

虽然我们可能不想对元素应用3D变换,可我们一样可以开启3D引擎。例如我们可以用transform: translateZ(0); 来开启硬件加速 。

.cube {

   -webkit-transform: translateZ(0);

   -moz-transform: translateZ(0);

   -ms-transform: translateZ(0);

   -o-transform: translateZ(0);

   transform: translateZ(0);

   /* Other transform properties here */

}

在 Chrome and Safari中,当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果,下面的代码可以修复此情况:

.cube {

   -webkit-backface-visibility: hidden;

   -moz-backface-visibility: hidden;

   -ms-backface-visibility: hidden;

   backface-visibility: hidden;

   -webkit-perspective: 1000;

   -moz-perspective: 1000;

   -ms-perspective: 1000;

   perspective: 1000;

   /* Other transform properties here */

}

在webkit内核的浏览器中,另一个行之有效的方法是

.cube {

   -webkit-transform: translate3d(0, 0, 0);

   -moz-transform: translate3d(0, 0, 0);

   -ms-transform: translate3d(0, 0, 0);

   transform: translate3d(0, 0, 0);

  /* Other transform properties here */

}

原生的移动端应用(Native mobile applications)总是可以很好的运用GPU,这是为什么它比网页应用(Web apps)表现更好的原因。硬件加速在移动端尤其有用,因为它可以有效的减少资源的利用(移动端本身资源有限)。

 

6.使用硬件加速的问题

使用硬件加速并不是十全十美的事情,比如:

1内存。如果GPU加载了大量的纹理,那么很容易就会发生内容问题,这一点在移动端浏览器上尤为明显,所以,一定要牢记不要让页面的每个元素都使用硬件加速。

2使用GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制。即使最终硬件加速停止了,文本还是会在动画期间显示得很模糊。

 

总结

只对我们需要实现动画效果的元素应用以上方法,如果仅仅为了开启硬件加速而随便乱用,那是不明智的。

小心使用这些方法,如果通过你的测试,结果确是提高了性能,你才可以使用这些方法。使用GPU可能会导致严重的性能问题,因为它增加了内存的使用,而且它会减少移动端设备的电池寿命。

 

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站:用CSS开启硬件加速来提