CSS3 弹簧

来源：互联网发布：标致中控软件下载编辑：程序博客网时间：2024/06/11 07:34
<!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 0