css一个子模块在父模块中随机浮动

最新推荐文章于 2022-10-31 14:32:12 发布

侧耳倾听...

最新推荐文章于 2022-10-31 14:32:12 发布

阅读量454

点赞数

分类专栏： css样式文章标签： position定位

本文链接：https://blog.csdn.net/xm_w_xm/article/details/95493167

版权

css样式专栏收录该内容

19 篇文章 0 订阅

订阅专栏

首先，先说功能上面做一个在轮播图上面浮动一个提示

首先在网上找到了一个例子是一个小球在

这个代码是酱紫的

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title> 页面名称 </title>
		<style type="text/css">
			#box {
				position: relative;
				width: 500px;
				height: 500px;
				border: 1px solid #999;
			}
			
			#box div {
				position: absolute;
				width: 20px;
				height: 20px;
				top: 0px;
				left: 0px;
				background-color: #f00;
				transition: all 500ms;
			}
		</style>
	</head>

	<body>

		<div id="box">
			<div></div>
			<div></div>
		</div>
		<script type="text/javascript">
			var div = document.getElementById("box").getElementsByTagName("div");
			setInterval(function() {
				for(var i = 0; i < div.length; i++) {
					div[i].style.left = Math.floor(Math.random() * 480) + "px";
					div[i].style.top = Math.floor(Math.random() * 480) + "px";
				}
			}, 500);
		</script>
	</body>

</html>

这是我的，用到的是iview的UI，小面的warning是要浮动的提示

 <div id="home-toppic">
      <Carousel autoplay v-model="value1" loop class="lunbo">
        <CarouselItem v-for="item in lubolist" :key="item.imgurl">
          <div class="demo-carousel">
            <img :src="item.imgurl" />
          </div>
        </CarouselItem>
      </Carousel>
      <div class="warning" id="home-toppic1">提示：从网站下载的地图或在线制图生成的地图，公开使用前需送测绘地理信息行政主管部门审核</div>
    </div>

浮动的方法

movebox() {
      var div1 = document.getElementById("home-toppic1");
      setInterval(function() {
        div1.style.right = Math.floor(Math.random() * 480) + "px";
        div1.style.top = Math.floor(Math.random() * 480) + "px";
      }, 3000);
    }

css部分

#home-toppic {
  width: 100%;
  /* height: 705px; */
  height: auto;
  margin: 0 auto;
  background: linear-gradient(#3e9be0, #12335a);
  overflow: hidden;
  position: relative;
  border-top: 2px solid #c3c3c3;
}
#home-toppic .warning {
  position: absolute;
  width: 300px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.8);
  transition: all 3000ms;
  color: red;
  padding: 20px;
  border-radius: 10px;
  letter-spacing: 3px;
}

侧耳倾听...

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css一个子模块在父模块中随机浮动

首先，先说功能上面做一个在轮播图上面浮动一个提示首先在网上找到了一个例子是一个小球在这个代码是酱紫的<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" cont...
复制链接

扫一扫