CSS3 弹簧
【摘要】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<m...
<!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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
文章来源: blog.csdn.net，作者：福州-司马懿，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/chy555chy/article/details/54783925
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）