[001]-css实现抽象眼睛

最新推荐文章于 2024-08-29 15:27:05 发布

原创最新推荐文章于 2024-08-29 15:27:05 发布 · 378 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html

css动画特效专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了一个使用HTML和CSS创建的抽象眼睛动画项目。通过定义一个包含9个动态圆环的眼睛容器，结合关键帧动画和延迟属性，实现了独特的旋转效果。项目代码可在CodePen和GitHub上查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

abstract-eyes

效果预览

https://codepen.io/strugglingBoy/pen/rqejqR

代码下载

https://github.com/enstrongbill/daily-frontend-exercise/tree/master/021-abstract-eyes

代码解读

1.html代码

定义一个.eye的容器，里面包含9个.cirque(圆环)

<div class="eye">
        <span class="cirque"></span>
        <span class="cirque"></span>
        <span class="cirque"></span>
        <span class="cirque"></span>
        <span class="cirque"></span>
        <span class="cirque"></span>
        <span class="cirque"></span>
        <span class="cirque"></span>
        <span class="cirque"></span>
    </div>

2.css代码

因为我们眼睛有两个，水平并不居中，垂直居中

body {
	height: 100vh;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: linear-gradient(floralwhite, wheat);
}

眼睛容器内部居中

.eye {
	display: flex;
	align-items: center;
	justify-content: center;
}

动态的实现每个圆环

.cirque {
	position: absolute;
	border-radius: 50%;
	border: .5em solid;
	width: calc(2.125em * var(--index));
	height: calc(2.125em * var(--index));
}

圆环动画的实现

@keyframes spinX {
	0% {
	    transform: rotateX(0deg);
	}
	50% {
	    transform: rotateX(180deg);
	}
	100% {
	    transform: rotateX(-180deg);
}

然后给圆环加上动画(最主要的是animation-delay这个延迟属性)

.cirque{
	animation: spinX 3s linear infinite;
	animation-delay: calc(var(--index) * 0.075s);
}

最后就完成了