css3圆形效果_使用CSS3的圆形导航效果

css3圆形效果

View demo 查看演示 Download Source 下载源

Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. The effect is done with CSS3 transitions.

今天，我们要向您展示如何使用CSS3为图像导航创建漂亮的悬停效果。 这个想法是用箭头扩展圆形导航，并显示带有缩略图的气泡。 在我们的示例中，我们将在鼠标悬停时显示下一个和上一个滑块图像的缩略图。 该效果是通过CSS3过渡完成的。

The beautiful images are by Andrey & Lili and they are licensed under the CC BY-NC 3.0 License.

精美的图像由Andrey＆Lili提供，并根据CC BY-NC 3.0许可获得许可。

标记 (The Markup)

For this little CSS3 effect we will have a navigation structure that looks like the following:

对于CSS3这个小效果，我们将具有一个类似于以下内容的导航结构：

<div class="cn-nav">
	<a href="#" class="cn-nav-prev">
		<span>Previous</span>
		<div style="background-image:url(../images/thumbs/1.jpg);"></div> 
	</a>
	<a href="#" class="cn-nav-next">
		<span>Next</span>
		<div style="background-image:url(../images/thumbs/3.jpg);"></div>
	</a>
</div>

In our demo we will make a jQuery template out of this and dynamically add the thumbnails for the previous and next images of the slider. But to show you how the expanding circle effect is done, we will only show you this part.

在我们的演示中，我们将使用此模板制作一个jQuery模板，并动态添加滑块上一个和下一个图像的缩略图。 但是，为了向您展示扩展圆圈效果是如何完成的，我们仅向您展示这一部分。

CSS (The CSS)

Let’s see now, how to add the style for this navigation. Assuming that we have some relative surrounding container, we will set the link elements’ position to absolute. The height and width will be 70 pixels so that we have a not too small area for the hover effect:

现在，让我们看看如何为该导航添加样式。 假设我们有一些相对的周围容器，我们将链接元素的位置设置为绝对。 高度和宽度为70像素，因此我们的悬停效果区域不会太小：

.cn-nav > a{
    position: absolute;
    top: 0px;
    height: 70px;
    width: 70px;
}
a.cn-nav-prev{
    left: 0px;
}
a.cn-nav-next{
    right: 0px;
}

The span element, which will contain the arrows as a background image will have an initial height and width of 46 pixel. In order to make it look like a circle, we need to set the border radius to half of its width/height. With the 50% and negative margin trick, we set it into the center of the link element. Then we define the transition which will take all properties into account with a duration of 400ms and with ease as the easing function:

span元素将包含箭头作为背景图像，其初始高度和宽度为46像素。 为了使其看起来像一个圆，我们需要将边界半径设置为宽度/高度的一半。 使用50％和负边距技巧，我们将其设置为链接元素的中心。 然后，我们定义过渡，该过渡将考虑所有属性，持续时间为400ms，并轻松地用作缓动函数：

.cn-nav a span{
    width: 46px;
    height: 46px;
    display: block;
    text-indent: -9000px;
    -moz-border-radius: 23px;
    -webkit-border-radius: 23px;
    border-radius: 23px;
    cursor: pointer;
    opacity: 0.9;
    position: absolute;
    top: 50%;
    left: 50%;
    background-size: 17px 25px;
    margin: -23px 0 0 -23px;
    -webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

The spans’ background image (righ and left arrow):

跨度的背景图像(右和向左箭头)：

.cn-nav a.cn-nav-prev span{
    background: #666 url(../images/prev.png) no-repeat center center;
}
.cn-nav a.cn-nav-next span{
    background: #666 url(../images/next.png) no-repeat center center;
}

The div with the thumbnail as background image is initially going to have a height and width of 0 pixel. It’s going to be absolute and also positioned in the center of the link element. Border radius and margins are going to be 0 initially. The background image will fill all the element, hence we will give the background-size of 100% width and height. The transition for this element will be for all properties with a duration of 200ms and with the ease-out easing function:

以缩略图为背景图像的div最初的高度和宽度为0像素。 这将是绝对的，并且还将位于link元素的中心。 边界半径和边距最初将为0。 背景图片将填充所有元素，因此我们将提供100％宽度和高度的背景大小。 此元素的过渡适用于持续时间为200ms并具有缓动缓动功能的所有属性：

.cn-nav a div{
    width: 0px;
    height: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px; 
    -webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

Now, let’s define what the elements will look like on hover.

现在，让我们定义悬停时元素的外观。

The span will increase to 100 pixels in width and height and accordingly, we will set the negative margins and the border radius to half of that. We’ll increase the size of the background image a little bit. Additionally, we’ll change the background color and the opacity:

跨度将在宽度和高度上增加到100像素，因此，我们将负边距和边框半径设置为其一半。 我们将稍微增加背景图像的大小。 此外，我们将更改背景颜色和不透明度：

.cn-nav a:hover span{
    width: 100px;
    height: 100px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    opacity: 0.6;
    margin: -50px 0 0 -50px;
    background-size: 22px 32px;
    background-color:#a8872d;
}

And finally, the little thumbnail div element will expand to 90 pixels, so that we can still see the span element around, appearing as a border to the thumb. We’ll also increase the background size a bit and set the negative margins and the border radius to half of the element’s width:

最后，小缩略图div元素将扩展到90像素，因此我们仍然可以看到span元素，显示为拇指的边框。 我们还将稍微增加背景大小，并将负边距和边框半径设置为元素宽度的一半：

.cn-nav a:hover div{
    width: 90px;
    height: 90px;
    background-size: 120% 120%;
    margin: -45px 0 0 -45px;
    -moz-border-radius: 45px;
    -webkit-border-radius: 45px;
    border-radius: 45px; 
}

And that’s it! A slick effect with CSS3 only! Check out the demo to see how it looks integrated in a slider with showing the previous and next thumbail (with a modern browser, sorry IE9 is not included)! I hope you enjoyed this little tutorial and find it useful.

就是这样！ 仅CSS3具有光滑效果！ 查看该演示，以查看如何将其集成到滑块中并显示上一个和下一个缩略图(使用现代浏览器，抱歉，不包括IE9)！ 我希望您喜欢这个小教程并觉得它有用。

翻译自: https://tympanus.net/codrops/2011/10/10/circle-navigation-effect-with-css3/

css3圆形效果