---- AI试用 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

铃铛效果

前端开发 蚂蚁 2037℃ 0评论

提示:你可以先修改部分代码再运行。

sass

$speed: 2.5s;
	
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
	overflow: hidden;
  background: #DD3C54;
}

.bell {
	position: absolute;
	top: 173px;
	left: 175px;
	fill: #fff;
	transform-origin: 50% 0;
	animation: shake $speed ease infinite;
}

.line {
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
}

.line-1, .line-2, .line-3 {
	position: absolute;
	top: 170px;
	left: 230px;
}


.line-4, .line-5, .line-6 {
	position: absolute;
	top: 170px;
	right: 230px;
}

@for $i from 1 through 6 {
	.line-#{$i} {
		animation: line-#{$i} $speed ease-out infinite both;
	}
}

@keyframes line-1 {
	0% {
		transform: translate3d(0,0,0) scale(1);
		opacity: 1;
	}
	50%, 100% {
		transform: translate3d(60px,0,0) scale(2);
		opacity: 0;
	}
}

@keyframes line-2 {
	0%,19%{
		opacity: 0;
	}
	20% {
		transform: translate3d(0,0,0) scale(1);
		opacity: 1;
	}
	70%, 100% {
		transform: translate3d(60px,0,0) scale(2);
		opacity: 0;
	}
}

@keyframes line-3 {
	0%,39% {
		opacity: 0;
	}
	40% {
		transform: translate3d(0,0,0) scale(1);
		opacity: 1;
	}
	90%, 100% {
		transform: translate3d(60px,0,0) scale(2);
		opacity: 0;
	}
}

@keyframes line-4 {
	0% {
		transform: translate3d(0,0,0) scale(1);
		opacity: 1;
	}
	50%, 100% {
		transform: translate3d(-60px,0,0) scale(2);
		opacity: 0;
	}
}

@keyframes line-5 {
	0%,19%{
		opacity: 0;
	}
	20% {
		transform: translate3d(0,0,0) scale(1);
		opacity: 1;
	}
	70%, 100% {
		transform: translate3d(-60px,0,0) scale(2);
		opacity: 0;
	}
}

@keyframes line-6 {
	0%,39% {
		opacity: 0;
	}
	40% {
		transform: translate3d(0,0,0) scale(1);
		opacity: 1;
	}
	90%, 100% {
		transform: translate3d(-60px,0,0) scale(2);
		opacity: 0;
	}
}

@keyframes shake {
	0%, 50%, 100% {
		transform: rotate(0);
	}
	5%, 10%, 15%, 20%, 25%, 30%, 35%, 40% {
		transform: rotate(6deg);
	} 
	45% {
		transform: rotate(4deg);
	} 
	7.5%, 12.5%, 17.5%, 22.5%, 27.5%, 32.5%, 37.5%, 42.5% {
		transform: rotate(-6deg);
	}
	47.5% {
		transform: rotate(-2deg);
	}
}

转载请注明:有爱前端 » 铃铛效果

喜欢 (0)or分享 (0)