分类分类
2015-10-20 16:17作者：yezheng
这篇文章主要为大家介绍了插棒小游戏效果代码,通过简单的css样式控制实现插棒小游戏效果,非常简单实用,需要的朋友可以参考下
1.[HTML]代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>插棒小游戏</title>
<link href="index.css" rel="stylesheet" />
</head>
<body>
<input type="date" />
<main data-count="4">
<ul id="circle">
<li data-idx="1"></li>
<li style="transform: rotate(90deg)" data-idx="2"></li>
<li style="transform: rotate(180deg)" data-idx="3"></li>
<li style="transform: rotate(270deg)" data-idx="4"></li>
</ul>
<ul id="pad">
<li data-idx="5" style="z-index: 5"></li>
</ul>
</main>
<script>
"use strict";
function getRotateRadians(elem) {
var tr = getComputedStyle(elem).transform;
var values = tr.split('(')[1],
values = values.split(')')[0],
values = values.split(',');
var a = Number(values[0]); // 0.866025
var b = Number(values[1]); // 0.5
var c = Number(values[2]); // -0.5
var d = Number(values[3]); // 0.866025
var radians = Math.atan2(b, a);
if (radians < 0) {
radians += 2 * Math.PI;
}
return radians;
}
window.addEventListener("load", function() {
var main = document.getElementsByTagName("main")[0];
var pad = document.getElementById("pad");
var circle = document.getElementById("circle");
window.addEventListener("click", function() {
var li = pad.children[0];
li.addEventListener("transitionend", function() {
pad.removeChild(this);
circle.appendChild(this);
this.classList.remove("moving");
li.style.transform = "rotate(" + (Math.PI - getRotateRadians(circle)) + "rad)";
var newLi = document.createElement("li");
newLi.dataset.idx = newLi.style.zIndex = circle.children.length + 1
main.dataset.count = circle.children.length;
pad.appendChild(newLi);
});
li.classList.add("moving");
});
});
</script>
</body>
</html>
2.[CSS]代码如下：
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
:root {
font-size: 30px;
font-family: monospace;
text-align: center;
}
main {
width: 12em;
height: 12em;
margin: auto;
position: relative;
&::before {
content: attr(data-count);
font-size: 1.5em;
line-height: 8em;
}
}
@keyframes spinner {
to {
transform: rotate(1turn);
}
}
li {
position: absolute;
left: 0;
right: 0;
width: .2em;
margin: 0 auto;
top: -100%;
bottom: 100%;
background: linear-gradient(to right, #ccc, black, #ccc);
transform-origin: center 150%;
&::before {
content: '';
position: absolute;
display: block;
top: -.8em;
left: -.3em;
right: -.5em;
width: .8em;
height: .8em;
border-radius: 50%;
background: radial-gradient(circle at center, #ccc, black);
}
&::after {
content: attr(data-idx);
position: absolute;
display: block;
top: -2em;
left: -.5em;
right: -.5em;
font-size: .4em;
font-weight: bold;
color: white;
line-height: 2em;
}
}
#circle {
position: absolute;
width: 25%;
height: 25%;
border-radius: 50%;
background: radial-gradient(circle at center, transparent, lightseagreen);
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
animation: spinner 4s infinite linear;
}
#pad {
width: .2em;
height: 25%;
margin: 0 auto;
left: 0;
right: 0;
position: absolute;
li {
transform: rotate(180deg);
&.moving {
transition: transform .1s;
transform: rotate(180deg) translateY(250%);
}
}
}
相关