纯CSS制作随着鼠标跑动的裸男

实在太有创意了。。。演示:

源代码如下:

  <style type="text/css">
  #streak {width:485px;	height:83px;	background:#f00;	margin:3em auto;}
  #streak a.pos1, #streak a.pos1:visited {display:block;	width:50px;	height:83px;	float:left;	text-decoration:none;}
  #streak a.pos1 {background:#fff url(http://www.onexin.net/wp-content/uploads/2008/month_0611/z20061121124917.gif) no-repeat;	background-position:0 0;}
  #streak a.pos2, #streak a.pos2:visited {display:block;	width:50px;	height:83px;	float:left;	text-decoration:none;}
  #streak a.pos2 {background:#fff url(http://www.onexin.net/wp-content/uploads/2008/month_0611/z20061121124917.gif) no-repeat;	background-position:-50px 0;}
  #streak a.pos3, #streak a.pos3:visited {display:block;	width:70px;	height:83px;	float:left;	text-decoration:none;}
  #streak a.pos3 {background:#fff url(http://www.onexin.net/wp-content/uploads/2008/month_0611/z20061121124917.gif) no-repeat;	background-position:-100px 0;}
  #streak a.pos4, #streak a.pos4:visited {display:block;	width:70px;	height:83px;	float:left;	text-decoration:none;}
  #streak a.pos4 {background:#fff url(http://www.onexin.net/wp-content/uploads/2008/month_0611/z20061121124917.gif) no-repeat;	background-position:-170px 0;}
  #streak a.pos5, #streak a.pos5:visited {display:block;	width:60px;	height:83px;	float:left;	text-decoration:none;}
  #streak a.pos5 {background:#fff url(http://www.onexin.net/wp-content/uploads/2008/month_0611/z20061121124917.gif) no-repeat;	background-position:-240px 0;}
  #streak a.pos6, #streak a.pos6:visited {display:block;	width:80px;	height:83px;	float:left;	text-decoration:none;}
  #streak a.pos6 {background:#fff url(http://www.onexin.net/wp-content/uploads/2008/month_0611/z20061121124917.gif) no-repeat;	background-position:-300px 0;}
  #streak a.pos7, #streak a.pos7:visited {display:block;	width:60px;	height:83px;	float:left;	text-decoration:none;}
  #streak a.pos7 {background:#fff url(http://www.onexin.net/wp-content/uploads/2008/month_0611/z20061121124917.gif) no-repeat;	background-position:-380px 0;}
  #streak a.pos8, #streak a.pos8:visited {display:block;	width:45px;	height:83px;	float:left;	text-decoration:none;}
  #streak a.pos8 {background:#fff url(http://www.onexin.net/wp-content/uploads/2008/month_0611/z20061121124917.gif) no-repeat;	background-position:-440px 0;}
  #streak a:hover {cursor:url(cursor.cur), url(cursor.csr), crosshair;}
  #streak a.pos1:hover {background-position:0 -83px;}
  #streak a.pos2:hover {background-position:-50px -83px;}
  #streak a.pos3:hover {background-position:-100px -83px;}
  #streak a.pos4:hover {background-position:-170px -83px;}
  #streak a.pos5:hover {background-position:-240px -83px;}
  #streak a.pos6:hover {background-position:-300px -83px;}
  #streak a.pos7:hover {background-position:-380px -83px;}
  #streak a.pos8:hover {background-position:-440px -83px;}
  </style>
  <div id="streak"><a class="pos1" href="#"> </a><a class="pos2" href="#"> </a><a class="pos3" href="#"> </a><a class="pos4" href="#"> </a><a class="pos5" href="#"> </a><a class="pos6" href="#"> </a><a class="pos7" href="#"> </a><a class="pos8" href="#"> </a></div>

图片下载:

相关文章:

1、经典DIV + CSS Layout
https://www.onexin.net/classic-div-css-layout/

2、CSS如何让图片垂直并水平居中等比缩放?
https://www.onexin.net/div-css-how-to-make-image-vertical-and-align-center-geometric-scaling/

3、CSS+DIV基础知识大观
https://www.onexin.net/css-div-basics-of-grand/

4、网站重构:利用CSS改善网站可访问性
https://www.onexin.net/site-reconstruction-using-css-to-improve-website-accessibility/

5、DIVC+SS网页特效欣赏:非常酷的角BANNER
https://www.onexin.net/divc-ss-web-effects-appreciate-very-cool-angle-banner/

转载请注明出处:https://www.onexin.net/naked-man-running-the-pure-css-production-with-the-mouse/

Leave a Reply

Your email address will not be published. Required fields are marked *