<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>The floating white clouds</title> <styletype= "Text/css">. Box{position:relative;Height:300px;width:500px; }. in1,. in2{position:Absolute;Height:100%;width:100%;background-size:cover;Animation:move 100s infinite linear alternate; }@keyframes Move{100% {background-position:500% 0; }}. in1{Background-image:url (' http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/cloud.png '); }. in2{Background-image:url (' http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/cloud1.png ');animation-duration:10s; } </style></Head><Body><H1>The floating white clouds</H1><Divclass= "box"> <Divclass= "In1"></Div> <Divclass= "in2"></Div></Div><Strong>"Brief Introduction"</Strong> <P>Floating clouds mainly through the prospect of white clouds and white clouds to achieve three-dimensional floating effect. Vision and close-up use two background images respectively, by changing their background positioning to achieve the white cloud movement effect, by setting different animation duration to achieve the effect of staggered floating</P></Body></HTML>
:
Original link: https://www.cnblogs.com/xiaohuochai/p/5419236.html
CSS3 Animation (animation) effect 1-floating clouds