游戏网站动画效果

最新推荐文章于 2024-07-19 15:58:10 发布

南漂一时

最新推荐文章于 2024-07-19 15:58:10 发布

阅读量65

点赞数

文章标签：游戏 css html

本文链接：https://blog.csdn.net/weixin_42814869/article/details/133962532

版权

<!DOCTYPE html>
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<style>
    .box{
  width: 400px;
  height: 400px;
  /* border: solid 1px red; */
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  position: relative;
  /* background: url('./cccc.png') no-repeat 100% 100%; */
  /* background-image: url("./ccc.png");
  animation: yuanXing 5s linear 10 infinite; */
}
.img-box{
  /* border: solid blue 1px; */
  width: 400px ;
  height: 400px;
  animation: yuanXing 8s infinite linear;
}
.img-dao{
  position: absolute;
  /* border: solid blue 1px; */
  width: 300px ;
  height: 300px;
  top: 100px;
  left: 100px;
  animation: myfirst 8s infinite linear;
}
/* .img-box:hover{
  width: 300px ;
  height: 300px;
  animation: myfirst linear 1s forwards;
  cursor: pointer;
} */
@keyframes yuanXing {
      from {
        transform: rotate(0deg)
      }
      to {
        transform: rotate(360deg)
      }
    }
    @keyframes myfirst {
      0% {
          transform: translate(0px, 0px);
      }
      50% {
          transform: translate(0px, -20px);
      }
      100% {
          transform: translate(0px, 0px);
      }
    }
</style>
<!-- <div>jdlfjdfldjfld</div> -->
<div class="box">我来自中国
  <img  src="./ccc.png" class="img-box" alt="">
  <img  src="./dao.png" class="img-dao" alt="">
</div>
</html>```