7的javascript效果的替代品使用WebKit的浏览器CSS 3演示

最新推荐文章于 2021-03-06 16:46:43 发布

莫兰迪不会没有瓶子

最新推荐文章于 2021-03-06 16:46:43 发布

阅读量788

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/zhaoyazhi2129/article/details/8216445

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">

<head>
<title>Demo - 7 javascript-effect alternatives using CSS 3 for webkit browsers - Web developer juice</title>

<style>
	html{text-align:center;}
	body{width:950px;margin:0 auto;font-family:trebuchet ms;text-align:left}
	.block{border:5px solid #ccc;padding:10px;-webkit-border-radius:5px;}
	.accordion a{display:block;padding:5px 10px;background-color:#333;color:#eee;text-decoration:none}
	.accordion a:hover{background-color:#999}
	.accordion div{background-color:#ccc;color:#222;}
	.accordion div p{padding:20px}

	#bounce{width:200px;}
	#pulsate{width:200px;height:100px;}
	.clear{clear:both;}

	#fade{opacity: 1;-webkit-transition: opacity 1s linear;}
	#fade:hover{opacity: 0;}

	#pulsate:hover {-webkit-animation-name: pulsate;-webkit-animation-duration: 20s;-webkit-animation-timing-function: ease-in-out;}
	@-webkit-keyframes pulsate {
	0% { width:140px; }
	5% { width:190px; left:-25px; }
	10% { width:140px; left:0px; }
	15% { width:190px; left:-25px; }
	20% { width:140px; left:0px; }	
	40% { width:140px; }
	45% { width:190px; left:-25px; }
	50% { width:140px; left:0px;}
	55% { width:190px; left:-25px;}
	60% { width:140px; left:0px;}
	80% { width:140px; }
	100% { width:140px;  }
	}

	#nudge{-webkit-transition-property:color,background-color,padding-left;-webkit-transition-duration:500ms,500ms,500ms}
	#nudge:hover{background-color:#efefef;color:#333;padding-left:50px}

	#expand{background-color:#eee;-webkit-transition: all 500ms linear; border:10px solid black}
	#expand:hover{border:30px solid #800}

	#bounce:hover {-webkit-animation-name:bounce;-webkit-animation-duration:1s;-webkit-animation-iteration-count:2;-webkit-animation-direction:alternate}
	@-webkit-keyframes bounce{from{margin-left:0px;}
		to{margin-left:250px;}
		}


	#spin{-webkit-transition: -webkit-transform 3s ease-in;}
	#spin:hover{-webkit-transform:rotate(360deg)}

	#accordion div{height:0;overflow:hidden;-webkit-transition:height 600ms ease}
	#accordion div:target{height:110px}


</style>

</head>

<body>
		
<div style="clear:both;margin:10px 0;"></div>
<h1>Demo for 7 javascript-effect alternatives using CSS 3 for webkit browsers</h1>

<div style="padding:10px 0;margin:0 auto;width:728px;text-align:center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7543689215337279";
/* 728x90, wdj */
google_ad_slot = "1724107062";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

	<h3>Effect 1: Fade Block</h3>
	<div id="fade" class="block">Place mouse on  me i will fade!</div>

	<br /><br />

	<h3>Effect 2: Pulsate Block</h3>
	<div id="pulsate" class="block">Place mouse on  me i will pulsate</div>
	
	<br /><br />

	<h3>Effect 3: Nudge</h3>
	<div id="nudge" class="block">Place mouse on  me my text will shift</div>

	<br /><br />

	<h3>Effect 4: Expand Block</h3>
	<div id="expand" class="block">Place mouse on  me my border will expand</div>

	<br /><br />

	<h3>Effect 5: Bounce Block</h3>
	<div id="bounce" class="block">Place mouse on  me i will bounce!</div>

	<br /><br />

	<h3>Effect 6: Spin Block</h3>
	<div id="spin" class="block">Place mouse on  me i will spin</div>

	<br /><br />
	
	<h3>Effect 7: Accordion</h3>
	<div id="accordion" class="accordion">
		<a href="#first">This is first tab</a><div id="first"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
		<a href="#second">This is second tab</a><div id="second"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
		<a href="#third">This is third tab</a><div id="third"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
	</div>

<div style="padding:10px 0;margin:0 auto;width:728px;text-align:center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7543689215337279";
/* 728x90, wdj */
google_ad_slot = "1724107062";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<strong><a href="http://www.webdeveloperjuice.com/2010/01/18/7-javascript-effect-alternatives-using-css3-for-webkit-browsers/">View original post</a>    
<a href="http://twitter.com/wdjuice">Follow us on twitter</a>	    
<a href="http://feeds.feedburner.com/WebDeveloperJuice">Subscribe to RSS</a></strong>
<br /><br /><br /><br /><br /><br />

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24180244-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>


</body>
</html>

莫兰迪不会没有瓶子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7的javascript效果的替代品使用WebKit的浏览器CSS 3演示

Demo - 7 javascript-effect alternatives using CSS 3 for webkit browsers - Web developer juice html{text-align:center;} body{width:950px;margin:0 auto;font-family:trebuchet ms;text-align:left} .bl
复制链接

扫一扫