飘扬的旗帜

Posted 手可摘星辰c

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了飘扬的旗帜相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>飘扬的旗帜</title>
<style>
.container {
width: 400px;
height: 280px;
margin: 100px auto;
background: url(https://cdn.files.qdfuns.com/article/cover/201803/06/090248oe1senkb1razeenk.png) no-repeat 0px 0px;
overflow: hidden;
position: relative;
}
.img {
width: 90px;
position: absolute;
top: 14%;
left: 14%;
}
</style>
</head>
<body>
<div class="container">
<img class="img" src="https://cdn.files.qdfuns.com/article/content/picture/201803/06/090015vzevheuk18lrxs81.png" title="随风飘扬">
</div>
<script>
var position = 0;
var container = document.getElementsByClassName(‘container‘)[0];
function positionn(k){
setInterval(function(){
k-=400;
if(k==-18000){
k=0;
return k;
}
container.style.backgroundPosition = k+"px"
},100)

}
positionn(position);
</script>
</body>
</html>

以上是关于飘扬的旗帜的主要内容,如果未能解决你的问题,请参考以下文章

3ds Max制作一面飘扬的旗帜效果图

飘扬的旗帜!shader 编程实战!Cocos Creator!

动画横幅的尖端挥动(就像风中的旗帜)

flutter是啥意思,flutter的解释

"flutter"是啥意思

在图片中找到美国国旗?