设为首页收藏本站
开启辅助访问
搜索
快捷导航
论坛 › 学院 › 平面设计学院 › 为什么是正数和负数
发新帖
返回列表
0 863
电梯直达  跳转到指定楼层

[提问] 为什么是正数和负数

星星的眼泪是我|中级会员 |勤币 292 |学币 0
发表于 2020-3-29 10:37 | 复制链接 | 打印 | 上一主题 | 下一主题
WEB前端实战高级教程 - 3.7 模拟360浏览器雷达动画实例
在backgtound-pasition中为什么xy轴都是负数，不是x轴向右是正的，y轴向下是负的吗？还有案例中top不是向下偏移吗？为什么是正的呢？
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>360</title>
  6.        
  7.        
  8.        
  9.         <style>
  10.        
  11.                 @keyframes dh{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}
  12.                 .out{width:100%;height: 1166px;background: url("img/safe2.jpg") content-box;position: relative;}
  13.                 .out .box{width: 660px;height: 660px;border: 2px solid #FF272B;position: absolute;left: 50%;margin-left: -330px;top: 590px;margin-top: -330px;}
  14.                 .out .iconBig{ background:url( "img/dp.png") no-repeat; width:150px; height:180px;position: absolute;left: 50%;margin-left: -45px;top: 50%;margin-top:-70px; }
  15.                 .box .line{ width:330px; height:450px; background:url("img/rada.png") no-repeat center; animation: dh 3s  linear infinite;  position:absolute; top:0; left:0;transform-origin: 340px 320px}
  16.                 .out .icon{background:url("img/dp.png") no-repeat;position: absolute;}
  17.                 .out .icon:nth-child(1){width: 49px;height: 49px;background-position: -180px -17px;left:150px;top:90px;}
  18.         .out .icon:nth-child(2){width: 64px;height: 64px;background-position: -268px -12px;left: 450px;top: 60px;}
  19.                 .out .icon:nth-child(3){width:36px;height:36px;background-position: -362px -24px;left: 440px;top:300px;}
  20.                 .out .icon:nth-child(4){width:54px;height:54px;background-position: -418px -17px;left: 540px;top:360px;}
  21.                 .out .icon:nth-child(5){width: 58px;height: 58px;background-position: -180px -99px;left:390px;top:490px;}
  22.                 .out .icon:nth-child(6){ width:51px; height:51px; background-position:-269px -104px; left:110px; top:490px;}
  23.         .out .icon:nth-child(7){ width:58px; height:58px; background-position:-179px -99px; left:99px; top:260px;}

  25.        
  26.        
  27.        
  28.        
  29.        
  30.        
  31.         </style>
  32. </head>

  34. <body>
  35.        
  36.        
  37.         <div class="out
  38. <div class="out">
  39.         <div class="box">
  40.    
  41.             <div class="icon"></div>
  42.         <div class="icon"></div>
  43.         <div class="icon"></div>
  44.         <div class="icon"></div>
  45.         <div class="icon"></div>
  46.         <div class="icon"></div>
  47.         <div class="icon"></div>
  48.                 <div class="icon"></div>
  49.                                                  
  50.         <div class="line"></div>
  51.         <div class="iconBig"></div></div>
  52. </body>
  53. </html>
复制代码



本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
举报 使用道具
| 回复

共0个回复 最后回复于 2020-3-29 10:37

发新帖
返回列表
B Color Image Link Quote Code Smilies
高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表