【Web前端HTML5&CSS3】17-变形:平移、旋转与缩放

这篇博客展示了如何使用HTML和CSS创建一个有趣的鸭子图案的时钟动画。通过设置不同的动画规则,实现了时针、分针和秒针的旋转效果,背景包含两种图片,使得这个数字时钟具有独特的视觉吸引力。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

鸭子表

html代码

<div class="clock">
    <div class="hour-wrapper">
        <div class="hour"></div>
    </div>
    <div class="minute-wrapper">
        <div class="minute"></div>
    </div>
    <div class="second-wrapper">
        <div class="second"></div>
    </div>
</div>

cs代码

.clock {
    width: 500px;
    height: 500px;
    background-image: url("assets/鸭子表/clock.png");
    background-image: url("assets/鸭子表/clock_duck.jpg");
    background-size: cover;
    margin: 100px auto;
    position: relative;
}
.clock>div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.clock>div>div {
    height: 50%;
    margin: 0 auto;
}
/* 时针 */
.hour-wrapper {
    height: 60%;
    width: 60%;
    animation: clock-run 720s infinite;
}
.hour {
    width: 8px;
    background-color: black;
}
/* 分针 */
.minute-wrapper {
    height: 75%;
    width: 75%;
    animation: clock-run 60s steps(60) infinite;
}
.minute {
    width: 4px;
    background-color: black;
}
/* 秒针 */
.second-wrapper {
    height: 90%;
    width: 90%;
    animation: clock-run 1s steps(60) infinite;
}
.second {
    width: 2px;
    background-color: red;
}
@keyframes clock-run {
    from {
        transform: rotateZ(0);
    }
    to {
        transform: rotateZ(360deg);
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值