div抖动，事件与动画

来源：互联网发布：友情链接交易平台源码编辑：程序博客网时间：2024/06/06 01:59

最近使用的编辑器webStorm或Hbuilder
效果：点击div 另外一div从上落下并抖动。
html:

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>事件练习</title>        <link rel="stylesheet" href="css/index.css" />    </head>    <body>        <div class="d1">点我一下</div>        <div class="d"></div>    </body>    <script src="js/index.js"></script></html>

CSS：

.d1{    width: 100px;    height: 40px;    background-color:cornflowerblue;    margin: 200px auto;    text-align: center;    font:1em/40px "microsoft yahei";    color: beige;    border-radius: 20%;}@-webkit-keyframes DD{    from{        top:-40px;            left: 300px;    }    to{         transition-timing-function: ease-in-out;        top: 500px;        left: 300px;    }}/*@-webkit-keyframes AA {      from{        -webkit-transform: rotate(10deg);      }     to {        -webkit-transform: rotate(-10deg);      }}*/.d2{    animation:DD 1s  both, AA 5s  forwards;    width: 200px;    height: 50px;    background-color: orange;    text-align: center;    font: 2em/50px "microsoft yahei";    top: 500px;     left: 300px;}.d{      border-radius: 20%;    position: absolute;}  @-webkit-keyframes AA{    0%{-webkit-transform:scale(1);}    10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}    30%,50%,70%,90%{-webkit-transform:scale(1.2) rotate(3deg);}    40%,60%,80%{-webkit-transform:scale(1.2) rotate(-3deg);}    100%{-webkit-transform:scale(1) rotate(0);}}/*.d1:hover +.d2{  animation: AA 1s .2s ease both;}*/

JS:

var d1 = document.querySelector(".d1");var d2 = document.querySelector(".d");d1.onclick =function(){    var d1Color = d1.style.backgroundColor;    if(d1Color != "darkgrey"){        d1.style.backgroundColor="darkgrey";    }else{        d1.style.backgroundColor="cornflowerblue";    }    if(d2.className == "d"){        d2.className +=" d2";    }else{        d2.className = "d"    }}

阅读全文

0 0