CSShake把DOM给摇晃起来

最新推荐文章于 2024-05-21 23:21:19 发布

关忆北_

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量226

点赞数

分类专栏：经验记载文章标签：前端 css javascript

本文链接：https://blog.csdn.net/notagoodwriter/article/details/127803498

版权

经验记载专栏收录该内容

28 篇文章 0 订阅

订阅专栏

今天发现了一个好玩的CSS组件库官网CSShake

引入项目

npm i csshake -S

然后引入样式

<link rel="stylesheet" type="text/css" href="csshake.min.css">

如果引入线上的

<link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css">

引入之后就简单了给一个盒子给上高宽加个class名就好了

div{
    width: 400px;
    height: 20px;
    background-color: bisque;
    cursor: pointer;
    margin-right: 20px;
    box-sizing: border-box;
}
.bigbox{
    width: calc(100% - 120px);
    height: calc(100% - 120px);
    display: flex;
    flex-wrap: wrap;
    background-color: transparent;
}

<div class="bigbox">
    <div class="shake"></div>
    <div class="shake-hard"></div>
    <div class="shake-slow"></div>
    <div class="shake-little"></div>
    <div class="shake-little"></div>
    <div class="shake-vertical"></div>
    <div class="shake-rotate"></div>
    <div class="shake-opacity"></div>
    <div class="shake-crazy"></div>
    <div class="shake-chunk"></div>
    <div class="shake-slow shake-constant shake-constant--hover"></div>
    <div class="shake-slow shake-constant"></div>
    <div class="shake-crazy shake-freeze"></div>
</div>

效果自行尝试哈哈哈全部代码在下方

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css">
    
    <style>
        body{
            margin: 0;
            padding: 60px;
            height: 100vh;
            width: 100vw;
            box-sizing: border-box;
        }
        div{
            width: 400px;
            height: 20px;
            background-color: bisque;
            cursor: pointer;
            margin-right: 20px;
            box-sizing: border-box;
        }
        .bigbox{
            width: calc(100% - 120px);
            height: calc(100% - 120px);
            display: flex;
            flex-wrap: wrap;
            background-color: transparent;
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <div class="shake"></div>
        <div class="shake-hard"></div>
        <div class="shake-slow"></div>
        <div class="shake-little"></div>
        <div class="shake-little"></div>
        <div class="shake-vertical"></div>
        <div class="shake-rotate"></div>
        <div class="shake-opacity"></div>
        <div class="shake-crazy"></div>
        <div class="shake-chunk"></div>
        <div class="shake-slow shake-constant shake-constant--hover"></div>
        <div class="shake-slow shake-constant"></div>
        <div class="shake-crazy shake-freeze"></div>
    </div>
</body>

</html>