html+css中的animation 动画(二)孙悟空巡山

最新推荐文章于 2023-08-22 16:39:13 发布

ot_found

最新推荐文章于 2023-08-22 16:39:13 发布

阅读量358

点赞数

分类专栏： html+css 文章标签： html css

原文链接：https://blog.csdn.net/cflsh/article/details/113748699?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162462472316780264059024%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=162462472316780264059024&biz_id=0&ut

版权

html+css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

打开页面孙悟空在原地匀速运动,背景利用视觉差匀速的向后运动

附代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .bg{
    height:100vh;
    width: 100%;
    background-image: url(./img/background.jpg);
    overflow: hidden;
    animation: bg 30s linear infinite;
  }
  .wk{
    position: absolute;
    left: 50%;
    bottom: 25%;
    height: 180px;
    width: 200px;
    background-image: url(./img/present.png);
    background-repeat: no-repeat;
    animation: move 2s steps(8) infinite;
  }
  @keyframes move {
    0%{
      background-position: 0,0;
    }
    100%{
      background-position: -1600px,0;
    }
  }
  @keyframes bg {
    0%{
      background-position:-1920px,0 ;
    }100%{
      background-position: 0,0;
    }
  } 
</style>
</head>
<body>
  <div class="bg"></div>
  <div class="wk"></div>
</body>
</html>

素材

ot_found

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html+css中的animation 动画(二)孙悟空巡山

打开页面孙悟空在原地匀速运动,背景利用视觉差匀速的向后运动附代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc..
复制链接

扫一扫