html-动画效果

最新推荐文章于 2024-05-11 21:03:27 发布

绝迹刻本

最新推荐文章于 2024-05-11 21:03:27 发布

阅读量1.5k

点赞数 1

分类专栏：学习记录文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_73890636/article/details/133169183

版权

学习记录专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一旋转方块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
        border-radius: 50px;
        animation: run 5s linear infinite;
    }
    @keyframes run {
        0%{
            transform: translateX(0) rotate(0);
        }
        50%{
            transform: translateX(200px) rotate(360deg);
        }
        100%{
            transform: translateX(200px) rotate(0);
        }
        
    }
</style>
<body>
    <div class="box"></div>
</body>
</html>

效果图：

可以通过修改translateX来改变旋转的方向 translateY则绕着Y轴旋转

linear线性

infinite无限循环

不同的百分号比例对旋转速度所占比有影响

———————————————————————————————————————————

二旋转缩放

//旋转缩放
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
        border-radius: 50px;
        animation: run 5s linear infinite;
    }
    @keyframes run {
        0%{
            transform: translate(0) rotate(0) scale(1);
        }
        50%{
            transform: translate(200px,200px) rotate(360deg) scale(2);
        }
        100%{
            transform: translate(0,0) rotate(0) scale(1);
        }
        
    }
</style>
<body>
    <div class="box"></div>
</body>
</html>

效果图：

———————————————————————————————————————————

三样式变化动画化（鼠标触发）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: red;
        /* 样式变化时，会以动画形式过渡 */
        transition: all 2s;
    }
    /* 鼠标悬停在上面触发动画 */
    .box:hover{
        width: 400px;
        height: 300px;
        background-color: yellow;

    }
    
</style>
<body>
    <div class="box"></div>
</body>
</html>

变化前：

变化后：———————————————————————————————————————————

四简单的导航实现

导航效果一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        overflow: hidden;
        margin-top: 50px;
    }
    .title{
        border: 1px solid;
        float: left;
           /* margin 是针对div外部的四个方位 */
        margin-left: 30px;
        /* padding 是针对div内部的四个方位 */
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
        transition: all 0.6s;
    }
    .title:hover{
        background-color: red;
        color: white;
        border-radius: 20px;
        /* 箭头变手指 */
        cursor: pointer;
    }
    
    
    
</style>
<body>
    <div class="box">
        <div class="title">图片</div>
        <div class="title">视频</div>
        <div class="title">翻译</div>
        <div class="title">语文</div>
        <div class="title">数学</div>
    </div>
</body>
</html>

页面效果：

简单交互：

鼠标点到对于按钮会改变颜色（字体和背景）以及按钮的形状，鼠标的样式

导航效果2：

修改一部分代码即可（去掉title函数里面的方框）

 .title:hover{
        /* 箭头变手指 */
        cursor: pointer;
        border-bottom: 6px solid gray;
    }

底部变灰

五脚本

小球运动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid;
        }
        .ball {
            width: 80px;
            height: 80px;
            background-color: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <div class="ball" id="ball"></div>
    </div>

    <script>
        // 拿到要处理的对象
        let box = document.getElementById("box")
        let ball = document.getElementById("ball")
        
        // 获取对象的宽高
        let box_w = box.clientWidth
        let box_h = box.clientHeight
        let ball_w = ball.clientWidth
        let ball_h = ball.clientHeight

        // 对样式的修改
        box.style.position = "relative"
        ball.style.position = "absolute"

        // 时间循环方法  1秒=1000毫秒
        let left_pos = 0, top_pos = 0
        let x_speed = 5, y_speed = 4

        let colors = ["red", "blue", "yellow", "green"]

        setInterval(function() {
            ball.style.left = left_pos + "px"
            ball.style.top = top_pos + "px"

            let color = Math.floor(Math.random()*4)

            if (left_pos >= box_w - ball_w || left_pos < 0) {
                x_speed *= -1
                ball.style.backgroundColor = colors[color]
            }
            if (top_pos >= box_h - ball_h || top_pos < 0) {
                y_speed *= -1
                ball.style.backgroundColor = colors[color]
            }

            left_pos += x_speed
            top_pos += y_speed
        }, 30)
    </script>

</body>
</html>

效果图：

能在设置的框内运动且会随着运动切换颜色

绝迹刻本

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
1
评论
html-动画效果

可以通过修改translateX来改变旋转的方向 translateY则绕着Y轴旋转。鼠标点到对于按钮会改变颜色（字体和背景）以及按钮的形状，鼠标的样式。修改一部分代码即可（去掉title函数里面的方框）不同的百分号比例对旋转速度所占比有影响。能在设置的框内运动且会随着运动切换颜色。infinite无限循环。
复制链接

扫一扫