通过html+css实现打篮球（动态）

本文链接：https://blog.csdn.net/qq_53075043/article/details/128801372

本文介绍了一个使用HTML和CSS创建的简单网页动画项目，页面包含背景音乐自动播放功能及图片动画效果，通过CSS动画实现了图片的动态展示。

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

1、HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bj.css">
 
    <title>鸡你太美</title>
    
</head>
<section>
    <!-- 背景颜色 -->
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="box">
</div></section>
<style>
    /* 定义动画规则 */
    @keyframes king{
    0%{transform: translateY(0) rotate(0);}
    25%{transform: translateY(-5px) translateX(5px) rotateZ(5deg) scale(1.2);}
    50%{transform: translateY(0) translateX(0px) rotate(0) scale(1);}
    75%{transform: translateY(-5px) translateX(-5px) rotateZ(-5deg) scale(1.2);}
    100%{transform: translateY(0) translateX(0px) rotate(0) scale(1);}
}
img{
    height: 600px;
    position: absolute;
    top: 100px;
    left: 300px;
    /* 调用动画 */
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    animation: king 0.5s infinite forwards;
    
}
</style>
<body >
    <audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"
                src="jntm.mp4">
              
    </audio>
    <style type="text/css">
        audio{
                display: none;
            }
   </style>
    
    <img class="caixukun" src="bdk1.png" alt="鸡你太美" title="坤坤最帅">
    
   
</body>
</html>

2、CSS代码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
/* 使用flex布局，让内容垂直和水平居中 */
 
section {
    /* 相对定位 */
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-image: url(jnt.png);
    
}

3、鲲哥照片素材：

1.动图

2.动图背景：（手动ps过的）

4、背景音乐：这段代码是实现背景音乐自动播放并隐藏播放按钮的，

<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto" src="jntm.mp4">,若要修改音乐，则把"jntm.mp4",修改为自己想要的音乐，（MP3，MP4都行，所有文件放在同一个文件夹下。）

display: none;隐藏播放按钮。

<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"
                src="jntm.mp4">
              
    </audio>
    <style type="text/css">
        audio{
                display: none;
            }
   </style>