一、三角

  1. <style>
  2.         div{
  3.             width: 0;
  4.             height: 0;
  5.             border: 10px solid transparent;
  6.             border-bottom-color: #333;
  7.         }
  8.     </style>
  9. </head>
  10. <body>
  11.     <div>
  13.     </div>
  14. </body>
  15. </html>

二、下拉

 <style>
        *{margin: 0;padding: 0}
        .content{
            margin: 100px;
            width: 200px;
            height: 400px;
            background: #333;
            position: relative;
        }
        .content::before{
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-bottom-color: #333;
            position: absolute;
            z-index: 100;
            top: -40px;
            left: 50%;
            transform: translateX(-50%)
        }
    </style>
</head>
<body>
    <div class="content">

    </div>
</body>
</html>

三、2d

 <style>
   .test{
            width: 100px;
            height: 100px;
            background: red;
            /*   
            transform:rotate: 旋转 */
            transform: rotate(30deg)
        }
    </style>
</head>
<body>
    <div class="test"></div>
</body>
</html>

四、位移

<style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            /* translate 平移
             translate:translateX(100px) */
            /*  translate:translateY(100px) */ 
            transform: translate(200px,200px)
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

五、缩放

<style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            /* 
            scaleX   宽缩放
            scaleY   高缩放
            sacale   宽高都缩放*/
            transform: scale(0.5)
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

六、倾斜

<style>
        /* transfrom:skew(deg) */
        div{
            width: 100px;
            height: 100px;
            background: red;
            transform: skew(30deg)
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

七、过渡

<style>
        /* 过渡一定要配合hover使用 */
        div{
            width: 100px;
            height: 100px;
            background: red;

            transition: all 2s;
        }
        div:hover{
            transform: rotate(30deg);
            width: 200px;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

八、动画

 <style>
        /* 移动设备上使用--flex,grid布局 */
        div{
            width: 100px;
            height: 100px;
            background: red;
            animation: animated 2s infinite;
        }
        @keyframes animated{
            0%{
                background: red;
            }
            25%{
                background: blue;
            }
            50%{
                background: pink;
            }
            75%{
                background: gray;
            }
            100%{
                background: green;
            }
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

九、vue

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
    <!-- 挂载点 -->
    <div id="app">
        <!-- 模板 -->
         <p @click="handleClick">{{msg}}</p>
    </div>
    <script>
        //实例
        new Vue({
            el:"#app",
            data:{
                // data属性装载实例作用在于挂载点的数据
                msg:"hello world"
            },
            // methods 专门用于放置方法的
            methods:{
                handleClick(){
                    thix.msg="change"
                }
            }
        })
    </script>
</body>
</html>

十、jquery

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <p>hello world</p>
    <script>
        // 操作DOM 一个网页就是有很多个DOM节点构成，通俗的理解，一个标签就是一个DOM节点
        /* 操作DOM是很消耗性能的 */
        $("p").click(function(){
            $(this).html("change")
        })
    </script>

</body>
</html>