div抖动，事件与动画

最新推荐文章于 2022-03-31 10:04:13 发布

飞天飞哥

最新推荐文章于 2022-03-31 10:04:13 发布

阅读量956

点赞数 1

分类专栏： css javascript 文章标签： css javascript

本文链接：https://blog.csdn.net/qq_34422651/article/details/78868660

版权

css 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

最近使用的编辑器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"
    }

}

飞天飞哥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div抖动，事件与动画

CSS：.d1{ width: 100px; height: 40px; background-color:cornflowerblue; margin: 200px auto; text-align: center; font:1em/40px "microsoft yahei"; color: beige; border-radiu
复制链接

扫一扫