一、效果
此效果主要是CSS的功劳,js代码仅做了随机让某个item进行旋转。
二、样式代码
<style>
/* 定义外层框大小和样式 */
.content {
width: 600px;
height: 280px;
border: 1px solid gray;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
align-content: flex-start;
-webkit-align-content: flex-start;
}
/* 每个 item 大小为40 像素 */
.content .item {
position: relative;
width: 40px;
height: 40px;
overflow: hidden;
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
-ms-transition-duration: 300ms;
-o-transition-duration: 300ms;
transition-duration: 300ms;
}
/* 通过 before 和 after 显示白色圆圈, 再通过 left 和 top 让其显示一部分*/
/* 多个 item 结合起来,就感觉像是连串的了。 */
.content .item::before {
content: ' ';
position: absolute;
width: 34px;
height: 34px;
left: -20px;
top: -20px;
border: 4px solid #FFF;
border-radius: 9999px;
}
.content .item::after {
content: ' ';
position: absolute;
width: 34px;
height: 34px;
right: -20px;
bottom: -20px;
border: 4px solid #FFF;
border-radius: 9999px;
}
/* 定义旋转度数,每当某个item进行旋转时,应用此class即进行旋转。 */
.rotate90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
三、Html代码
<div class="content">
<div class="item"></div>
<!-- ... 这中间一共103个 ... -->
<div class="item"></div>
</div>
四、JavaScript代码
$(function () {
/**
* 随机旋转一个item
*/
function rotateRandom () {
// 找到所有的item
var items = $(".content .item");
// 随机获取一个item位置
var index = parseInt("" + (Math.random() * items.length));
var $item = items.eq(index);
// 已经被旋转过则恢复,没有被旋转过则旋转
if ($item.hasClass("rotate90")) {
$item.removeClass("rotate90");
} else {
$item.addClass("rotate90");
}
}
// 走你!
setInterval(function () {
rotateRandom();
}, 500);
});
Full text complete, Reproduction please indicate the source. Help you? Not as good as one:
Comment(Comments need to be logged in. You are not logged in.)
You need to log in before you can comment.