基于DIV+CSS制作鳄鱼眼睛会动的

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-29 08:12:50

　　基于DIV+CSS制作鳄鱼眼睛会动的

基于DIV+CSS制作鳄鱼眼睛会动的动画效果

实现思路

HTML结构:
- 创建一个div作为鳄鱼的头部，内部包含两个div分别代表左右眼。
- 为了实现眼睛的动画效果，可以给眼睛添加一个内层div，用于控制瞳孔的移动。
CSS样式:
- 为鳄鱼头部设置背景图片或颜色。
- 为眼睛设置圆形样式，并使用绝对定位。
- 为瞳孔设置相对定位，以便在眼睛内部移动。
- 使用CSS3的animation属性来实现眼睛的动画效果，如眨眼、左右晃动等。
JavaScript控制:
- (可选) 使用JavaScript来触发或控制动画，比如鼠标悬停时触发动画。

代码示例

HTML

<!DOCTYPE html>
<html>
<head>
    <title>鳄鱼眨眼睛</title>
    <style>
        .crocodile {
            width: 200px;
            height: 100px;
            background: green;
            position: relative;
        }
        .eye {
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            position: absolute;
        }
        .pupil {
            width: 10px;
            height: 10px;
            background: black;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: blink 2s infinite;
        }
        @keyframes blink {
            0% {
                transform: translateY(-50%);
            }
            50% {
                transform: translateY(0%);
            }
            100% {
                transform: translateY(-50%);
            }
        }
    </style>
</head>
<body>
    <div class="crocodile">
        <div class="eye" style="left: 30px; top: 20px;">
            <div class="pupil"></div>
        </div>
        <div class="eye" style="right: 30px; top: 20px;">
            <div class="pupil"></div>
        </div>
    </div>
</body>
</html>