JS烟花背景效果达成形式,Tencent微云中绿遮罩指
分类:前端技术

基于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].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元素实现烟花特效的技巧,需要的朋友可以...

后来发现还不错。不如继续写下去。
这个版本基本上跟jquery的animate一样了。
我是说效果基本上一样了。(效率还没测试过。);
如果有专业测试人员 帮我测试下。
1:功能说明
  兼容主流浏览器。
1:支持回调函数;
  2:支持级联动画调用;
3:支持delay动画队列延迟;
  4:支持stop停止动画;
5:支持opacity透明度变化;
6:支持 = -= *= /=操作;
7:支持单位操作(px, %);
2:使用说明
jelle(A).animate(B, C, D);
A:需要执行动画的dom元素ID;
B:动画的主要参数传递{key,val,key2,val2};比如{width:'100px',height:' =100px',opacity:0.5},
opacity--透明度变化 支持 = -= *= /=操作。
C:动画执行用时,以毫秒为单位;[可选 默认500毫秒];
D:回调函数;[可选]
3:方法说明
1:animate()方法
jelle('cc').animate({width:'100px'},300,function(){alert('完成')});// 是 cc 的宽度在300毫秒的时间变化到100px 动画结束 弹出 ‘完成'
2:stop()方法
jelle('cc').stop();//停止正在 cc 对象上播放的动画。
3:delay()方法
jelle('cc').delay(1000).animate({width:'100px'});//cc 的宽度发生变化 将被延迟1秒执行。
我会一直把他完善下去。

一、先看效果

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

图片 2

一、微云的实现

网站有一些改动的时候,为了让用户熟知新的操作位置,往往会增加一个引导,常见的方式就是使用一个黑色的半透明蒙版,然后需要关注的区域是镂空的。

然后上周五我去微云转悠的时候,也看到了引导层,于是职业病又犯了,去学习下别人是怎么实现的。下面是观测的结果:

为了实现镂空蒙层效果,作者发挥了小时候拼积木的才能,使用两层HTML结构,内层使用5块独立区域拼接形成,至于中间镂空的区域的阴影则是使用的图片实现的。

图片 3

图片 4

虽然最终的效果满足了产品的需求,对于用户而言,目的已经达到。但是,从代码质量层面、潜在的体验提升可能性、使用场景广度上来讲,还是弱了很多的。

举例来说,如果我们某个提示区域面积很大,那中间的那个镂空区域尺寸是不是要变,那后面的背景图片怎么办?搞新图,有人看到了使用了background-size:cover, 那IE7,IE8怎么办?哦,可能微云不需要管IE7, IE8.

如果不需要管IE7, IE8,那这里的实现就显得更加小白了。我们实际上只需要一层标签,一层空标签就可以实现我们的效果,且不需要图片。

相关文章

相关搜索:

今天看啥

搜索技术库

返回首页

  • vivo 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%;    
}

帮客评论

var jelle = function(id){
var $ = function(id){ return document.getElementById(id); },
elem = $(id),//对象
f = 0, _this = {}, lazy = 10, lazyque = 10,// f动画计数器 lazy动画延迟 lazyque队列延迟
// 算子你可以改变他来让你的动画不一样
tween = function(t, b, c, d){ return - c * (t /= d) * (t - 2) b},
// adv 用于 = -= *= /=操作
adv = function(val, b){
var va, re= /^([ -\*/]=)([-]?[d.] )/ ;
if (re.test(val)){
var reg = val.match(re);
reg[2] = parseFloat(reg[2]);
switch ( reg[1] ){
case ' =':
va = reg[2];
break;
case '-=':
va = -reg[2];
break;
case '*=':
va = b*reg[2] - b;
break;
case '/=':
va = b/reg[2] - b;
break;
}
return va;
}
return parseFloat(val) - b;
}
// elem.animate 读取用于当前dom元素上的动画队列
elem.animate = elem.animate || [];
//stop 功能要使用的
jelle[id]= {};
jelle[id]['stop'] = true;
//alert(jelle[id]['stop'])
// 统一队列入口 用于方便设置延迟,与停止
_this.entrance = function(fn, ags, lazytime){
//fn 调用函数 ags 参数 lazytime 延迟时间
setTimeout(function(){
fn(ags[0], ags[1], ags[2]);
}, (lazytime || 0));
}
// 停止动画 此方法还不能用
_this.stop = function(){
jelle[id]['stop'] = false;
elem.animate.length=0;
$(id).animate.length=0;
return _this;
}
// 队列操作
_this.queue = function(){
if (elem.animate && f == elem.animate[0].length){
f = 0;// 清空计数器
elem.animate[0].callback ? elem.animate[0].callback.apply(elem) : false;
// 判断是否有动画在等待执行
if (elem.animate.length > 1){
elem.animate[0].callback = elem.animate[1].callback;
elem.animate = $(id).animate || [];// 从dom对象上获取最新动画队列
elem.animate.shift();// 清除刚执行完的动画队列
$(id).animate = elem.animate;// 把新的队列更新到dom
var ea = elem.animate[0];
// 循环播放队列动画
for(var i = 0; i < ea.length; i ){
ea[i][0] === 'opacity' ? _this.entrance(_this.alpha, [ea[i][1], ea[i][2]], lazyque):
_this.entrance(_this.execution, [ea[i][0], ea[i][1], ea[i][2]], lazyque);
}
}else{
elem.animate.length = 0; // 队列清楚
$(id).animate.length = 0; // 队列清楚
}
}
}
//设置lazy方法,以后的队列动画延迟时间
_this.delay = function(val){
lazyque = val;
return _this;
}
//动画变化
_this.execution = function(key, val, t){
//alert(val)
var s = (new Date()).getTime(), d=t || 500 ,
b = parseFloat(elem.style[key]) || 0 ,
c = adv(val, b) ,// adv用于设置高级操作比如 = -= 等等
un = val.match(/d (. )/)[1];// 单位
(function(){
var t = (new Date()).getTime() - s;
if (t > d){
t = d;
elem.style[key] = parseInt(tween(t, b, c, d)) un;
_this.queue(); // 操作队列
return _this;
}
elem.style[key] = parseInt(tween(t, b, c, d)) un;
jelle[id]['stop'] && setTimeout(arguments.callee, lazy);
// _this.entrance(arguments.callee,[1,1,1],lazy);
// arguments.callee 匿名函数递归调用
})();
}
// 入口
_this.animate = function(sty, t, fn){
// sty,t,fn 分别为 变化的参数key,val形式,动画用时,回调函数
var len = elem.animate.length;// len查看动画队列长度
elem.animate[len] = [];
elem.animate[len].callback = fn;
//多key 循环设置变化
for(var i in sty){
elem.animate[len].push([i, sty[i], t]);
if(len == 0){
i == 'opacity' ? _this.entrance(_this.alpha, [sty[i], t], lazyque) :
_this.entrance(_this.execution, [i, sty[i], t], lazyque);
}
}
$(id).animate = elem.animate;//把新的动画队列添加到dom元素上
return _this;
}
// 透明度变化的代码
_this.alpha = function(val, t){
var s = (new Date()).getTime(),
d = t || 500, b, c;
if( document.defaultView ){
b = document.defaultView.getComputedStyle(elem,null)['opacity'] || 1,
c = adv(val,b) * 100;
(function(){
var t = (new Date()).getTime() - s;
if(t > d){
t = d;
elem.style['opacity'] = tween(t, (100 * b), c, d) / 100;
_this.queue(); // 队列控制
return _this;
}
elem.style['opacity'] = tween(t, (100 * b), c, d) / 100;
jelle[id]['stop'] && setTimeout(arguments.callee, lazy);
})()
}else{
b = elem.currentStyle['filter'] ?
(elem.currentStyle['filter'].match(/^alpha(opacity=([d.] ))$/))[1]/100 : 1;
c = adv(val, b) * 100;
(function(){
var t = (new Date()).getTime() - s;
if (t > d){
t = d;
elem.style['filter']='alpha(opacity=' tween(t, (100 * b), c, d) ')';
_this.queue(); // 队列控制
return _this;
}
elem.style['filter'] = 'alpha(opacity=' tween(t, (100*b) , c, d) ')';
jelle[id]['stop'] && setTimeout(arguments.callee, lazy);
})()
}
}
return _this;
}

三、我也想使用

我花了点功夫封装了一个方法,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

代码打包下载

四、结束语

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

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

其实说穿了,并没有多大的难度,一点JS 一点CSS。关键是想到好的解决思路。如何才能有好的解决思路呢,需要对前端是真爱,这样你会一直把前端放在脑中,自然而然就会是不是迸出很多很好的思路,创意和解决方案了!否则,永远都只能拾人牙慧。

1 赞 2 收藏 评论

图片 10

程序可能每天都在修改。如果想要最新的ainimate 可以email联系我。

上面的代码已经不是最新的了。

这两天又修正了几个错误的地方。
本文来自博客园 jelle 博客

您可能感兴趣的文章:

  • jQuery动画animate方法使用介绍
  • jquery animate 动画效果使用说明
  • JQuery动画animate的stop方法使用详解
  • jQuery动画效果animate和scrollTop结合使用实例
  • 分享8款优秀的 jQuery 加载动画和进度条插件
  • jQuery Animation实现CSS3动画示例介绍
  • Jquery中使用show()与hide()方法动画显示和隐藏图片
  • 一个CSS jQuery实现的放大缩小动画效果
  • jQuery动画出现连续触发、滞后反复执行的解决方法
  • jQuery实现基本动画效果的方法详解

本文由pc28.am发布于前端技术,转载请注明出处:JS烟花背景效果达成形式,Tencent微云中绿遮罩指

上一篇:移动端样式小技巧 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • 又不理解怎么命名class了
    又不理解怎么命名class了
    怎么样鬼,又不驾驭怎么命名class了 2015/10/25 · CSS ·class 原稿出处:结一(@结一w3cplus)    信任写css的人都会遇见下边的标题:  糟糕,怎么命名这一个
  • 在行内元素前注入一个换行,right的使用说明
    在行内元素前注入一个换行,right的使用说明
    在行内元素前注入一个换行 2016/06/28 · CSS ·行内元素 原文出处: ChrisCoyier   译文出处:众成翻译    我遇到了一个小问题,我有一个 span 在 header 中,而
  • 标签的用法,标签区别
    标签的用法,标签区别
    考虑 pre 标签的样式 2016/06/02 · CSS ·标签 原文出处: ChrisCoyier   译文出处:众成翻译    你可能正在使用 pre 标签。这是一个 HTML中非常特别的标签,它
  • 异步JavaScript的进步历程,函数简化异步代码
    异步JavaScript的进步历程,函数简化异步代码
    异步JavaScript进化史 2015/10/14 · CSS 本文由 伯乐在线 -cucr翻译,唐尤华校稿。未经许可,禁止转载! 英文出处:GergelyNemeth。欢迎加入翻译组。 async函数近在
  • Canvas完毕监察和控制种类页面呈现,json工控风机
    Canvas完毕监察和控制种类页面呈现,json工控风机
    传说 HTML5 Canvas 达成客车站监察和控制 2017/11/21 · HTML5 ·Canvas 初稿出处: hightopo    陪伴国内经济的长足发展,大家对安全的渴求更为高。为了防卫下列景