css·div浮游与切图(Vue)

css·div浮游与切图(Vue)

基本】top: 0=0px; 是原div位置

/* 浮动 top: 0=0px; 是原div位置 */ 
position: absolute; 
top: 0=0px; 
right: 20px;

0】效果

1】div设置

<template>
	<div id="app">
		<div class="Go">GO</div>
		
		<div class="divfloat animations">
			√√√√√
		</div>
	</div>
</template>

2】css设置

.Go {
		width: 30px;
		height: 20px;
		background-color: #FD8008;
		border-radius: 20px;
	}
	/* 浮游 漂浮设置 */
	.divfloat {
		width: 70px;
		height: 50px;
		background-color: #fd6fcf;
		border-radius: 20px;
		
		/* 漂浮设置 */
		position: fixed;
		left: 10%;
		top: 10%;
	}
	.animations{
		/* 定义动画 */
		animation: name 6000ms;
		
	}
	/* 设计动画 */
	@keyframes name{
		10% {
			background-color: blue;
		}
		20%{
			background-color: aquamarine;
			color: aliceblue;
		}
		30%{
			background-color: #2C3E50;
			color: aliceblue;
		}
		50%{
			background-color: #fc0107;
			color: aliceblue;
			/* 横向移动 */
			transform: translate(200px);
		}
		100%{
			background-color: #fd8008;
			color: aliceblue;
			/* 旋转 */
			transform: rotate(720deg);
		}
	}
540 Views
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的电子邮箱地址不会被公开。 必填项已用*标注