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>