• <sub id="h4knl"><ol id="h4knl"></ol></sub>
    <sup id="h4knl"></sup>
      <sub id="h4knl"></sub>

      <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
      1. <strong id="h4knl"></strong>

      2. css3實現地球自轉代碼圖文教程

        時間:2024-05-04 22:17:57 CSS3 我要投稿
        • 相關推薦

        css3實現地球自轉代碼圖文教程

          素材:兩張圖片,

        css3實現地球自轉代碼圖文教程

          espaco.jpg(1600*1000)

          terra.jpg(900*450)

          第一步,形成靜態圖(地球背景全屏,地球大小為450px*450px,地球位置為上下左右居中):

          body{

          background: url(espaco.jpg) no-repeat 0 0;

          background-size: 100%; /* 背景圖片被拉伸為全屏 */

          }

          .earth{

          background: url(terra.jpg) repeat-x 0 0; /* 背景圖片在水平方向復制*/

          /*下面的屬性可使地球位于瀏覽器窗口垂直水平居中國*/

          height: 450px;

          left: 50%;

          margin: -225px 0 0 -225px;

          position: absolute;

          top: 50%;

          width: 450px;

          }

          效果圖:

          第二步,形成圓形地球效果,同時添加月暈效果:

          /*在earth中添加以下屬性樣式*/

          border: 1px solid rgba(26,18,101,0.3); /*形成圓邊效果,視覺效果更好,不用也行*/

          border-radius: 225px; /*使地球形成圓形效果*/

          box-shadow: -8px 0 25px rgba(256,256,256,0.3), -1px -2px 14px rgba(256,256,256,0.5) inset; /*形成圓形外面的模糊月暈效果*/

          效果圖:

          第三步,形成白天黑夜效果:

          .earth:before{

          content: "";

          border-radius: 225px;

          box-shadow: -150px -6px 25px rgba(0,0,0,0.7) inset;/*弧形陰影,形成白天黑夜效果*/

          left: 0;

          position:absolute;

          top: 0;

          height: 450px;

          width: 450px;

          }

          效果圖:

          最后一步,形成地球自轉效果:

          @-webkit-keyframes loop {

          % { background-position: 0 0; }

          %{ background-position: -900px 0;} /* 世界地圖的大小為900*450,所以background-position-x: -900px */ }

          /*在earth中添加如下樣式*/

          -webkit-animation: loop 20s linear infinite; /* 這的時間是可以設置的,如果你想地球轉快一點的話,時間改小點就行了,比如10s */

        【css3實現地球自轉代碼圖文教程】相關文章:

        JavaScript實現網頁刷新代碼段08-07

        將php實現過濾UBB代碼09-11

        Photoshop制作璀璨星球的圖文教程09-09

        三角粽子的包法教程「圖文」10-16

        PS黑白照片上色圖文教程09-21

        防盜鏈接ASP函數實現代碼01-23

        常用排序算法之JavaScript實現代碼段06-04

        關jQuery彈出窗口簡單實現代碼-javascript編程06-07

        查找本地IP/網絡IP/對方IP地址圖文教程07-17

        excel2010合并內容相同單元格方法圖文教程09-15

        国产高潮无套免费视频_久久九九兔免费精品6_99精品热6080YY久久_国产91久久久久久无码
      3. <sub id="h4knl"><ol id="h4knl"></ol></sub>
        <sup id="h4knl"></sup>
          <sub id="h4knl"></sub>

          <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
          1. <strong id="h4knl"></strong>

          2. 久久亚洲欧洲国产综合 | 日韩欧美国产一二三区 | 亚洲日韩精品一区二区三区在线观看 | 天天综合一区二区三区 | 久久99精品麻豆国产 | 亚洲精品福利在线观看AV |