<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
body{
background: black;
color: white;
}
.rangeDiv {
height: 150px;
}
input[type=range] {
width: 100px;
height: 30px;
/* 设置旋转中心(默认的旋转中心是元素中部) */
transform-origin: 0 0;
/* 旋转只是改变显示的位置, 元素实际占的位置还是旋转之前的位置 */
transform: rotate(90deg);
margin-left: 60px;
position: absolute;
float: left;
}
label {
position: absolute;
float: left;
margin-top: 110px;
font-size: 14px;
}
#cssload-wrap {
position: absolute;
left: 50%;
top:10%;
/* rotateX 是元素绕着X轴3D旋转 */
transform: rotateX(70deg);
/* scale 是对元素进行缩放
transform: scale(1, 0.25); */
}
.cssload-circle {
position: absolute;
float: left;
border-radius: 50%;
border-width: 3px;
border-style: solid;
/*
animation-name: bounce 动画名称
animation-timing-function: ease-in-out 动画以低速开始和结束
animation-direction: alternate 动画应该轮流反向播放
*/
animation: bounce 1.73s infinite ease-in-out alternate;
}
@keyframes bounce {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(600px);
}
}
</style>
</head>
<body>
<div id="cssload-wrap"></div>
<div class="rangeDiv">
<input id="borderRadiusRange" type="range" min="0" max="50" step="1" value="50">
<label id="borderRadiusLabel">border-radius: 50%</label>
</div>
<div class="rangeDiv">
<input id="translateYRange" type="range" min="0" max="1000" step="100" value="600">
<label id="translateYLabel">translateY: 600px</label>
</div>
<div class="rangeDiv">
<input id="rotateXRange" type="range" min="0" max="90" step="1" value="70">
<label id="rotateXLabel">rotateX: 70px</label>
</div>
<script>
var cssloadWrap = document.getElementById("cssload-wrap");
var count = 30;
for(var i=0; i<count; i++) {
var div = document.createElement("div");
div.setAttribute("class", "cssload-circle");
cssloadWrap.appendChild(div);
}
//圆环从中间向外侧大小增加步长
var sizeStep = 20;
//圆环从中间向外侧延迟动画的时间步长
var delayStep = 115;
var horizontalMarginStep = -sizeStep / 2;
var style = document.getElementsByTagName("style")[0];
for(var i=1; i<=count; i++) {
//nth-child()选择器的第一个子元素的下标是1
var ruleName = ".cssload-circle:nth-child(" + i + ")";
var ruleValue = "margin: 0 " + (horizontalMarginStep * i) + "px;" +
"width: " + (sizeStep * i) + "px;" +
"height: " + (sizeStep * i) + "px;" +
"animation-delay: " + (delayStep * i) + "ms;" +
//z-index为负就会被body标签挡住,从而接收不到点击事件
"z-index: " + (-i) +";" +
"border-color:hsla(" + (360 / count * i) + ",100%,50%,0.7);";
//区别是在chrome"检查"时,appendChild方法在源码上能看到添加的内容,而addRule并不能
style.appendChild(document.createTextNode(ruleName + "{" + ruleValue + "}"));
//document.styleSheets[0].addRule(ruleName, ruleValue)
}
var borderRadiusRange = document.getElementById("borderRadiusRange");
borderRadiusRange.addEventListener("change", function() {
document.getElementById("borderRadiusLabel").innerHTML = "border-radius:" + event.target.value + "px";
var rules = document.styleSheets[0].rules;
for(var i=0; i<rules.length; i++) {
//类型常量的定义见MDN https://developer.mozilla.org/en-US/docs/Web/API/CSSRule
if(rules[i].type === CSSRule.STYLE_RULE && rules[i].selectorText === ".cssload-circle") {
rules[i].style.borderRadius = event.target.value + "%";
return;
}
}
});
var translateYRange = document.getElementById("translateYRange");
translateYRange.addEventListener("change", function() {
document.getElementById("translateYLabel").innerHTML = "translateY: " + event.target.value + "px";
var rules = document.styleSheets[0].rules;
for(var i=0; i<rules.length; i++) {
if(rules[i].type === CSSRule.KEYFRAMES_RULE && rules[i].name === "bounce") {
var cssRules = rules[i].cssRules;
for(var j=0; j<cssRules.length; j++) {
if(cssRules[j].keyText === "100%") {
cssRules[j].style.transform = "translateY(" + event.target.value + "px)";
return;
}
}
}
}
});
var rotateXRange = document.getElementById("rotateXRange");
rotateXRange.addEventListener("change", function() {
document.getElementById("rotateXLabel").innerHTML = "rotateX: " + event.target.value + "deg";
//由于要修改的是某个id的style,所以可以直接修改该元素的style。下面2种方式都不会对源码的相应style产生影响
cssloadWrap.style.transform = "rotateX(" + event.target.value + "deg)";
/*
var rules = document.styleSheets[0].rules;
for(var i=0; i<rules.length; i++) {
if(rules[i].type === CSSRule.STYLE_RULE && rules[i].selectorText === "#cssload-wrap") {
rules[i].style.transform = "rotateX(" + event.target.value + "deg)";
return;
}
}
*/
});
</script>
</body>
</html>
CSS3 弹簧
最新推荐文章于 2022-12-20 18:39:47 发布