1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

animation实现立体漂浮效果

漂浮的白云主要通过远景白云和近景白云来实现立体漂浮效果。远景和近景分别使用两张背景图片,通过改变其背景定位来实现白云移动效果,通过设置不同的动画持续时间来实现交错漂浮的效果

<style>      .box {      position: relative;      height: 300px;      width: 500px;      }      .in1,      .in2 {      position: absolute;      height: 100%;      width: 100%;      background-size: cover;      -webkit-animation: move 100s infinite linear alternate;      animation: move 100s infinite linear alternate;      }      @-webkit-keyframes move {      100% {      background-position: 500% 0;      }      }      @keyframes move {      100% {      background-position: 500% 0;      }      }      .in1 {      background-image: url('https://www.qiquanji.com/data/img/dmj/201910101570715986294912.png');      }      .in2 {      background-image: url('https://www.qiquanji.com/data/img/dmj/201910101570715989989003.png');      -webkit-animation-duration: 10s;      animation-duration: 10s;      }      @media (max-width:700px) {      .box{width:100%;box-sizing: border-box;}      }      </style>      </head>      <body>      <div class="box">      <div class="in1"></div>      <div class="in2"></div>      </div>      </body>      </html>

最终效果点(点上面的运行代码来看)

效果静态图:

原文链接:https://www.qiquanji.com/post/8732.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: