新7款HTML5/CSS3特效之浏览器的小泥块

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

十度

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html> 
<html lang="en">
	
	<head> 
		<meta charset=utf-8> 
		<title>新7款HTML5/CSS3特效之浏览器的小泥块
		</title> 
		<meta name="description" content="Sticky Thing" /> 
		<meta name="keywords" content="experiment,html5,javascript,canvas,css3,interactive,physics,demo,mobile,web-based,iphone,android" />
		<meta name="viewport" content="height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	</head> 
	<body>
		<div id="out">&nbsp;
		</div>
		<canvas id="bigCanvas">Throw it around and see if it sticks.
			<br>
			<br>You need a newer browser.
			<br>In the meantime please try the 
			<a href="http://spielzeugz.de/lab/sticky-thing/flash">Flash version
			</a>.
		</canvas>
		<div id="iconBar">
			<div class="ico-btn" id="infoBTN">
				<div class="ico-hit">
				</div>
				<div class="ico-ico-info">
					<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAMAAAC7m5rvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////////VXz1bAAAAAJ0Uk5T/wDltzBKAAAAT0lEQVR42uzUuw0AMAhDwZf9l44yQEBGKQIy/RWYD6tUmJn1YZySGQTuF1bsbeq4IczxwqixdGwjmBoJfZi6kwxm2RFky4VfkJnZM7YFGACj+QrIDs75qgAAAABJRU5ErkJggg==" width="27" height="27" />
				</div>
			</div>
			<div class="ico-btn" id="optionsBTN">
				<div class="ico-hit">
				</div>
				<div class="ico-ico-gears">
					<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAMAAAC7m5rvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAxQTFRF/v7+/f39////////uwDIMAAAAAR0Uk5T////AEAqqfQAAABvSURBVHja7NVLCsAgDATQSbz/nUsoUmxjSSyKhZmNijyQ+EMZCsjIyO5RS9OJM73aFKvZj2knmzMgx2zWiARYaVdlBE410au+M5jA1GMa3+7nKMLOuqeYYGy7ZdHh+sU1/fwE5R88fh1kZO85BBgAUbsgdHGHgrIAAAAASUVORK5CYII=" width="27" height="27" />
				</div>
			</div>
		</div>
		<div id="stickyContainer">
		</div>
		<div id="navContainer">
			<div id="nav">
				<a href="javascript:void(0)" id="options">设置
				</a>
				<span class="pipe" id="navPipe">|
				</span> 
			</div>
		</div>
	</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

.sliderBoard{
  position :absolute;
  left :0px;
  top :0px;
  width :242px;
  color :#808080;
  font-size :12px;
  -webkit-user-select:none;
  -webkit-font-smoothing:antialiased}
.sliderBoardTitleBar{
  width :220px;
  height :18px;
  top :0px;
  left :0px;
  padding-top :10px;
  padding-left:22px;
  font-weight :bold;
  background-color:#f00;
  visibility:hidden}
.sliderBoardBG{
  position:absolute;
  width: 100%;
  height:106%;
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
  border-radius:15px;
  background-color:#F2F2F2;
  opacity:0.92;
  background-image:-moz-linear-gradient(100% 100% 90deg,#EBEBEB,#F7F7F7);
  background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#F7F7F7),to(#EBEBEB))}
.sliderItem{
  margin-left :20px;
  width :10px;
  height :44px;
  display :block;
  float :left;
  cursor :default;
  clear :both}
.sliderContainer{
  position :absolute;
  margin-top :16px}
.sliderLabel{
  position :absolute}
.sliderOutput{
  position:absolute;
  margin:0;
  padding:0;
  left: 186px;
  top: 1px;
  width: 28px}
.sliderBoardCloseButton{
  position :absolute;
  top :9px;
  color :#666;
  font-size :12px;
  cursor :pointer;
  padding :0;
  margin :0;
  text-align :center;
  opacity :1;
  -webkit-user-select:none}
.sliderBoardCloseButtonHit{
  position :absolute;
  width :34px;
  height :34px;
  left :-3px;
  top :-8px;
  background-color:#00F;
  opacity:0.0}
.sliderBoardCloseButtonBG{
  position :absolute;
  width :27px;
  height :27px;
  top :-0px;
  left :-1px;
  -webkit-border-radius:16px;
  background-color:#CDCDCD;
  margin:0;
  padding:0;
  display:none}
.sliderBoardCloseButtonIcon{
  position :absolute;
  font-weight :normal;
  text-shadow :0px 1px 1px #FFF;
  margin      :0;
  padding:0px 0px;
  background-color:rgba(0,0,0,0);
  -webkit-border-radius:20px}
.sliderBoardCloseButton:hover{
  opacity:0.65;
  -webkit-transition:opacity,0.2s ease-out;
  */}
.sliderThumb{
  position :absolute;
  width :16px;
  height :16px;
  -moz-border-radius :8px;
  -webkit-border-radius:8px;
  border-radius :8px;
  background-color :#484848;
  background-image :-moz-linear-gradient(100% 100% 90deg,#2D2D2D,#828282);
  background-image :-webkit-gradient(linear,0% 0%,0% 100%,from(#828282),to(#2D2D2D));
  opacity :1;
  -webkit-transition-property:opacity;
  -webkit-transition-duration:0.25s}
.sliderThumbActive{
  position :absolute;
  width :16px;
  height :16px;
  -moz-border-radius :8px;
  -webkit-border-radius:8px;
  border-radius :8px;
  background-color :#393939;
  background-image :-moz-linear-gradient(100% 100% 90deg,#000,#A6A6A6);
  background-image :-webkit-gradient(linear,0% 0%,0% 100%,from(#A6A6A6),to(#000));
  opacity :1}
.sliderThumbOver{
  position :absolute;
  width :16px;
  height :16px;
  -moz-border-radius :8px;
  -webkit-border-radius:8px;
  border-radius :8px;
  background-color :#484848;
  background-image :-moz-linear-gradient(100% 100% 90deg,#2D2D2D,#828282);
  background-image :-webkit-gradient(linear,0% 0%,0% 100%,from(#828282),to(#2D2D2D));
  opacity :0.85;
  -webkit-transition-property:opacity;
  -webkit-transition-duration:0.2s}
.sliderThumbHit{
  position :absolute;
  background-color :#0F0;
  width :25px;
  height :25px;
  left :-4px;
  top :-4px;
  opacity :0.0}
.sliderTrack{
  position :absolute;
  top :0px;
  width :175px;
  height :16px;
  -moz-border-radius :8px;
  -webkit-border-radius:8px;
  border-radius :8px;
  opacity :0.9;
  background-color :#CECECE;
  background-image :-moz-linear-gradient(100% 100% 90deg,#DCDCDC,#BBB);
  background-image :-webkit-gradient(linear,0% 0%,0% 100%,from(#BABABA),to(#DCDCDC));
  -webkit-transition-property:opacity;
  -webkit-transition-duration:0.25s}
.sliderTrackActive{
  position :absolute;
  top :0px;
  width :175px;
  height :16px;
  -moz-border-radius :8px;
  -webkit-border-radius:8px;
  border-radius :8px;
  opacity :0.7;
  background-color :#CCC;
  background-image :-moz-linear-gradient(100% 100% 90deg,#DCDCDC,#BABABA);
  background-image :-webkit-gradient(linear,0% 0%,0% 100%,from(#BABABA),to(#DCDCDC));
  -webkit-transition-property:opacity;
  -webkit-transition-duration:0.175s;
  -moz-transition-property:opacity;
  -moz-transition-duration:0.175s;
  transition-property:opacity;
  transition-duration:0.175s}
@media screen and (max-device-width:1024px){
  .sliderBoard{
    font-size:16px;
    color :#545454}
  .sliderBoardBG{
    -webkit-border-radius:12px;
    background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#F6F6F6),to(#EBEBEB))}
  .sliderItem{
    height:58px}
  .sliderContainer{
    margin-top:22px}
  .sliderBoardCloseButton{
    font-size :23px;
    top :5px}
  .sliderBoardCloseButtonHit{
    width :54px;
    height :54px;
    left :-18px;
    top :-14px}
  .sliderBoardCloseButton:hover{
    opacity:1}
  .sliderTrack{
    height :24px;
    -webkit-border-radius:12px;
    opacity :0.6;
    background-image :-webkit-gradient(linear,0% 0%,0% 100%,from(#9d9d9d),to(#CFCFCF))}
  .sliderTrackActive{
    height :24px;
    -webkit-border-radius:12px;
    opacity :1;
    background-image :-webkit-gradient(linear,0% 0%,0% 100%,from(#9d9d9d),to(#CDCDCD))}
  .sliderThumb{
    width :24px;
    height :24px;
    -webkit-border-radius:12px;
    background-image :-webkit-gradient(linear,0% 0%,0% 100%,from(#696969),to(#202020))}
  .sliderThumbActive{
    width :24px;
    height :24px;
    -webkit-border-radius:12px;
    background-image :-webkit-gradient(linear,0% 0%,0% 100%,from(#777),to(#000))}
  .sliderThumbHit{
    width :74px;
    height :60px;
    top :-17px;
    left :-23px}
}
@media screen and (max-height:320px){
  .sliderBoard{
    font-size:16px}
  .sliderItem{
    height:50px}
  .sliderContainer{
    margin-top:21px}
}
#iconBar{
  display :none;
  opacity :0;
  position:absolute;
  width :200px;
  height :44px;
  left :0px;
  top :0px}
.ico-btn{
  margin:18px 22px 0px -4px;
  position:relative;
  width:27px;
  height:27px;
  float:right;
  -webkit-tap-highlight-color:rgba(255,255,255,0);
  background-color:#444;
  -webkit-border-radius:25px}
.ico-hit{
  position:absolute;
  left:-16px;
  top:-16px;
  width:56px;
  height:56px;
  background-color:#0F0;
  opacity:0.0}
.ico-ico-info{
  position :absolute;
  overflow :hidden;
  width :27px;
  height :27px}
.ico-ico-gears{
  position :absolute;
  overflow :hidden;
  width :27px;
  height :27px}
#aboutOverlay{
  display:none;
  opacity:0;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:rgba(255,255,255,0.75);
  text-align:center;
  z-index:100}
#aboutOverlayInner{
  -webkit-font-smoothing:antialiased;
  top:50%;
  position:absolute;
  width:100%;
  font-size:28px;
  font-weight:bold;
  letter-spacing:-2px}
#aboutLabLink{
  padding:2px 3px;
  -webkit-tap-highlight-color:rgba(255,0,153,0)}
#aboutOverlayInner a{
  color:#262626;
  background-color:rgba(255,0,153,0)}
#aboutOverlayInner a:focus{
  color:#262626;
  background-color:rgba(255,0,153,1)}
#aboutOverlayInner a:hover{
  color:#262626;
  background-color:rgba(255,0,153,1)}
#aboutOverlayInner a:active{
  color:#262626;
  background-color:rgba(255,0,153,1)}
body{
  margin:  0;
  padding: 0;
  overflow:hidden;
  background-color:#FFF;
  font-family: Arial,Helvetiva,sans-serif;
  -webkit-tap-highlight-color:#F09}
a{
  text-decoration:none}
#navContainer a{
  color:#444;
  -webkit-transition-property:color;
  -webkit-transition-duration:0.25s}
#navContainer a:hover{
  color:#F09;
  -webkit-transition-property:color;
  -webkit-transition-duration:0.15s}
#navContainer{
  position:absolute;
  width: 100%;
  left: 0px;
  top: 0px;
  display: none}
#nav{
  font-size: 0.75em;
  color: #777;
  text-align: right;
  margin-top: 10px;
  margin-right:80px}
#bigCanvas{
  position:absolute;
  left: 0px;
  top: 0px}
#stickyContainer{
  position:absolute;
  left: 0px;
  top: 0px}
.pipe{
  font-size:1.2em;
  color: #CCC;
  margin: 0px 6px}
.slashWithSpace{
  padding:0px 1px}
#out{
  position: absolute;
  margin: 0px 0px;
  font-family: monospace;
  font-size: 11px;
  color: #900;
  border: 1px solid #FFF;
  width: 100%;
  height: 100%;
  display: none}
@media screen and (max-device-width:1024px){
  body{
    font-family:Helvetica,Arial,sans}
  #out{
    font-size: 9px}
}

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

新7款HTML5/CSS3特效之浏览器的小泥块

分类

HTML5代码

描述

这款HTML5动画非常可爱，动画的主角是一款粘人的小泥块，用鼠标拖动泥块，泥块即可粘住浏览器，让后一点点掉落下来。而完成这样的HTML5动画，我们只需一张图片和一系列CSS3代码即可。虽然这款动画实用性并不强，但是其中的HTML5原理值得大家学习。