`
xf326521
  • 浏览: 7750 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
文章分类
社区版块
存档分类
最新评论

CSS3图片破碎爆炸效果

CSS3jQuery 
阅读更多 
var fx  = {
	buffer : function(obj, cur, target, fnDo, fnEnd, fs){
		if(!fs)fs=6;
		var now={};
		var x=0;
		var v=0;
		
		if(!obj.__last_timer)obj.__last_timer=0;
		var t=new Date().getTime();
		if(t-obj.__last_timer>20)
		{
			fnMove();
			obj.__last_timer=t;
		}
		
		clearInterval(obj.timer);
		obj.timer=setInterval(fnMove, 20);
		function fnMove(){
			v=Math.ceil((100-x)/fs);			
			x+=v;			
			for(var i in cur)
			{
				now[i]=(target[i]-cur[i])*x/100+cur[i];
			}						
			if(fnDo)fnDo.call(obj, now);
			
			if(Math.abs(v)<1 && Math.abs(100-x)<1)
			{
				clearInterval(obj.timer);
				if(fnEnd)fnEnd.call(obj, target);
			}
		}
	},
	
	flex : function(obj, cur, target, fnDo, fnEnd, fs, ms){
		var MAX_SPEED=16;
		
		if(!fs)fs=6;
		if(!ms)ms=0.75;
		var now={};
		var x=0;	//0-100
		
		if(!obj.__flex_v)obj.__flex_v=0;
		
		if(!obj.__last_timer)obj.__last_timer=0;
		var t=new Date().getTime();
		if(t-obj.__last_timer>20)
		{
			fnMove();
			obj.__last_timer=t;
		}
		
		clearInterval(obj.timer);
		obj.timer=setInterval(fnMove, 20);
		
		function fnMove(){
			obj.__flex_v+=(100-x)/fs;
			obj.__flex_v*=ms;

			if(Math.abs(obj.__flex_v)>MAX_SPEED)obj.__flex_v=obj.__flex_v>0?MAX_SPEED:-MAX_SPEED;
			
			x+=obj.__flex_v;
			
			for(var i in cur)
			{
				now[i]=(target[i]-cur[i])*x/100+cur[i];
			}
			
			
			if(fnDo)fnDo.call(obj, now);
			
			if(Math.abs(obj.__flex_v)<1 && Math.abs(100-x)<1)
			{
				clearInterval(obj.timer);
				if(fnEnd)fnEnd.call(obj, target);
				obj.__flex_v=0;
			}
		}
	},
	linear : function (obj, cur, target, fnDo, fnEnd, fs){
		if(!fs)fs=50;
		var now={};
		var x=0;
		var v=0;
		
		if(!obj.__last_timer)obj.__last_timer=0;
		var t=new Date().getTime();
		if(t-obj.__last_timer>20)
		{
			fnMove();
			obj.__last_timer=t;
		}
		
		clearInterval(obj.timer);
		obj.timer=setInterval(fnMove, 20);
		
		v=100/fs;
		function fnMove(){
			x+=v;
			
			for(var i in cur)
			{
				now[i]=(target[i]-cur[i])*x/100+cur[i];
			}
			
			if(fnDo)fnDo.call(obj, now);
			
			if(Math.abs(100-x)<1)
			{
				clearInterval(obj.timer);
				if(fnEnd)fnEnd.call(obj, target);
			}
		}
	},
	
	stop:function (obj){
		clearInterval(obj.timer);
	},
	
	move3 : function(obj, json, fnEnd, fTime, sType){
		var addEnd=fx.addEnd;
		
		fTime||(fTime=1);
		sType||(sType='ease');
		
		setTimeout(function (){
			Utils.setStyle3(obj, 'transition', sprintf('%1s all %2', fTime, sType));
			addEnd(obj, function (){
				Utils.setStyle3(obj, 'transition', 'none');
				if(fnEnd)fnEnd.apply(obj, arguments);
			}, json);
			
			setTimeout(function (){
				if(typeof json=='function')
					json.call(obj);
				else
					Utils.setStyle(obj, json);
			}, 0);
		}, 0);
	
	}

};

//监听css3运动终止
(function (){
	var aListener=[];	//{obj, fn, arg}
	if(!Modernizr.csstransitions)return;	
	if(window.navigator.userAgent.toLowerCase().search('webkit')!=-1)
	{
		document.addEventListener('webkitTransitionEnd', endListrner, false);
	}
	else
	{
		document.addEventListener('transitionend', endListrner, false);
	}
	
	function endListrner(ev)
	{
		var oEvObj=ev.srcElement||ev.target;
		//alert(aListener.length);
		for(var i=0;i<aListener.length;i++)
		{
			if(oEvObj==aListener[i].obj)
			{
				aListener[i].fn.call(aListener[i].obj, aListener[i].arg);
				aListener.remove(aListener[i--]);
			}
		}
	}
	
	fx.addEnd=function (obj, fn, arg)
	{
		if(!obj || !fn)return;
		aListener.push({obj: obj, fn: fn, arg: arg});
	}
})();

$(function(){
	var now=0;
	var ready=true;
	var W=700;
	var H=400;	
	var $img = $("#img");	
	var oDiv = $img.get(0);
	var next =function(){
		return (now+1)%3;
	}
	//爆炸
    $("#btn_explode").on("click",function(){
		
		if(!ready)return;
		ready=false;
			
		var R=4;
		var C=7;		
		var cw=W/2;
		var ch=H/2;
		
		oDiv.innerHTML='';
		oDiv.style.background='url(images/'+(next()+1)+'.jpg) center no-repeat';
		var aData=[];
		
		var wait=R*C;
		
		for(var i=0;i<R;i++){
			for(var j=0,k=0;j<C;j++,k++)
			{
				aData[i]={left: W*j/C, top: H*i/R};
				var oNewDiv=$('<div>');
				oNewDiv.css({
					position: 'absolute',					
					width:Math.ceil(W/C)+'px', 
					height: Math.ceil(H/R)+'px',
					background: 'url(images/'+(now+1)+'.jpg) '+-aData[i].left+'px '+-aData[i].top+'px no-repeat',					
					left: aData[i].left+'px',
					top: aData[i].top+'px'	
				});

								
				oDiv.appendChild(oNewDiv[0]);
				
				var l=((aData[i].left+W/(2*C))-cw)*Utils.rnd(2,3)+cw-W/(2*C);
				var t=((aData[i].top+H/(2*R))-ch)*Utils.rnd(2,3)+ch-H/(2*R);
				
				setTimeout((function (oNewDiv,l,t){
					return function ()
					{
						fx.buffer(
							oNewDiv,
							{	left: oNewDiv.offsetLeft, 
								top: oNewDiv.offsetTop	,
								opacity: 100,
								x:0,
								y:0,
								z:0,
								scale:1,
								a:0
							},
							{	left: l,
								top: t,
								opacity: 0,
								x:Utils.rnd(-180, 180),
								y:Utils.rnd(-180, 180),
								z:Utils.rnd(-180, 180),
								scale:Utils.rnd(1.5, 3),
								a:1
							},
							function (now){								
								this.style.left=now.left+'px';
								this.style.top=now.top+'px';
								this.style.opacity=now.opacity/100;
								Utils.setStyle3(oNewDiv, 'transform', 'perspective(500px) rotateX('+now.x+'deg) rotateY('+now.y+'deg) rotateZ('+now.z+'deg) scale('+now.scale+')');
							}, function (){
								setTimeout(function (){
									oDiv.removeChild(oNewDiv);
								}, 200);
								if(--wait==0)
								{
									ready=true;
									now=next();
								}
							}, 10
						);
					};
				})(oNewDiv[0],l,t), Utils.rnd(0, 200));
			}
		}
	
	
	});
	
	
	
	
	//翻转
	
	$("#btn_tile").on("click",function(){
		if(!ready)return;
		ready=false;
		
		var R=3;
		var C=6;
		
		var wait=R*C;
		
		var dw=Math.ceil(W/C);
		var dh=Math.ceil(H/R);
		
		oDiv.style.background='none';
		oDiv.innerHTML='';
		
		for(var i=0;i<C;i++)
		{
			for(var j=0;j<R;j++)
			{
				var oNewDiv=document.createElement('div');
				var t=Math.ceil(H*j/R);
				var l=Math.ceil(W*i/C);
				
				Utils.setStyle(oNewDiv, {
					position: 'absolute', background: 'url(images/'+(now+1)+'.jpg) '+-l+'px '+-t+'px no-repeat',
					left: l+'px', top: t+'px', width: dw+'px', height: dh+'px'
				});
				
				(function (oNewDiv, l, t){
					oNewDiv.ch=false;
					
					setTimeout(function (){
						fx.linear(oNewDiv, {y:0}, {y:180}, function (now){
							if(now.y>90 && !oNewDiv.ch)
							{
								oNewDiv.ch=true;
								oNewDiv.style.background='url(images/'+(next()+1)+'.jpg) '+-l+'px '+-t+'px no-repeat';
							}
							
							if(now.y>90)
							{
								Utils.setStyle3(oNewDiv, 'transform', 'perspective(500px) rotateY('+now.y+'deg) scale(-1,1)');
							}
							else
							{
								Utils.setStyle3(oNewDiv, 'transform', 'perspective(500px) rotateY('+now.y+'deg)');
							}
						}, function (){
							if((--wait)==0)
							{
								ready=true;
								now=next();
							}
						}, 22);
					}, /*(i+j*R)*120*/(i+j)*200);
				})(oNewDiv, l, t);
				
				oDiv.appendChild(oNewDiv);
			}
		}
	
	
	});
	
	
	
	//扭曲
	$("#btn_bars").on("click",function(){
		if(!ready)return;
		ready=false;
		var C=7;
		
		var wait=C;
		
		var dw=Math.ceil(W/C);
		
		oDiv.style.background='none';
		oDiv.innerHTML='';
		
		for(var i=0;i<C;i++)
		{
			var oNewDiv=document.createElement('div');
			
			Utils.setStyle(oNewDiv, {
				width: dw+'px', height: '100%', position: 'absolute', left: W*i/C+'px', top: 0
			});
			Utils.setStyle3(oNewDiv, 'transformStyle', 'preserve-3d');
			Utils.setStyle3(oNewDiv, 'transform', 'perspective(1000px) rotateX(0deg)');
			//setStyle3(oNewDiv, 'transition', '0.5s all linear');
			
			(function (oNewDiv,i){
				oNewDiv.style.zIndex=C/2-Math.abs(i-C/2);
				
				setTimeout(function (){
					fx.buffer(oNewDiv, {a:0, x:0}, {a:100, x:-90}, function (now){
						Utils.setStyle3(oNewDiv, 'transform', 'perspective(1000px) rotateY('+((3*(i-C/2))*(50-Math.abs(now.a-50))/50)+'deg) rotateX('+now.x+'deg)');
					}, function (){
						if(--wait==0)
						{
							ready=true;
						}
						now=next();
					}, 8);
					//setStyle3(oNewDiv, 'transform', 'perspective(1000px) rotateY('+3*(i-C/2)+'deg) rotateX(-45deg)');
				}, (i+1)*130);
			})(oNewDiv,i);
			
			oNewDiv.innerHTML='<div></div><div></div><div></div><div></div>';
			
			var oNext=oNewDiv.getElementsByTagName('div')[0];
			var oNow=oNewDiv.getElementsByTagName('div')[1];
			var oBack=oNewDiv.getElementsByTagName('div')[2];
			var oBack2=oNewDiv.getElementsByTagName('div')[3];
			
			Utils.setStyle([oNext, oNow, oBack, oBack2], {width: '100%', height: '100%', position: 'absolute', left: 0, top: 0});
			Utils.setStyle(oNext, {
				background: 'url(images/'+(next()+1)+'.jpg) '+-W*i/C+'px 0px no-repeat'
			});
			Utils.setStyle3(oNext, 'transform', 'scale3d(0.836,0.836,0.836) rotateX(90deg) translateZ('+H/2+'px)');
			
			Utils.setStyle(oNow, {
				background: 'url(images/'+(now+1)+'.jpg) '+-W*i/C+'px 0px no-repeat'
			});
			Utils.setStyle3(oNow, 'transform', 'scale3d(0.834,0.834,0.834) rotateX(0deg) translateZ('+H/2+'px)');
			
			Utils.setStyle(oBack, {
				background: '#666'
			});
			Utils.setStyle3(oBack, 'transform', 'scale3d(0.834,0.834,0.834) rotateX(0deg) translateZ(-'+H/2+'px)');
			
			Utils.setStyle(oBack2, {
				background: '#666'
			});
			Utils.setStyle3(oBack2, 'transform', 'scale3d(0.834,0.834,0.834) rotateX(90deg) translateZ(-'+H/2+'px)');
			
			oDiv.appendChild(oNewDiv);
		}
	
	
	});
	
	
	//立方体
	$("#btn_cube").on("click",function(){
		if(!ready)return;
		ready=false;
		
		oDiv.innerHTML='';
		oDiv.style.background='none';
					
		Utils.setStyle3(oDiv, 'transformStyle', 'preserve-3d');
		Utils.setStyle3(oDiv, 'transform', 'perspective(1000px) rotateY(0deg)');
		
		var oNow=document.createElement('div');
		var oNext=document.createElement('div');
		
		Utils.setStyle([oNow, oNext], {
			position: 'absolute',
			width: '100%', 
			height: '100%', 
			left: 0,
			top: 0
		});
		
		Utils.setStyle3(oNow, 'transform', 'scale3d(0.741,0.741,0.741) rotate3d(0,1,0,0deg) translate3d(0,0,'+W/2+'px)');
		Utils.setStyle3(oNext, 'transform', 'scale3d(0.741,0.741,0.741) rotate3d(0,1,0,90deg) translate3d(0,0,'+W/2+'px)');
		
		oDiv.appendChild(oNext);
		oDiv.appendChild(oNow);
		
		oNow.style.background='url(images/'+(now+1)+'.jpg) center no-repeat';
		oNext.style.background='url(images/'+(next()+1)+'.jpg) center no-repeat';
		//return;
		setTimeout(function (){
			//setStyle3(oDiv, 'transition', '1s all ease-in-out');
			fx.flex(oDiv, {y:0}, {y:-90}, function (now){
				Utils.setStyle3(oDiv, 'transform', 'perspective(1000px) rotateY('+now.y+'deg)');
			}, function (){
				Utils.setStyle3(oDiv, 'transition', 'none');
				Utils.setStyle3(oDiv, 'transformStyle', 'flat');
				Utils.setStyle3(oDiv, 'transform', 'none');
				
				oDiv.innerHTML='';
				oDiv.style.background='url(images/'+(next()+1)+'.jpg) center no-repeat';
				
				now=next();
				
				ready=true;
			}, 10, 0.6);
		},0);
	
	});
	
	//翻页
	$("#btn_turn").on("click",function(){
		
		if(!ready)return;
		ready=false;
		
		oDiv.innerHTML='';
		oDiv.style.background='url(images/'+(next()+1)+'.jpg) center no-repeat';
		
		var oDivPage=document.createElement('div');
		
		Utils.setStyle(oDivPage, {	
			position: 'absolute', background: 'url(images/'+(now+1)+'.jpg) right no-repeat', zIndex: 3,
			left: '50%', top: 0, width: '50%', height: '100%', overflow: 'hidden'
		});
		Utils.setStyle3(oDivPage, 'transform', 'perspective(1000px) rotateY(0deg)');
		Utils.setStyle3(oDivPage, 'transformOrigin', 'left');
		
		oDiv.appendChild(oDivPage);
		
		var oDivOld=document.createElement('div');
		
		Utils.setStyle(oDivOld, {
			position: 'absolute', left: 0, top: 0, width: '50%', height: '100%', zIndex:2,
			background: 'url(images/'+(now+1)+'.jpg) left no-repeat'
		});
		
		oDiv.appendChild(oDivOld);		
		var oDivShadow=document.createElement('div');
		
		Utils.setStyle(oDivShadow, {
			position: 'absolute', right: 0, top: 0, width: '50%', height: '100%', zIndex:2,
			background: 'rgba(0,0,0,1)'
		});

		oDiv.appendChild(oDivShadow);
		
		oDivPage.ch=false;
		fx.buffer(oDivPage, {y:0, opacity: 1}, {y:-180, opacity: 0}, function (now){
			if(now.y<-90 && !oDivPage.ch)
			{
				oDivPage.ch=true;
				oDivPage.innerHTML='<img />';
				
				var oImg=oDivPage.getElementsByTagName('img')[0];
				
				oImg.src='images//'+(next()+1)+'.jpg';
				Utils.setStyle3(oImg, 'transform', 'scaleX(-1)');
				
				Utils.setStyle(oImg, {
					position: 'absolute', right: 0, top: 0, width: '200%', height: '100%'
				});
				
				//setStyle3(oDivPage, 'transform', 'perspective(1000px) scale(-1,1) rotateY(-90deg)');
				Utils.setStyle3(oDivPage, 'transformOrigin', 'left');
			}
			
			if(now.y<-90)
			{
				Utils.setStyle3(oDivPage, 'transform', 'perspective(1000px) scale(-1,1) rotateY('+(180-now.y)+'deg)');
			}
			else
			{
				Utils.setStyle3(oDivPage, 'transform', 'perspective(1000px) rotateY('+now.y+'deg)');
			}
			oDivShadow.style.background='rgba(0,0,0,'+now.opacity+')';
		}, function (){
			now=next();
			ready=true;
		}, 14);
	
	});
	
	
	var setStyle3 =function(obj, name, value)
	{
		obj.style['Webkit'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
		obj.style['Moz'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
		obj.style['ms'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
		obj.style['O'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
		obj.style[name]=value;
	};
	
	var  setStyle = function(obj, json){
		
	};

	var rnd = function (n, m){
		return Math.random()*(m-n)+n;
	};



});

var Utils = {
	setStyle :function(obj,json){
		if(obj.length)
			for(var i=0;i<obj.length;i++) Utils.setStyle(obj[i], json);
		else
		{
			if(arguments.length==2)
				for(var i in json) obj.style[i]=json[i];
			else
				obj.style[arguments[1]]=arguments[2];
		}
	},
	setStyle3 : function(obj, name, value){
		obj.style['Webkit'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
		obj.style['Moz'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
		obj.style['ms'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
		obj.style['O'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
		obj.style[name]=value;
	},
	rnd  : function(n,m){
	   return Math.random()*(m-n) + n ;
	}


}

昨天再blueidea 看到的代码 简单改了下 个人喜欢爆炸那个 chrome还带声音了 超屌
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    12种炫酷CSS3图片切换过渡效果

    【CSS3图片切换过渡效果详解】 CSS3是 Cascading Style Sheets 的第三个主要版本，它引入了许多新特性，其中最引人注目的就是丰富的动画和过渡效果。这些效果为网页设计带来了前所未有的动态视觉体验，特别是在图片...

    jquery+css3实现图片3D切换效果

    在本项目中，"jquery+css3实现图片3D切换效果"是一个利用现代Web技术创建交互式用户体验的实例。这个项目结合了JavaScript库jQuery和CSS3的强大功能，为用户提供了一种创新的方式来展示和切换图片，特别是在网页设计...

    炫酷css3图片滑动切换效果

    在本例中，我们关注的是一个名为“炫酷css3图片滑动切换效果”的项目，它是一个完全基于CSS3的图片滑动展示解决方案。 CSS3是CSS（层叠样式表）的第三个版本，引入了诸多新功能和改进，如选择器、边框和背景、文本...

    纯CSS3图片幻灯片切换效果

    首先真的非常感谢世界上有了CSS3这么个东西，它使得很多网页特效不再需要依赖javascript脚本代码，使得浏览器执行起来更加方便快捷。但有一点我们得注意，因为目前绝大多数浏览器还是比较“旧”的版本，还不支持CSS3...

    jquery css3图片切换5种效果

    本篇文章将详细讲解如何利用jQuery和CSS3实现五种不同的图片切换效果，包括爆炸效果、翻转效果、扭曲效果、立方体效果以及翻页效果。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画制作...

    基于HTML+CSS动画的魔方爆炸效果

    CSS3引入了许多新的动画特性，如`transform`（变换）、`transition`（过渡）和`animation`（动画）。在这个魔方爆炸效果中，`transform`属性可能被用来改变魔方块的位置、大小和旋转角度，模拟爆炸和重组的过程。...

    css3图片3D万花筒形状布局代码

    "css3图片3D万花筒形状布局代码"就是一个典型的示例，它展示了如何利用这些特性来实现一个独特的视觉体验。 在3D万花筒形状布局中，图片会呈现出一种动态变化的效果，仿佛在不断地旋转和扭曲，这正是万花筒的精髓...

    基于CSS3和GSAP的超酷盒子爆炸动画特效

    在这个盒子爆炸动画中，我们可以利用CSS3的transform属性，如translate、rotate和scale，以及opacity属性来控制盒子的位置、旋转、大小和透明度，从而模拟爆炸的效果。 关键帧动画的工作原理是定义动画的起始和结束...

    117个图片css3鼠标经过效果

    在本主题“117个图片css3鼠标经过效果”中，我们将探讨CSS3如何实现图片在鼠标悬停时的动态变换，以及这些效果可能带来的用户体验提升。 1. 鼠标悬停伪类选择器：`:hover` CSS3中的`:hover`伪类选择器允许我们在...

    CSS3图片画廊效果

    【CSS3图片画廊效果】是一种利用现代浏览器支持的CSS3特性来实现的网页中图片展示的创新方式。CSS3的引入为网页设计带来了许多新的可能性，包括过渡、动画、多列布局、阴影、渐变以及选择器增强等，使得图片画廊可以...

    7种酷炫css3图片3d翻转效果

    **CSS3 图片3D翻转效果详解** CSS3（层叠样式表第三版）作为Web设计的一个重要技术，引入了丰富的动画效果和3D转换功能，为网页设计师提供了无尽的创意空间。本篇文章将深入探讨利用CSS3实现的7种酷炫的图片3D翻转...

    css图片外边框效果实现

    css图片外边框效果实现 css图片外边框效果实现

    23种css3图片阴影效果

    纯CSS3实现的各种阴影效果，无需图片和js代码即可实现图片、按钮等元素的阴影效果，完全通过样式控制阴影大小、方向和深度，经测试效果相当不错非常酷。

    15种CSS3图片Hover悬停效果代码

    本资源“15种CSS3图片Hover悬停效果代码”是一个集合，它包含了多种独特且美观的图片悬停动画效果，能够极大地提升用户体验和页面的视觉吸引力。 1. **CSS3 Hover效果**： CSS3中的`:hover`伪类选择器是实现悬停...

    使用纯CSS3实现图片轮播效果源码免费下载

    通过以上技术，我们可以构建一个无JavaScript依赖的CSS3图片轮播，虽然可能不如JavaScript实现的功能强大，但对于简单需求来说已经足够，并且具有轻量级和性能优势。在实际应用中，可以根据项目需求和目标用户的...

    jquery+css3实现图片提示效果

    本项目“jquery+css3实现图片提示效果”就是利用这两种技术来创建一个吸引用户注意力并提供信息提示的功能。 jQuery是一个轻量级、高性能的JavaScript库，它的主要目标是简化JavaScript的DOM操作、事件处理、动画...

    CSS3 transform图片飞入动画特效

    "CSS3 transform图片飞入动画特效"是一种利用transform属性实现的动态视觉效果，它能让网页元素（比如图片）产生从屏幕两侧飞入的动画效果，提升用户体验和页面的互动性。 首先，我们需要理解CSS3的transform属性。...

    jquery点击div层图片爆炸碎裂效果

    标题中的“jquery点击div层图片爆炸碎裂效果”是指一种基于jQuery实现的前端交互特效，当用户点击一个div元素（通常包含图片）时，图片会模拟出爆炸并碎裂的效果，给用户带来视觉冲击和互动体验。这个效果常用于游戏...

    网页模板——js+css3实现的图片爆炸效果轮播切换幻灯特效源码.zip

    该网页模板是基于JavaScript（js）和CSS3技术构建的，用于实现一种创新的图片展示方式：图片爆炸效果轮播切换幻灯片特效。这种特效为网页增添动态视觉吸引力，可以提升用户体验，尤其是在产品展示、摄影网站或者创意...

    7种CSS3鼠标hover图片效果.zip

    "7种CSS3鼠标hover图片效果.zip"是一个资源包，它包含了七种不同的CSS3技术实现的鼠标hover时图片变换效果。这些效果可以通过引入名为“magic.css”的样式表来实现，让网站的用户体验更加生动有趣。 首先，让我们...

Magicbox
Global site tag (gtag.js) - Google Analytics