CSS3-JS-小练习

最新推荐文章于 2022-03-05 22:36:16 发布

Marvel__Dead

最新推荐文章于 2022-03-05 22:36:16 发布

阅读量799

点赞数

分类专栏： CSS3 文章标签： css3 js

本文链接：https://blog.csdn.net/Marvel__Dead/article/details/54638766

版权

CSS3 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.感觉可以做一个很不错的进入界面。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    .box{width:200px;height:200px;border:1px solid #2FD000;margin:300px auto;}
</style>
<script>
    window.onload=function(){
        var b1=document.getElementsByClassName("box")[0];
        var angle=0;
        setInterval(function(){
            angle++;
            setCss3(b1,{"transform":"rotate("+angle+"deg)","transform-origin":"0 0"});
        },1);
    }

    function setCss3(obj,attrObj){
        for(var i in attrObj){
            var newi=i;
            if(newi.indexOf("-")>0){
                var num=newi.indexOf("-");
                newi=newi.replace(newi.substr(num,2),newi.substr(num+1,1).toUpperCase());
            }
            obj.style[newi]=attrObj[i];
            newi=newi.replace(newi.charAt(0),newi.charAt(0).toUpperCase());
            obj.style["webkit"+newi]=attrObj[i];
            obj.style["moz"+newi]=attrObj[i];
            obj.style["o"+newi]=attrObj[i];
            obj.style["ms"+newi]=attrObj[i];
        }
    }
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>

Marvel__Dead

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3-JS-小练习

1.感觉可以做一个很不错的进入界面。<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style> .box{width:200px;height:200px;border:1px solid #2FD000;margin:300px auto;}</style><script>
复制链接

扫一扫

专栏目录