html5fishbowl

作者：看悲伤的曲发布日期:2025-09-28 浏览:68

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Fishbowl</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #87CEEB;
        }
        #fishbowl {
            width: 300px;
            height: 300px;
            border: 5px solid #8B4513;
            border-radius: 50%;
            background-color: #ADD8E6;
            position: relative;
            overflow: hidden;
        }
        #fish {
            width: 50px;
            height: 30px;
            background-color: orange;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
            animation: swim 2s infinite alternate;
        }
        @keyframes swim {
            from {
                transform: translate(-50%, -50%) rotate(45deg);
            }
            to {
                transform: translate(-50%, -50%) rotate(135deg);
            }
        }
    </style>
</head>
<body>
    <div id="fishbowl">
        <div id="fish"></div>
    </div>
</body>
</html>

解释说明

HTML结构:
- #fishbowl: 一个圆形的容器，模拟鱼缸。
- #fish: 一个矩形的元素，模拟鱼，并通过CSS动画使其在鱼缸内游动。
CSS样式:
- body: 设置页面居中对齐，背景颜色为浅蓝色。
- #fishbowl: 创建一个圆形的鱼缸，使用border-radius: 50%来实现圆形效果。设置边框颜色和宽度，并限制内容溢出。
- #fish: 模拟鱼的形状，通过旋转和位移来创建游泳效果。使用@keyframes定义鱼的游泳动画，使鱼在鱼缸内来回游动。
动画:
- 使用@keyframes定义了一个名为swim的动画，使鱼从初始角度（45度）旋转到135度，再返回，形成来回游动的效果。

上一篇：htmloverflow属性

下一篇：html article