Register
> 博客>

html动画效果代码

新速特源码 6月10日 29 0

以下是一个简单的HTML动画效果代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>HTML动画效果</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            animation-name: move;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        @keyframes move {
            from {left: 0;}
            to {left: 200px;}
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

这个示例中，我们创建了一个红色的正方形盒子，并使用CSS动画将其从左侧移动到右侧，然后返回。我们使用@keyframes规则定义了动画的关键帧，然后将其应用于盒子元素上。我们还指定了动画的持续时间、迭代次数和方向。最后，我们将盒子元素放置在文档中，以便它可以在浏览器中显示。

下面我再给你介绍一些常见的HTML动画效果代码。

淡入淡出效果

<!DOCTYPE html>
<html>
<head>
    <title>淡入淡出效果</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: red;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        #box:hover {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

这个示例中，我们创建了一个红色的正方形盒子，并将其初始透明度设置为0。然后，我们使用CSS过渡将其透明度从0到1进行平滑的淡入效果。当鼠标悬停在盒子上时，我们将其透明度设置为1，从而实现淡出效果。

旋转效果

<!DOCTYPE html>
<html>
<head>
    <title>旋转效果</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            animation-name: rotate;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes rotate {
            from {transform: rotate(0deg);}
            to {transform: rotate(360deg);}
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

这个示例中，我们创建了一个红色的正方形盒子，并使用CSS动画将其沿着中心点旋转360度。我们使用@keyframes规则定义了动画的关键帧，然后将其应用于盒子元素上。我们还指定了动画的持续时间、迭代次数和时间函数。

缩放效果

<!DOCTYPE html>
<html>
<head>
    <title>缩放效果</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            animation-name: scale;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes scale {
            from {transform: scale(1);}
            to {transform: scale(1.5);}
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

这个示例中，我们创建了一个红色的正方形盒子，并使用CSS动画将其从原始大小缩放到1.5倍大小。我们使用@keyframes规则定义了动画的关键帧，然后将其应用于盒子元素上。我们还指定了动画的持续时间、迭代次数和时间函数。

这些是一些常见的HTML动画效果代码示例，你可以根据自己的需求进行修改和扩展。

腾讯云最新优惠活动，点击查看

Related

热门文章

微海报