JS烟花背景效果落成方式,腾讯微云藏蓝色遮罩率领蒙版更好的CSS完毕形式

基于clip-path的任意元素的碎片拼凑动效

2016/06/08 · CSS ·
clip-path

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

腾讯微云黄色遮罩指引蒙版更好的CSS已毕方式

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

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

JS烟花背景效果落实方式

 那篇文章首要介绍了JS烟花背景效果落到实处格局,实例分析了javascript操作dom元素完成烟花特效的技艺,须求的对象可以参见下

 

 

本文实例讲述了JS烟花背景效果落到实处格局。分享给大家供大家参考。具体落到实处方式如下:

 

代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>又一个很酷的JS烟花背景特效</title>
<script type=”text/javascript”>
var fireworks = function(){
this.size = 20;
this.rise();
}
fireworks.prototype = {
color:function(){
var c = [‘0′,’3′,’6′,’9′,’c’,’f’];
var t = [c[Math.floor(Math.random()*100)%6],’0′,’f’];
t.sort(function(){return Math.random()>0.5?-1:1;});
return ‘#’+t.join(”);
},
aheight:function(){
var h = document.documentElement.clientHeight-250;
return Math.abs(Math.floor(Math.random()*h-200))+201;
},
firecracker:function(){
var b = document.createElement(‘div’);
var w = document.documentElement.clientWidth;
b.style.position = ‘absolute’;
b.style.color = this.color();
b.style.bottom = 0;
b.style.left = Math.floor(Math.random()*w)+1+’px’;
document.body.appendChild(b);
return b;
},
rise:function(){
var o = this.firecracker();
var n = this.aheight();
var c = this.color;
var e = this.expl;
var s = this.size;
var k = n;
var m = function(){
o.style.bottom = parseFloat(o.style.bottom)+k*0.1+’px’;
k-=k*0.1;
if(k<2){
clearInterval(clear);
e(o,n,s,c);
}
}
o.innerHTML = ‘.’;
if(parseInt(o.style.bottom)<n){
var clear = setInterval(m,20);
}
},
expl:function(o,n,s,c){
var R=n/3,Ri=n/6,Rii=n/9;
var r=0,ri=0,rii=0;
for(var i=0;i<s;i++){
var span = document.createElement(‘span’);
var p = document.createElement(‘i’);
var a = document.createElement(‘a’);
span.style.position = ‘absolute’;
span.style.fontSize = n/10+’px’;
span.style.left = 0;
span.style.top = 0;
span.innerHTML = ‘*’;
p.style.position = ‘absolute’;
p.style.left = 0;
p.style.top = 0;
p.innerHTML = ‘*’;
a.style.position = ‘absolute’;
a.style.left = 0;
a.style.top = 0;
a.innerHTML = ‘*’;
o.appendChild(span);
o.appendChild(p);
o.appendChild(a);
}
function spr(){
r += R*0.1;
ri+= Ri*0.06;
rii+= Rii*0.06;
sp = o.getElementsByTagName(‘span’);
p = o.getElementsByTagName(‘i’);
a = o.getElementsByTagName(‘a’);
for(var i=0; i<sp.length;i++){
sp[i].style.color = c();
p[i].style.color = c();
a[i].style.color = c();
sp[i].style.left=r*Math.cos(360/s*i)+’px’;
sp[i].style.top=r*Math.sin(360/s*i)+’px’;
sp[i]JS烟花背景效果落成方式,腾讯微云藏蓝色遮罩率领蒙版更好的CSS完毕形式。.style.fontSize=parseFloat(sp[i].style.fontSize)*亚洲必赢官网,0.96+’px’;
p[i].style.left=ri*Math.cos(360/s*i)+’px’;
p[i].style.top=ri*Math.sin(360/s*i)+’px’;
p[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+’px’;
a[i].style.left=rii*Math.cos(360/s*i)+’px’;
a[i].style.top=rii*Math.sin(360/s*i)+’px’;
a[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+’px’;
}
R-=R*0.1;
if(R<2){
o.innerHTML = ”;
o.parentNode.removeChild(o);
clearInterval(clearI);
}
}
var clearI = setInterval(spr,20);
}
}
window.onload = function(){
function happyNewYear(){
new fireworks();
}
setInterval(happyNewYear,1000);
}
</script>
<style type=”text/css”>
</style>
</head>
<body style=”background:#000;font:12px Georgia, ‘Times New Roman’,
Times, serif”>
</body>
</html>

 

运转效果如下所示:

亚洲必赢官网 1

瞩望本文所述对我们的javascript程序设计有所帮助。

那篇小说首要介绍了JS烟花背景效果落到实处形式,实例分析了javascript操作dom元素完成烟花特效的技术,必要的爱人可以…

后边用Clip属性完毕了文字上下两半不等色彩的拼凑。
色彩缤纷渐变字,包容所有主流浏览器。
页面JS当中真正实用的唯有colorful()函数:

一、先看成效

您可以狠狠地点击那里:基于clip-path的要素碎片飞入动效demo

亚洲必赢官网 2

一、微云的贯彻

网站有局地变更的时候,为了让用户驾驭新的操作地方,往往会大增一个率领,常见的格局就是接纳一个粉黄色的半透明蒙版,然后要求关切的区域是雕刻的。

接下来下周日我去微云旋转的时候,也见到了率领层,于是职业病又犯了,去学习下别人是怎么落到实处的。上面是考察的结果:

为了兑现镂空蒙层效果,小编公布了童年拼积木的才能,使用两层HTML结构,内层使用5块独立区域拼接形成,至于中档镂空的区域的黑影则是选用的图样完结的。

亚洲必赢官网 3

亚洲必赢官网 4

虽说最后的意义满意了出品的必要,对于用户而言,目标已经高达。不过,从代码品质层面、潜在的体会提高可能性、使用情形广度上来讲,仍然弱了诸多的。

比喻来说,若是大家某个提示区域面积很大,这中间的不得了镂空区域尺寸是还是不是要变,那背后的背景图片如何做?搞新图,有人看到了使用了background-size:cover,
那IE7,IE8怎么做?哦,可能微云不要求管IE7, IE8.

假诺不须要管IE7,
IE8,那那里的兑现就显示尤其小白了。大家实际只须要一层标签,一层空标签就足以兑现大家的成效,且不须要图片。

连带作品

连锁搜索:

明天看啥

探寻技术库

回到首页

  • 魅族Xshot通话背景设置方式
  • CSS定义鼠标移上图片链接,出现边框效果,
  • android 拉伸图片,
  • 兑现Activity的滑动再次回到效果,activity滑动重临
  • 正确的动画片效果-AndroidViewHover,
  • jquery落成简单手风琴菜单功用实例,jquery手风

相关频道:
HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前者代码  正则表达式  Flex教程  WEB前端教程  

复制代码 代码如下:

二、完成原理

功能本质上是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-私家前缀。

二、我的落成

主要在于思维方法的变化。拼积木那种想法大家都相比较便于想到,符合平时认知,但是,但代码层面,我们得以拓展思考转换,发散思考,偌大的半透明遮罩层,大家不用老想着背景象块背景象块,可以突破常规思维,把它认为是边框,一个很大很大的边框(大家一贯利用border都是1像素巨多),那样,我们本来就有了镂空效果。

如下图示意:
亚洲必赢官网 5

然而,近期我们当中的镂空区域方的,有没有怎样艺术成为圆的吗?
自然有,方法1是因素设置超大圆角,不过,此时为了边框仍旧填满所有显示器,border边框尺寸要大大增大,不过,为了不影响页面的滚动条,大家亟须再嵌套一层标签,就突显啰嗦了;
方法2则是艺术1或多或少方面的逆向思维处理,就是把当下元素作为外层限制标签,里面重新生成一个大尺寸伪元素,完成自适应尺寸的圆角功效,那些好,HTML干净不啰嗦,CSS一步到位(代码如下示意);

.cover::before { content: ”; width: 100%; height:100%; border-radius:
50%; border: 400px solid #000; position: absolute; left: -400px; top:
-400px; /* 自己瞎填的参数,示意 */ box-shadow: inset 0 0 5px 2px
rgba(0,0,0,.75); }

1
2
3
4
5
6
7
8
9
10
.cover::before {
    content: ”;
    width: 100%; height:100%;
    border-radius: 50%;
    border: 400px solid #000;
    position: absolute;
    left: -400px; top: -400px;
    /* 自己瞎填的参数,示意 */
    box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);
}

世家可以见见,上面的伪元素的相继参数都是稳定参数值,与外表因素的尺码什么的从未有过其余关系,只要外部因素尺寸不超过400,里面永远会有一个正椭圆的内阴影的镂空图形(因为当先部分会被.cover暗藏),要知道圆角和正椭圆的涉嫌,可以参见我事先的小说:“秋月何时了,CSS3
border-radius知多少?”。

眼见为实,耳听为虚,您可以狠狠地方击那里:一层标签达成网站指引镂空蒙版功效demo
(点击蓝色蒙层会有指导切换效果)

demo那一个镂空蒙层所使用的HTML代码如下:

<div class=”cover”/></div>

1
<div class="cover"/></div>

科学,就那样不难,没什么嵌套,没有怎么四个要素变形金刚合体,没有运用图片。

微云那张图纸3K多,以微云的用户访问量,猜想流量费要多多钱的。

再者,咱们如果点击蒙版,会发觉,镂空的区域大小每一次都是分化的,有大有小,有高有瘦,而微云的那多少个达成格局要餍足此要求就难上加难;而且,我们发现没,这一个尺寸地方的转变都是动画片来动画去的,不是嗙嗙嗙那种机械的意义,更soft,
对用户视觉率领成效更好,你看,我从此处到此处了,为啥可以实现动画效果啊,因为大家的镂空和内阴影都是CSS完成的,而微云的图片方法,显著是无能为力有动画的。

亚洲必赢官网 6

JS代码协理
当然,我的兑现也离不开JS的鼎力相助,JS的劳作很简短,让蒙层的width/height以及border高低和要求指导的因素相关联。

自身专门整了个可以公用的方式coverGuide(命名不喜欢自己随便改):

var coverGuide = function(cover, target) { var body = document.body, doc
= document.documentElement; if (cover & target) { // target
size(width/height) var targetWidth = target.clientWidth, targetHeight =
target.clientHeight; // page size var pageHeight = doc.scrollHeight,
pageWidth = doc.scrollWidth; // offset of target var offsetTop =
target.getBoundingClientRect().top + (body.scrollTop || doc.scrollTop),
offsetLeft = target.getBoundingClientRect().left + (body.scrollLeft ||
doc.scrollLeft); // set size and border-width cover.style.width =
targetWidth + ‘px’; cover.style.height = targetHeight + ‘px’;
cover.style.borderWidth = offsetTop + ‘px ‘ + (pageWidth – targetWidth –
offsetLeft) + ‘px ‘ + (pageHeight – targetHeight – offsetTop) + ‘px ‘ +
offsetLeft + ‘px’; cover.style.display = ‘block’; // resize if
(!cover.isResizeBind) { if (window.addEventListener) {
window.addEventListener(‘resize’, function() { coverGuide(cover,
target); }); cover.isResizeBind = true; } else if (window.attachEvent) {
window.attachEvent(‘onresize’, function() { coverGuide(cover, target);
}); cover.isResizeBind = true; // IE7, IE8 box-shadow hack
cover.innerHTML = ”; } } } };

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
44
45
var coverGuide = function(cover, target) {
    var body = document.body, doc = document.documentElement;
    if (cover & target) {
        // target size(width/height)
        var targetWidth = target.clientWidth,
            targetHeight = target.clientHeight;
 
        // page size
        var pageHeight = doc.scrollHeight,
            pageWidth = doc.scrollWidth;
 
        // offset of target    
        var offsetTop = target.getBoundingClientRect().top + (body.scrollTop || doc.scrollTop),
            offsetLeft = target.getBoundingClientRect().left + (body.scrollLeft || doc.scrollLeft);
 
        // set size and border-width
        cover.style.width = targetWidth + ‘px’;
        cover.style.height = targetHeight + ‘px’;    
        cover.style.borderWidth =
            offsetTop + ‘px ‘ +
            (pageWidth – targetWidth – offsetLeft) + ‘px ‘ +
            (pageHeight – targetHeight – offsetTop) + ‘px ‘ +
            offsetLeft + ‘px’;
 
        cover.style.display = ‘block’;
 
        // resize
        if (!cover.isResizeBind) {
            if (window.addEventListener) {
                window.addEventListener(‘resize’, function() {
                    coverGuide(cover, target);
                });    
                cover.isResizeBind = true;
            } else if (window.attachEvent) {
                window.attachEvent(‘onresize’, function() {
                    coverGuide(cover, target);
                });
                cover.isResizeBind = true;
 
                // IE7, IE8 box-shadow hack
                cover.innerHTML = ”;
            }
        }
    }
};

这里的coverGuide办法应用原生JS完毕,IE6+浏览器都是匹配的,不看重JS库,大家可以自由行使。当然,写得心急,没有严谨验证,可能有bug,大家可以稍微留点心。

利用卓殊简单,语法如下:

coverGuide(cover, target);

1
coverGuide(cover, target);

其中cover就是.cover那个独自的蒙版元素,target则是我们须求辅导的要素,按钮啊,导航什么的。然后,我们的探讨区域活动定位到target的职责,大小也是target要素的大小。超省心。

具体运用,可参照上边的demo,源代码就在页面上。

IE7,IE8怎么办
若是你要求包容IE7,IE8,大家不妨就方框效果;假如规划和成品接受不了,则可以动用图片打个补丁,例如地方JS代码部分的:

cover.innerHTML = ‘<img src=”guide-shadow.png”>’;

1
cover.innerHTML = ‘<img src="guide-shadow.png">’;

本身demo使用的这几个图形长下边那样:
亚洲必赢官网 7

大大小小还有阴影都是自我要好随手一搞的,意在示意,真实项目大家可以向设计师索要图片。

下一场,CSS超easy, 图片撑满大家的cover就可以。

/* IE7, IE8 img */ .cover > img { width: 100%; height: 100%; }

1
2
3
4
/* IE7, IE8 img */
.cover > img {
    width: 100%; height: 100%;    
}

帮客评论

function colorful(obj,font,r,g,b,type){
var boxObj;
if(typeof(obj)==”string”||typeof(obj)==”number”){
boxObj = document.getElementById(obj);
}else{
boxObj = obj;
}
boxObj.innerHTML=”<a href=’#’>”+font+”</a>”;
var num = boxObj.getElementsByTagName(“a”)[0].scrollWidth;
boxObj.innerHTML=””;
for(var i=0;i<=num;i++){
var j=i+1;
var c=Math.round(255/num*i);
switch(Number(type)){
case 0:r=c;g=c;b=c;break;
case 1:r=c;break;
case 2:g=c;break;
case 3:b=c;break;
}
var iObj = document.createElement(“A”);
iObj.innerHTML=font;
iObj.style.clip=”rect(auto “+j+”px auto “+i+”px)”;
iObj.style.color=”rgb(“+r+”,”+g+”,”+b+”)”;
iObj.href=”#”;
boxObj.appendChild(iObj);
}
}

三、我也想利用

自身花了点功夫封装了一个艺术,1K出头一点,代码如下(我们可以一贯放到项目JS中或独自个JS文件):

/** * @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’); // 碎片特效开始化 clipPath(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. 土生土长被用来粉碎的要素从来都在的,那样,碎片拼接处的茶余饭后就看不出来啦!

三、结束语

那种蒙版覆盖思想吗,不仅仅适用于那种普遍的指点。大家上传图片,尤其上传头像之后,要对头像举办剪裁,常见的交互之一就是四周粉红色,中间镂空,也可以使用巨大border来落实大家的效益,一层标签足矣,根本不须求上下左右额外4层标签拼接合体完成。

其中自适应的圆角听从单看文字,很多同伴估量不明了自家在说些什么,指出去demo页面看下伪元素的代码,真实区域大小和最终效果,估计就会了然了。

谢谢阅读,欢迎调换,欢迎提供更好的兑现方式,一定有的,只是自己功力不够。

以上~

亚洲必赢官网 8

连锁文章

  • 小tip:CSS3下的圈子遮罩效果落到实处与应用
    (0.604)
  • CSS3 box-shadow兼容loading效果兼IE10+ CSS
    Hack介绍
    (0.396)
  • CSS3
    box-shadow盒阴影图形生成技术
    (0.396)
  • CSS
    border三角、圆角图形生成技术简介
    (0.350)
  • CSS3图标图形生成技术个人攻略
    (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
    评论

亚洲必赢官网 9

CLIP已毕色彩渐变字体

四、结束语

自己写的第一版JS中的碎片分布是为随意分布,基本上根据我方位随机分布在4个角的势头上;这里给我们来得的是真随机,也就是最左侧的碎片可能是从最右侧飞过来的,所以效果要更爆裂一点。

好了,其他就没怎么了,一个小特效而已。

实际说穿了,并从未多大的难度,一点JS+一点CSS。关键是想到好的解决思路。怎样才能有好的化解思路呢,须要对前者是真爱,那样您会平昔把前端放在脑中,放任自流就会是或不是迸出很多很好的思绪,创意和化解方案了!否则,永远都不得不谬种流传。

1 赞 2 收藏
评论

亚洲必赢官网 10

CSS多彩渐变字

文字:

R值:

初阶化RGB颜色中的R值

G值:

初阶化RGB颜色中的G值

B值:

起头化RGB颜色中的B值

渐变方式:

灰度渐变变化R值变化G值变化B值 相应的数值会强制在0~255之间变化

    

渐变着色

 

Designed by Silence,转发请讲明出处
http://www.silentash.com/?id=109

[Ctrl+A 全选
注:如需引入外部Js需刷新才能实施]

即使如此IE有协调的渐变滤镜,但其余浏览器都不辅助。CLIP属性的使用可以支撑具有浏览器!通进度序,大家可以轻松地给种种文字副本添加CLIP属性将一段文字分割成一个一个像素,分别着色,最终结合到一块儿,达成多彩渐变!

您可能感兴趣的稿子:

  • 纯js和css达成渐变色包含静态渐变和动态渐变
  • js落成图片从左往右渐变切换效果的点子
  • js渐变突显渐变消失示例代码
  • js完结类似光照的炫彩文字渐变视觉冲击功能
  • 用js已毕层随着情节大小动态渐变改变
    推荐
  • JS Tween 颜色渐变
  • 打包了一个自动生成渐变字的JS类(clip)
  • 应用递增的数字重临循环渐变的颜色的js代码
  • JS+CSS完结感应鼠标渐变呈现DIV层的艺术
网站地图xml地图