http://www.web008.net

腾讯微云黑色遮罩引导蒙版更好的CSS实现方式,path的任意元素的碎片拼接动效

二、实现原理

效果与利益本质上是CSS3动漫,正是旋转(transform:rotate)和位移(transform:translate),只是旋转和位移的预制零器件是三角碎片而已。

那三角从何而来,本质上是采纳CSS3 clip-path剪裁出来的。

至于CSS3 clip-path能够参见小编在此之前的小说:“CSS3 clip-path polygon图形构建与动漫片调换二三事”。

剪裁叁个三角并简单,不过,要是把自由的要素剪裁成一个叁个的三角呢?

这就须要依附JS来完结了。

JS把成分剪裁成二个二个的等腰直角三角形,然后轻便分布在四周,然后,通过CSS3 animation动漫,让全体的在方圆的因素归为就足以。因为CSS3 animation动漫关键帧中的CSS样式权重就如要比style大。

于是乎,我们好似下焦点CSS:

.clip[style] { opacity: 0; } .active .clip[style] { will-change: transform; animation: noTransform .5s both; } @keyframes noTransform { to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
.clip[style] {
    opacity: 0;
}
.active .clip[style] {
    will-change: transform;
    animation: noTransform .5s both;
}
@keyframes noTransform {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0);
    }
}

其中,will-change效率是让动漫片更流畅,可参见小编前边文章:“利用CSS3 will-change升高页面滚动、动漫等渲染质量”。

.active .clip[style]这段CSS表示的意思是,只要被剪裁的三角形们的父级有了类名active, 全部的三角的职责就不是私行遍布,而是会以动漫片情势归位到其本来的职位。对的,是负有,大家尚无须要对每三个剪裁的三角形碎片做动漫,只要归位就足以。

通过toggle类名active, 碎片的动效就足以不停地表现,经测量试验,在活动端效果也是未可厚非的。

现阶段,除了IE浏览器和Android4.3-都协助了clip-path,不过还亟需-webkit-私家前缀。

大器晚成、微云的贯彻

网址有部分转移的时候,为了让顾客熟谙新的操作地点,往往会大增二个辅导,见死不救的方式就是接受多个赤褐的半透明蒙版,然后要求关切的区域是雕刻的。

然后上周一笔者去微云旋转的时候,也来看了教导层,于是职业病又犯了,去读书下外人是怎么贯彻的。上面是洞察的结果:

为了落实镂空蒙层效果,作者发表了童年拼积木的本领,使用两层HTML结构,内层使用5块独立区域拼接产生,至于中档镂空的区域的影子则是选取的图纸完毕的。

美高梅手机版 1

美高梅手机版 2

固然如此末了的职能满足了付加物的要求,对于顾客来说,目标已经达成。不过,从代码品质层面、潜在的心得升高大概性、使用境况广度上来说,还是弱了成都百货上千的。

譬世尊讲,假如大家某些提示区域面积超大,那中间的可怜镂空区域尺寸是或不是要变,那背后的背景图片如何做?搞新图,有人见到了使用了background-size:cover, 那IE7,IE8如何是好?哦,也许微云无需管IE7, IE8.

假若不要求管IE7, IE8,那这里的贯彻就显得相当的小白了。大家实际只须要风度翩翩层标签,生机勃勃层空标签就能够达成大家的效果与利益,且无需图片。

三、笔者也想利用

小编花了点武术封装了叁个措施,1K转运一点,代码如下(大家能够直接放到项目JS中或独立个JS文件卡塔 尔(英语:State of Qatar):

/** * @description 大肆成分碎片化,协作CSS能够有散装拼凑特效 更加的多内容参见 * @author zhangxinxu(.com) * @license MIT [保存此段注释消息签名] */ var clipPath=function(t){if(!t){return false}t.removeAttribute("id");var r={height:t.clientHeight,width:t.clientWidth,distance:60,html:t.outerHTML};if(window.getComputedStyle(document.body).webkitClipPath){var a=r.distance,n=r.width,e=r.height;var o="";for(var i=0;i','" style="'+e+v+'">')})}}t.parentNode.innerHTML=r.html+o;return true}else{t.className+=" no-clipath";return false}};

1
2
3
4
5
6
7
/**
* @description 任意元素碎片化,配合CSS可以有碎片拼接特效
               更多内容参见 http://www.zhangxinxu.com/wordpress/?p=5426
* @author zhangxinxu(.com)
* @license MIT [保留此段注释信息署名]
*/
var clipPath=function(t){if(!t){return false}t.removeAttribute("id");var r={height:t.clientHeight,width:t.clientWidth,distance:60,html:t.outerHTML};if(window.getComputedStyle(document.body).webkitClipPath){var a=r.distance,n=r.width,e=r.height;var o="";for(var i=0;i','" style="'+e+v+'">')})}}t.parentNode.innerHTML=r.html+o;return true}else{t.className+=" no-clipath";return false}};

语法如下:

clipPath(ele);

1
clipPath(ele);

其中,ele为DOM元素,clipPath艺术基于原生JS书写,不依据于其余JS框架,对于不支持clip-path的浏览器未有效果。重回值是布尔值truefalse, 返回true意味着浏览器扶助clip-pathfalse为不援救。

代码中的distance:60意味着碎片的大大小小,越小碎片更多,对质量的核算就越大。

诸如,demo普通话字和图片的施用:

var eleText = document.getElementById('text'), eleImage = document.getElementById('image'); // 碎片特效先导化 clip帕特h(eleText); clipPath(eleImage);

1
2
3
4
5
6
var eleText = document.getElementById('text'),
    eleImage = document.getElementById('image');
    
// 碎片特效初始化
clipPath(eleText);
clipPath(eleImage);

亟需小心的是:

  1. 运用动作效果的必需是absolute相对定位成分。一来效果必得,二来品质考虑衡量;
  2. 运用动效的成分不要太复杂,或然对质量会有核算;
  3. 原来被用来粉碎的因素一向都在的,那样,碎片拼接处的空闲就看不出来啦!

腾讯微云影青遮罩教导蒙版更加好的CSS完毕方式

2016/03/08 · CSS · 1 评论 · 蒙版

原稿出处: 张鑫旭(@张鑫旭 )   

美高梅手机版,四、结束语

笔者写的首先版JS中的碎片布满是为随意布满,基本上遵照自身方位随机遍布在4个角的自由化上;这里给大家显示的是真随机,也正是最左侧的零碎大概是从最侧面飞过来的,所以效果要更爆裂一点。

好了,别的就没怎么了,二个小特效而已。

实际说穿了,并不曾多大的难度,一点JS+一点CSS。关键是想到好的缓和思路。怎么样技巧有好的消除思路呢,需求对前边贰个是真爱,那样您会一向把前端放在脑中,任天由命就能是否迸出非常多很好的思路,创新意识和技术方案了!不然,永世都只好拾人涕唾。

1 赞 2 收藏 评论

美高梅手机版 3

三、结束语

这种蒙版覆盖思想吗,不唯有适用于这种遍布的指引。我们上传图片,特别上传头像之后,要对头像举行剪裁,置之不顾的相互影响之后生可畏正是周边灰湖绿,中间镂空,也能够行使庞大border来兑现大家的效应,大器晚成层标签足矣,根本无需上下左右额外4层标签拼接合体完成。

里面自适应的圆角职能单看文字,超多小同伙推测不知情小编在说些什么,建议去demo页面看下伪成分的代码,真实区域大小和尾声效果,推测就能够精晓了。

多谢阅读,招待调换,接待提供更加好的贯彻方式,一定有的,只是笔者功力非常不足。

以上~

美高梅手机版 4

连锁文章

  • 小tip:CSS3下的圈子遮罩效果完成与行使 (0.604)
  • CSS3 box-shadow兼容loading效果兼IE10+ CSS Hack介绍 (0.396)
  • CSS3 box-shadow盒阴影图形生成手艺 (0.396)
  • CSS border三角、圆角图形生成本事简单介绍 (0.350)
  • CSS3Logo图形生成技术个人战略 (0.338)
  • 遐想:若无IE6和IE7浏览器… (0.286)
  • 伪成分表单控件暗许样式重新设置与自定义大全 (0.286)
  • first-line伪类落成宽容IE6/IE7的单标签多背景效果 (0.286)
  • CSS计数器(种类数字字符自动依次增加)详细明白 (0.286)
  • CSS之before, after伪成分天性表现两则 (0.286)
  • CSS3/SVG clip-path路线剪裁遮罩属性简要介绍 (RANDOM – 0.255)

    1 赞 2 收藏 1 评论

美高梅手机版 5

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。