JS基本动画

最新推荐文章于 2024-10-14 10:36:20 发布

Just8th

最新推荐文章于 2024-10-14 10:36:20 发布

阅读量1.7k

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/Just8th/article/details/125554091

版权

一、需求

基本动画整个div宽度330px，上边距为25px，居中。
每一个按钮要求：
• 宽100px
• 高100px
• 背景颜色：#3498db
• 字体颜色：#ffffff
• 边框为2px的白色实线
• 上边距为10px
• 左边距为5px
悬浮状态时鼠标显示的是手的形状。
鼠标悬浮状态时，各个按钮的样式如下：
* 所有的效果都要有过渡动画
1. 高亮：背景颜色为白色，字体颜色：#3498db。
2. 淡出：字体颜色：#009999，透明度为0.5。
3. 放大：字体颜色：#009999，边框颜色：#009999，透明度为0.5，通过2D转换，宽高都为原来的2倍。
4. 聚焦：各边边框的宽度均为20px。
5. 旋转：元素顺时针旋转90度。
6. 展开：高度为10px。
7. 收缩：通过2D转换，宽高都为原来的一半。
8. 挤压：通过2D转换，宽为原来的1.5倍，高为原来的一半。
9. 变形：通过2D转换，围绕x轴把元素翻转40度，围绕y轴翻转40度。

二、实现代码

<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>
</head>
<script>
    function HighLight(nWord) {
        if (nWord != '') {
            var keyword = document.body.createTextRange();
            while (keyword.findText(nWord)) {
                keyword.pasteHTML("<span style='color:red;'>" + keyword.text + "</span>");
                keyword.moveStart('character', 1);
            }
        }
    }

    function highword(nWord) {
        var array = nWord.split(",");
        for (var i = 0; i < array.length; i++) {
            HighLight(array[i]);
        }
    }
</script>
<style>
    .father {
        width: 330px;
        height: 100%;
        margin-top: 25px;
        display: flex;
        background-color: black;
    }

    button {
        height: 100px;
        width: 100px;
        background-color: #3498db;
        color: #ffffff;
        border: 2px solid white;
        margin-top: 10px;
        margin-left: 5px;
        cursor: pointer;
        transition: all 2s;
    }
</style>

<body>
    <div class="father">
        <button id="s1">1</button>
        <button id="s2">2</button>
        <button id="s3">3</button>
        <button id="s4">4</button>
        <button id="s5">5</button>
        <button id="s6">6</button>
        <button id="s7">7</button>
        <button id="s8">8</button>
        <button id="s9">9</button>
    </div>
    <script>
        document.getElementById("s1").onmouseover=function(){
            document.getElementById("s1").style.background="white"
            document.getElementById("s1").style.color="#3498db"
        }

        document.getElementById("s2").onmouseover=function(){
            document.getElementById("s2").style.opacity="0.5"
            document.getElementById("s2").style.color="#009999"
        }

        document.getElementById("s3").onmouseover=function(){
            document.getElementById("s3").style.transform="scale(2, 2)"
            document.getElementById("s3").style.border="2px solid #009999"
            document.getElementById("s3").style.color="#009999"
            document.getElementById("s3").style.opacity="0.5"
        }
        
        document.getElementById("s4").onmouseover=function(){
            document.getElementById("s4").style.border="20px solid white"
        }

        document.getElementById("s5").onmouseover=function(){
            document.getElementById("s5").style.transform="rotate(90deg)"
        }

        document.getElementById("s6").onmouseover=function(){
            document.getElementById("s6").style.height="10px"
        }

        document.getElementById("s7").onmouseover=function(){
            document.getElementById("s7").style.transform="scale(0.5, 0.5)"
        }

        document.getElementById("s8").onmouseover=function(){
            document.getElementById("s8").style.transform="scale(1.5, 0.5)"
        }

        document.getElementById("s9").onmouseover=function(){
            document.getElementById("s9").style.transform="rotatex(40deg)"
            document.getElementById("s9").style.transform="rotatey(40deg)"
        }
    </script>
</body>

</html>