jquery窗口刷新父页面

CSS3是前端开发人员非常喜欢使用的的技术之一，它可以让网页看起来更加美观、有趣、也可以更加互动。我们今天主要介绍如何使用CSS3制作眼睛。

.eye {
    position: relative;
    width: 100px;
    height: 50px;
    border-radius: 50%;
    background-color: white;
    border: 2px solid black;
    overflow: hidden;
    margin: 20px;
}
.eyeball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: black;
    transform: translate(-50%,-50%);
}

首先，我们创建一个类名为“eye”的div，它的样式是圆形、白色填充、黑色边框和隐藏超出边界。这是眼睛的外层。

然后，我们再创建一个类名为“eyeball”的div，它是用于眼球的部分。它的样式是圆形、黑色填充和居中。我们使用transform居中的一种方式。

最后，我们为眼球元素添加hover效果，使其更有趣。我们可以在CSS3中使用“transform”来移动眼球的位置，这样当用户将鼠标移动到眼睛上时，眼球也会向鼠标移动。

.eyeball:hover {
    transform: translate(-50%,-60%);
}

这就是我们使用CSS3制作眼睛的方法。我们以HTML和CSS3的方式轻松制作出了一个简单的眼睛，让网页更生动有趣。你可以根据自己的需要调整眼睛的大小、颜色和形状，包括添加动画效果，使眼睛更加吸引人。