【100dayscss#89】旋转的十

最新推荐文章于 2024-07-10 23:34:24 发布

tida_yake

最新推荐文章于 2024-07-10 23:34:24 发布

阅读量395

点赞数

分类专栏： 100dayscss 文章标签： css css3 html

本文链接：https://blog.csdn.net/tida_yake/article/details/127593474

版权

100dayscss 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Day #89
Animated Pattern: Looking closely will you make feel dizzy, but you have to if you want to figure out the movements.
人麻了，一个多小时没做出来。我预想是两个棒子旋转，只是初始状态不同。一开始做45°到225°的动画，但是最后会出现从225跳转到45的闪动，实在是做麻了，看答案了。

<div class="bar"></div>
<style>
@keyframes rollbar {
	2.5% {	
		transform: translate(-5px,-5px) rotate(45deg);
	}
	5% {
		transform: translate(-10px,-10px) rotate(45deg);
	}
	7.5% {
		transform: translate(-5px,-5px) rotate(45deg) scale(0.75,1.25);
	}
	10% {
		transform: rotate(45deg) scale(0.5,1.5);
	}
	12.5% {
		transform: rotate(45deg) scale(0.5,1.5);
	}
	15% {
		transform: rotate(67deg) scale(0.75,1.25);
	}
	17.5% {
		transform: rotate(90deg);
	}
	20% {
		transform: rotate(112deg);
	}
	22.5% {
		transform: rotate(135deg);
	}
	25% {
		transform: translate(5px,5px) rotate(135deg);
	}
	/*后面我还补充到了360°，逆天🤮*/
</style>

效果给大家看看，一起乐呵乐呵。

给的答案是两根棒的初始和结束状态刚好重合。初始和结束跳转眼睛看不出来。（Slim 一种html模板语法；SCSS css的一种扩展语法）

.frame
	.horizontal
		-for i in (1..100)
			div class="stripe stripe-#{i}"
	.vertical
		-for i in (1..100)
			div class="stripe stripe-#{i}"

$numberOfDots: 10; // sync with HTML
$radius: 200;

.horizontal {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	.stripe {
		position: relative;
		float: left;
		width: 40px;
		height: 10px;
		margin: 15px 0;
		background: #fff;
		animation: rotate-h 4s ease-in-out infinite;
	}
	
}

@keyframes rotate-h {
	0% {
		transform: rotate(0);
	}
	20% {
		transform: rotate(45deg);
	}
	40% {
		transform: rotate(45deg) translateX(-20px);
	}
	60% {
		transform: rotate(45deg) scaleY(2) scaleX(.5);
	}
	80% {
		transform: rotate(45deg) scaleY(2) scaleX(.5);
	}
	100% {
		transform: rotate(90deg);
	}
}
}