📝 代码查看
使用runcode.html页面

1
查看次数
2025-12-01
创建时间
2025-12-01
最后更新
<div class="showbox slideright">box 1</div>
<div class="showbox rotate" style="border-color: red;">box 2</div>
<div class="showbox slideleft">box 3</div>
<div class="showbox scale">box 4</div>
.showbox {
	float: left;
	margin: 4em 1em;
	width: 100px;
	height: 60px;
	border: 2px solid green;
	background-color: #fff;
	line-height: 60px;
	text-align: center
}
.showbox {
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	-o-transition: 1s ease-in-out;
	transition: 1s ease-in-out
}

.showbox.slideright:hover {
	cursor: pointer;
	-webkit-transform: translate(3em,0);
	-moz-transform: translate(3em,0);
	-o-transform: translate(3em,0);
	-ms-transform: translate(3em,0);
	transform: translate(3em,0)
}

.showbox.rotate:hover {
	cursor: pointer;
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	transform: rotate(30deg)
}

.showbox.slideleft:hover {
	cursor: pointer;
	-webkit-transform: translate(-3em,1em);
	-moz-transform: translate(-3em,1em);
	-o-transform: translate(-3em,1em);
	-ms-transform: translate(-3em,1em);
	transform: translate(-3em,1em)
}

.showbox.scale:hover {
	cursor: pointer;
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-o-transform: scale(2);
	-ms-transform: scale(2);
	transform: scale(2)
}
.showoff,.showoff2 {
	margin: 2em 6em;
	background: green;
	color: #fff
}
暂无JavaScript代码

👁️ 实时预览