css3学习一

时间 2019-11-21

标签 css3 css 学习栏目 CSS 繁體版

原文原文链接

由于对动效比较感兴趣，以前也试过ae和ps的时间轴，但仍是没太多兴趣一个个调整关键帧，了解一下后发现css3的动效很强悍，基本够用了，有些不足js也能够补充，我是尽可能偏向css3，如今也不考虑兼容性的问题（==期末了）。
demo

刚才弄得一个小效果，以前不知道在哪看过这个效果一直以为很吊，试着有transform作了一下作出来了，主体仍是css，js进行了一些属性操做html

1 *{margin:0;padding:0}
2 .div1{width:200px;height:200px;background:grey;overflow:hidden;position:relative;float:left}
3 .div2{width:200px;height:200px;background:#000;position:absolute;left:-200px;transition:.5s;color:white;text-align:center}

css代码如上，原本能够纯css实现的，由于想多用用js，因此（无视新手==）。。。css3

由于css不能够设置旋转锚点，因此我在实现的时候是平移加rotateZ（在js里添加属性）；js以下css3动画

 1 window.onload=function(){
 2     var oDiv1=document.getElementsByClassName('div1');
 3     var oDiv2=document.getElementsByClassName('div2');
 4     for(var i=0;i<oDiv1.length;i++){
 5     oDiv1[i].index=i;
 6     oDiv1[i].onmouseover=function(){
 7         oDiv2[this.index].style.left='0px';
 8         oDiv2[this.index].style.transform='rotateZ(360deg)'
 9     }
10     oDiv1[i].onmouseout=function(){
11         oDiv2[this.index].style.left='-800px';
12         oDiv2[this.index].style.transform='rotateZ(-360deg)'
13     }
14     }
15 }

第一次写博客不知道写啥了，也多是太简单了吧。。==顺便再把html贴上吧动画

<!DOCTYPE html>
<html>
    <head>
        <meta  charset="UTF-8">
        <title>RunJS</title>
    </head>
    <body>
        <div class="div1">
            <div class="div2">
                <p>dede</p>
            </div>
        </div>
        <div class="div1">
            <div class="div2">
                <p>dede</p>
            </div>
        </div>
        <div class="div1">
            <div class="div2">
                <p>dede</p>
            </div>
        </div>
    </body>
</html>

就酱this

1. css3学习笔记（一）
2. html5+css3学习笔记(一)
3. CSS3学习笔记一
4. CSS3学习总结一
5. HTML5-CSS3总结学习(一)
6. HTML5+CSS3学习
7. HTML5 CSS3学习
8. css3学习 -- 2
9. css3学习 -- 1
10. CSS3学习
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• Kotlin学习（一）基本语法
• Tomcat学习笔记（史上最全tomcat学习笔记）