之前用Clip属性实现了文字上下两半不同色彩的拼

作者: 前端  发布:2019-11-05

基于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].style.fontSize=parseFloat(sp[i]9159.com ,.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>

 

运作效果如下所示:

9159.com 1

企望本文所述对我们的javascript程序设计有着扶助。

那篇随笔首要介绍了JS烟花背景效果达成情势,实例解析了javascript操作dom成分达成烟花特效的才具,必要的意中人能够...

以前用Clip属性实现了文字上下两半例外色彩的拼接。
五光十色渐变字,包容全部主流浏览器。
页面JS个中真正实用的独有colorful()函数:

风流浪漫、先看效能

您能够狠狠地点击这里:基于clip-path的成分碎片飞入动作效果demo

9159.com 2

豆蔻梢头、微云的得以达成

网址有部分改成的时候,为了让顾客熟练新的操作地方,往往会大增四个教导,经常见到的措施便是使用二个橄榄绿的半透明蒙版,然后需求关爱的区域是雕刻的。

然后上周四小编去微云旋转的时候,也观望了携带层,于是专门的学业病又犯了,去读书下外人是怎么落实的。上边是考察的结果:

为了兑现镂空蒙层效果,小编公布了小时候拼积木的技艺,使用两层HTML结构,内层使用5块独立区域拼接产生,至于中档镂空的区域的影子则是运用的图片达成的。

9159.com 3

9159.com 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像素巨多卡塔 尔(阿拉伯语:قطر‎,那样,我们当然就有了镂空效果。

如下图暗意:
9159.com 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 (点击天青蒙层会有辅导切换效果卡塔 尔(英语:State of Qatar)

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

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

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

正确,就那样轻便,没什么嵌套,未有何多个要素变形金刚合体,未有行使图片。

微云那张图纸3K多,以微云的客商访谈量,推测流量费要多多钱的。

而且,大家只要点击蒙版,会意识,镂空的区域大小每一遍都以不风度翩翩致的,有大有小,有高有瘦,而微云的至极达成方式要满意此需求就困难重重;而且,大家开掘没,那几个尺寸地方的更改都以动漫来动画去的,不是嗙嗙嗙这种机械的机能,更soft, 对客户视觉指点成效更加好,你看,笔者从这里到那边了,为啥可以兑现动画效果呢,因为我们的精雕细琢和内阴影都以CSS达成的,而微云的图纸方法,分明是无法有动漫的。

9159.com 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使用的那么些图片长下面那样:
9159.com 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页面看下伪成分的代码,真实区域大小和最终效果,估计就能够分晓了。

多谢阅读,应接沟通,应接提供更加好的得以达成情势,一定有的,只是本身功力远远不够。

以上~

9159.com 8

有关小说

  • 小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 评论

9159.com 9

CLIP达成色彩渐变字体

四、结束语

自己写的首先版JS中的碎片分布是为私下布满,基本上依照作者方位随机布满在4个角的倾向上;这里给大家来得的是真随机,也等于最左侧的散装只怕是从最左侧飞过来的,所以效果要更爆裂一点。

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

实在说穿了,并未有多大的难度,一点JS+一点CSS。关键是想到好的缓慢解决思路。如何技术有好的缓慢解决思路呢,需求对前面三个是真爱,那样你会直接把前端放在脑中,任其自流就能够是或不是迸出超级多很好的笔触,创新意识和实施方案了!不然,恒久都只能照本宣科。

1 赞 2 收藏 评论

9159.com 10

CSS多彩渐变字

文字:

R值:

领头化科雷傲GB颜色中的Lacrosse值

G值:

开端化库罗德GB颜色中的G值

B值:

初步化QX56GB颜色中的B值

渐变形式:

灰度渐变变化Evoque值变化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层的点子

本文由9159.com发布于前端,转载请注明出处:之前用Clip属性实现了文字上下两半不同色彩的拼

关键词:

上一篇:没有了
下一篇:没有了