html背景图变圆圈,使用CSS Transitions实现圆形悬停效果的示例代码

最新推荐文章于 2024-04-17 19:41:14 发布

兔肉菌

最新推荐文章于 2024-04-17 19:41:14 发布

阅读量932

点赞数

文章标签： html背景图变圆圈

本文介绍了

在今天的教程中，我们将在圆上试验悬停效果。自从有了border- radius属性，我们可以创建圆形形状，并且它们作为设计元素更常出现在网站中。我特别喜欢看到的一个用途是圆形缩略图，它看起来比通常的矩形更有趣。因为圆是如此特殊的形状，我们将为它创造一些特殊的悬停效果！

我们将在本教程中省略浏览器前缀。但你当然会在下载文件中找到它们。

那么，让我们开始吧！

HTML结构

对于大多数示例，我们将使用以下结构：

Use what you have

by Angela Duncan View on Dribbble
Common Causes of Stains

by Antonio F. Mondragon View on Dribbble
Pink Lightning

by Charlie Wagers View on Dribbble

虽然我们可以在这里使用图像，但我们会通过使用背景图像来给自己更多的选择。我们将在以“ch-img-”开头的类中定义它们。

现在，让我们做一些悬停效果吧！

CSS样式

让我们为列表和列表项定义一些常见的样式：

.ch-grid {

margin: 20px 0 0 0;

padding: 0;

list-style: none;

display: block;

text-align: center;

width: 100%;

}

.ch-grid:after,

.ch-item:before {

content: '';

display: table;

}

.ch-grid:after {

clear: both;

}

.ch-grid li {

width: 220px;

height: 220px;

display: inline-block;

margin: 20px;

}

一些示例将具有不同的结构，但我们将更详细地研究每个示例。

示例1

第一个例子是通过缩放来揭示描述，我们还将为".ch-item"的内阴影设置动画。所以让我们定位".ch-item"并设置一个漂亮的，内阴影和过渡：

.ch-item {

width: 100%;

height: 100%;

border-radius: 50%;

overflow: hidden;

position: relative;

cursor: default;

box-shadow:

inset 0 0 0 16px rgba(255,255,255,0.6),

0 1px 2px rgba(0,0,0,0.1);

transition: all 0.4s ease-in-out;

}

正如您之前注意到的那样，我们已经为列表项提供了两个类：一个是ch-item，另一个用于定义特定的背景图像：

.ch-img-1 {

}

.ch-img-2 {

}

.ch-img-3 {

}

".ch-info"将设置为绝对定位，我们将通过设置RGBA值为其提供半透明背景。它的不透明度将设置为0，我们也将它缩小到0：

.ch-info {

position: absolute;

background: rgba(63,147,147, 0.8);

width: inherit;

height: inherit;

border-radius: 50%;

overflow: hidden;

opacity: 0;

transition: all 0.4s ease-in-out;

transform: scale(0);

}

标题将具有一些padding和margin以及平滑的文本阴影：

.ch-info h3 {

color: #fff;

text-transform: uppercase;

letter-spacing: 2px;

font-size: 22px;

margin: 0 30px;

padding: 45px 0 0 0;

height: 140px;

font-family: 'Open Sans', Arial, sans-serif;

text-shadow:

0 0 1px #fff,

0 1px 2px rgba(0,0,0,0.3);

}

p元素的不透明度为0和一个过渡(我们希望在悬停时将其淡入但有延迟时间)：

.ch-info p {

color: #fff;

padding: 10px 5px;

font-style: italic;

margin: 0 30px;

font-size: 12px;

border-top: 1px solid rgba(255,255,255,0.5);

opacity: 0;

transition: all 1s ease-in-out 0.4s;

}

链接将使用大写字母，我们将悬停颜色设置为黄色：

.ch-info p a {

display: block;

color: rgba(255,255,255,0.7);

font-style: normal;

font-weight: 700;

text-transform: uppercase;

font-size: 9px;

letter-spacing: 1px;

padding-top: 4px;

font-family: 'Open Sans', Arial, sans-serif;

}

.ch-info p a:hover {

color: rgba(255,242,34, 0.8);

}

现在，有趣的悬停动作！ ".ch-item"的内阴影的尺寸从16px设置为1px：

.ch-item:hover {

box-shadow:

inset 0 0 0 1px rgba(255,255,255,0.1),

0 1px 2px rgba(0,0,0,0.1);

}

".ch-info"将淡入并缩放到1：

.ch-item:hover .ch-info {

transform: scale(1);

opacity: 1;

}

描述的段落p将会淡入(延迟)：

.ch-item:hover .ch-info p {

opacity: 1;

}

这是第一个例子！我们来看看下一个。

示例2

此示例中的HTML结构与第一个中的HTML结构相同。

在这个例子中，我们将使用".ch-item"的阴影来填充我们的圆并作为描述的背景。所以，这里没什么特别的，只是多了一个阴影值：

.ch-item {

width: 100%;

height: 100%;

border-radius: 50%;

position: relative;

cursor: default;

box-shadow:

inset 0 0 0 0 rgba(200,95,66, 0.4),

inset 0 0 0 16px rgba(255,255,255,0.6),

0 1px 2px rgba(0,0,0,0.1);

transition: all 0.4s ease-in-out;

}

背景图像：

.ch-img-1 {

}

.ch-img-2 {

}

.ch-img-3 {

}

".ch-info"将再次缩放：

.ch-info {

position: absolute;

width: 100%;

height: 100%;

border-radius: 50%;

overflow: hidden;

opacity: 0;

transition: all 0.4s ease-in-out;

transform: scale(0);

backface-visibility: hidden;

}

让我们设计文本元素的风格：

.ch-info h3 {

color: #fff;

text-transform: uppercase;

position: relative;

letter-spacing: 2px;

font-size: 22px;

margin: 0 30px;

padding: 65px 0 0 0;

height: 110px;

font-family: 'Open Sans', Arial, sans-serif;

text-shadow:

0 0 1px #fff,

0 1px 2px rgba(0,0,0,0.3);

}

.ch-info p {

color: #fff;

padding: 10px 5px;

font-style: italic;

margin: 0 30px;

font-size: 12px;

border-top: 1px solid rgba(255,255,255,0.5);

}

.ch-info p a {

display: block;

color: rgba(255,255,255,0.7);

font-style: normal;

font-weight: 700;

text-transform: uppercase;

font-size: 9px;

letter-spacing: 1px;

padding-top: 4px;

font-family: 'Open Sans', Arial, sans-serif;

}

.ch-info p a:hover {

color: rgba(255,242,34, 0.8);

}

在悬停时，我们会将内阴影(偏红的阴影)设置为110px展开半径。这将涵盖所有的圆：

.ch-item:hover {

box-shadow:

inset 0 0 0 110px rgba(200,95,66, 0.4),

inset 0 0 0 16px rgba(255,255,255,0.8),

0 1px 2px rgba(0,0,0,0.1);

}

我们将缩放".ch-info"并淡化它：

.ch-item:hover .ch-info {

opacity: 1;

transform: scale(1);

}

示例3

在这个例子中，我们将使用旋转。结构将与前两个示例略有不同，因为我们需要将".ch-thumb"添加为第二个分区。所以列表项看起来如下：

Music poster

by Jonathan Quintin View on Dribbble

".ch-item"的样式将与之前一样(带有微妙的阴影)：

.ch-item {

width: 100%;

height: 100%;

border-radius: 50%;

position: relative;

cursor: default;

box-shadow: 0 1px 3px rgba(0,0,0,0.2);

}

".ch-thumb"元素将具有特定的变换原点(位于右中间的某个位置)和过渡。这将是我们想要在悬停时向下旋转的元素，以便它显示".ch-info"元素：

.ch-thumb {

width: 100%;

height: 100%;

border-radius: 50%;

overflow: hidden;

position: absolute;

box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);

transform-origin: 95% 40%;

transition: all 0.3s ease-in-out;

}

使用伪类：创建一个带有径向渐变的小黄铜紧固件：

.ch-thumb:after {

content: '';

width: 8px;

height: 8px;

position: absolute;

border-radius: 50%;

top: 40%;

left: 95%;

margin: -4px 0 0 -4px;

background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);

box-shadow: 0 0 1px rgba(255,255,255,0.9);

}

让我们为每个".ch-thumb"元素定义背景图像：

.ch-img-1 {

z-index: 12;

}

.ch-img-2 {

z-index: 11;

}

.ch-img-3 {

z-index: 10;

}

".ch-info"元素的样式如下：

.ch-info {

position: absolute;

width: inherit;

height: inherit;

border-radius: 50%;

overflow: hidden;

background: #c9512e url(../images/noise.png);

box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);

}

文本元素将按以下方式定位和设置样式：

.ch-info h3 {

color: #fff;

text-transform: uppercase;

position: relative;

letter-spacing: 2px;

font-size: 18px;

margin: 0 60px;

padding: 22px 0 0 0;

height: 85px;

font-family: 'Open Sans', Arial, sans-serif;

text-shadow:

0 0 1px #fff,

0 1px 2px rgba(0,0,0,0.3);

}

.ch-info p {

color: #fff;

padding: 10px 5px;

font-style: italic;

margin: 0 30px;

font-size: 12px;

border-top: 1px solid rgba(255,255,255,0.5);

}

链接将是一个小圆圈，应该在悬停时从右侧移入：

.ch-info p a {

display: block;

color: #333;

width: 80px;

height: 80px;

background: rgba(255,255,255,0.3);

border-radius: 50%;

color: #fff;

font-style: normal;

font-weight: 700;

text-transform: uppercase;

font-size: 9px;

letter-spacing: 1px;

padding-top: 24px;

margin: 7px auto 0;

font-family: 'Open Sans', Arial, sans-serif;

opacity: 0;

transition:

transform 0.3s ease-in-out 0.2s,

opacity 0.3s ease-in-out 0.2s,

background 0.2s linear 0s;

transform: translateX(60px) rotate(90deg);

}

.ch-info p a:hover {

background: rgba(255,255,255,0.5);

}

由于我们希望移动和不透明度发生延迟，但背景悬停没有过渡，我们将分离过渡。

在悬停时，我们将旋转".ch-thumb"并移动/旋转链接元素：

.ch-item:hover .ch-thumb {

box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);

transform: rotate(-110deg);

}

.ch-item:hover .ch-info p a{

opacity: 1;

transform: translateX(0px) rotate(0deg);

}

示例4

第四个例子将涉及一些3D旋转。因此，我们需要调整结构，以便有一个容器用于透视和前面和后面。因此，列表项将如下所示：

Bears Type

by Josh Schott View on Dribbble

如您所见，我们将背景图像添加到".ch-item"以及".ch-info-front"。诀窍是给".ch-info-wrap"提供相同的背景。

这将产生幻觉，好像我们的".ch-item"有一个洞。

".ch-item"将具有以下的样式：

.ch-item {

width: 100%;

height: 100%;

border-radius: 50%;

position: relative;

box-shadow: 0 1px 2px rgba(0,0,0,0.1);

cursor: default;

}

".ch-info-wrap"将有透视属性，我们还将添加阴影的过渡：

.ch-info-wrap{

position: absolute;

width: 180px;

height: 180px;

border-radius: 50%;

perspective: 800px;

transition: all 0.4s ease-in-out;

top: 20px;

left: 20px;

background: #f9f9f9 url(../images/bg.jpg);

box-shadow:

0 0 0 20px rgba(255,255,255,0.2),

inset 0 0 3px rgba(115,114, 23, 0.8);

}

".ch-info"将需要preserve-3d值用于变换样式，我们将给它一个过渡，因为这是我们将在3d中旋转的元素：

.ch-info{

position: absolute;

width: 180px;

height: 180px;

border-radius: 50%;

transition: all 0.4s ease-in-out;

transform-style: preserve-3d;

}

正面和背面将具有以下常见样式：

.ch-info > div {

display: block;

position: absolute;

width: 100%;

height: 100%;

border-radius: 50%;

background-position: center center;

backface-visibility: hidden;

}

背面将旋转，以便我们开始不会看到它：

.ch-info .ch-info-back {

transform: rotate3d(0,1,0,180deg);

background: #000;

}

再次，背景图片：

.ch-img-1 {

}

.ch-img-2 {

}

.ch-img-3 {

}

...和文本元素：

.ch-info h3 {

color: #fff;

text-transform: uppercase;

letter-spacing: 2px;

font-size: 14px;

margin: 0 15px;

padding: 40px 0 0 0;

height: 90px;

font-family: 'Open Sans', Arial, sans-serif;

text-shadow:

0 0 1px #fff,

0 1px 2px rgba(0,0,0,0.3);

}

.ch-info p {

color: #fff;

padding: 10px 5px;

font-style: italic;

margin: 0 30px;

font-size: 12px;

border-top: 1px solid rgba(255,255,255,0.5);

}

.ch-info p a {

display: block;

color: rgba(255,255,255,0.7);

font-style: normal;

font-weight: 700;

text-transform: uppercase;

font-size: 9px;

letter-spacing: 1px;

padding-top: 4px;

font-family: 'Open Sans', Arial, sans-serif;

}

.ch-info p a:hover {

color: rgba(255,242,34, 0.8);

}

在悬停时，我们将更改".ch-info-wrap"的阴影并旋转".ch-info"，以便我们看到背面：

.ch-item:hover .ch-info-wrap {

box-shadow:

0 0 0 0 rgba(255,255,255,0.8),

inset 0 0 3px rgba(115,114, 23, 0.8);

}

.ch-item:hover .ch-info {

transform: rotate3d(0,1,0,-180deg);

}

示例5

在此示例中，我们希望将".ch-thumb"缩小为0，并通过将其淡入并将其缩小为1来显示".ch-info"。第五示例的结构与前一示例中的相同。

该".ch-item"具有以下的风格：

.ch-item {

width: 100%;

height: 100%;

border-radius: 50%;

position: relative;

box-shadow: 0 1px 2px rgba(0,0,0,0.1);

cursor: default;

}

".ch-info-wrap"和".ch-info"将具有以下常见样式：

.ch-info-wrap,

.ch-info{

position: absolute;

width: 180px;

height: 180px;

border-radius: 50%;

}

让我们通过将相同的背景设置给".ch-info-wrap"来再次执行“漏洞”技巧：

.ch-info-wrap {

top: 20px;

left: 20px;

background: #f9f9f9 url(../images/bg.jpg);

box-shadow:

0 0 0 20px rgba(255,255,255,0.2),

inset 0 0 3px rgba(115,114, 23, 0.8);

}

常见的样式是“前面”和“背面”(它不再是正面和背面)：

.ch-info > div {

display: block;

position: absolute;

width: 100%;

height: 100%;

border-radius: 50%;

background-position: center center;

}

“前面”将有一个过渡(它会缩小并消失)：

.ch-info .ch-info-front {

transition: all 0.6s ease-in-out;

}

".ch-info-back"最初将具有0不透明度并且可以扩展到1.5：

.ch-info .ch-info-back {

opacity: 0;

background: #223e87;

pointer-events: none;

transform: scale(1.5);

transition: all 0.4s ease-in-out 0.2s;

}

我们需要将pointer-events设置为none，因为我们不希望元素“阻塞”其他所有内容...记住，它被放大，我们因为它的不透明性而无法看到它，但它仍然存在。

像往常一样的背景图像和文本元素，只是有一些不同的颜色：

.ch-img-1 {

}

.ch-img-2 {

}

.ch-img-3 {

}

.ch-info h3 {

color: #fff;

text-transform: uppercase;

letter-spacing: 2px;

font-size: 18px;

margin: 0 15px;

padding: 40px 0 0 0;

height: 80px;

font-family: 'Open Sans', Arial, sans-serif;

text-shadow:

0 0 1px #fff,

0 1px 2px rgba(0,0,0,0.3);

}

.ch-info p {

color: #fff;

padding: 10px 5px 0;

font-style: italic;

margin: 0 30px;

font-size: 12px;

border-top: 1px solid rgba(255,255,255,0.5);

}

.ch-info p a {

display: block;

color: #e7615e;

font-style: normal;

font-weight: 700;

text-transform: uppercase;

font-size: 9px;

letter-spacing: 1px;

padding-top: 4px;

font-family: 'Open Sans', Arial, sans-serif;

}

.ch-info p a:hover {

color: #fff;

}

在悬停时，我们将缩小".ch-info-front"部分为0并将不透明度设置为0.这将使其消失在后面。

.ch-item:hover .ch-info-front {

transform: scale(0);

opacity: 0;

}

".ch-info-back"将缩小为1并淡入。我们还将pointer event事件设置为auto，因为现在我们希望能够单击链接：

.ch-item:hover .ch-info-back {

transform: scale(1);

opacity: 1;

pointer-events: auto;

}

示例6

在此示例中，我们希望向下翻转内部".ch-thumb"部分以显示描述。 HTML将与前两个示例中的相同。

".ch-item"将按以前的样式设置：

.ch-item {

width: 100%;

height: 100%;

border-radius: 50%;

position: relative;

box-shadow: 0 1px 2px rgba(0,0,0,0.1);

cursor: default;

}

The common style of the wrapper and the description element:

".ch-info-wrap", ".ch-info"元素的通用样式：

.ch-info-wrap,

.ch-info{

position: absolute;

width: 180px;

height: 180px;

border-radius: 50%;

transition: all 0.4s ease-in-out;

}

".ch-info-wrap"将具有透视：

.ch-info-wrap {

top: 20px;

left: 20px;

background: #f9f9f9 url(../images/bg.jpg);

box-shadow:

0 0 0 20px rgba(255,255,255,0.2),

inset 0 0 3px rgba(115,114, 23, 0.8);

perspective: 800px;

}

".ch-info"元素需要以下转换样式：

.ch-info {

transform-style: preserve-3d;

}

正面和背面将有一个过渡。请注意，这次我们不会将backface-visibility设置为hidden，因为我们希望".ch-thumb"的背面在我们向下翻转时显示：

.ch-info > div {

display: block;

position: absolute;

width: 100%;

height: 100%;

border-radius: 50%;

background-position: center center;

transition: all 0.6s ease-in-out;

}

让我们设置正确的transform-origin，以便我们可以打开它：

.ch-info .ch-info-front {

transform-origin: 50% 100%;

z-index: 100;

box-shadow:

inset 2px 1px 4px rgba(0,0,0,0.1);

}

我们将为".ch-info-back"设置一个0不透明度的RGBA值：

.ch-info .ch-info-back {

background: rgba(230,132,107,0);

}

和其他元素的通常风格：

.ch-img-1 {

}

.ch-img-2 {

}

.ch-img-3 {

}

.ch-info h3 {

color: #fff;

text-transform: uppercase;

letter-spacing: 2px;

font-size: 14px;

margin: 0 25px;

padding: 40px 0 0 0;

height: 90px;

font-family: 'Open Sans', Arial, sans-serif;

text-shadow:

0 0 1px #fff,

0 1px 2px rgba(0,0,0,0.3);

}

.ch-info p {

color: #fff;

padding: 10px 5px;

font-style: italic;

margin: 0 30px;

font-size: 12px;

border-top: 1px solid rgba(255,255,255,0.5);

}

.ch-info p a {

display: block;

color: rgba(255,255,255,0.7);

font-style: normal;

font-weight: 700;

text-transform: uppercase;

font-size: 9px;

letter-spacing: 1px;

padding-top: 4px;

font-family: 'Open Sans', Arial, sans-serif;

}

.ch-info p a:hover {

color: rgba(255,242,34, 0.8);

}

在悬停时，我们将旋转前部并略微为阴影设置动画。后部将以其背景颜色淡化：

.ch-item:hover .ch-info-front {

transform: rotate3d(1,0,0,-180deg);

box-shadow:

inset 0 0 5px rgba(255,255,255,0.2),

inset 0 0 3px rgba(0,0,0,0.3);

}

.ch-item:hover .ch-info-back {

background: rgba(230,132,107,0.6);

}

示例7

最后一个示例将像旋转立方体一样，我们通过从顶部向后旋转它来显示描述。由于我们将旋转每个面，因此我们不需要额外的父级元素。因此，我们的HTML将如下所示：

Mouse

by Alexander Shumihin View on Dribbble

我们将为".ch-item"提供透视值：

.ch-item {

width: 100%;

height: 100%;

border-radius: 50%;

position: relative;

cursor: default;

perspective: 900px;

}

".ch-info"将需要preserve-3d值：

.ch-info{

position: absolute;

width: 100%;

height: 100%;

transform-style: preserve-3d;

}

正面和背面将具有过渡，变换原点将设置为50％0％：

.ch-info > div {

display: block;

position: absolute;

width: 100%;

height: 100%;

border-radius: 50%;

background-position: center center;

transition: all 0.4s linear;

transform-origin: 50% 0%;

}

让我们为前面部分设置一个漂亮的内阴影：

.ch-info .ch-info-front {

box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);

}

背面将在最初旋转，以显示为立方体的下表面：

.ch-info .ch-info-back {

transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);

background: #000;

opacity: 0;

}

背景图像和文本元素的通常风格：

.ch-img-1 {

}

.ch-img-2 {

}

.ch-img-3 {

}

.ch-info h3 {

color: #fff;

text-transform: uppercase;

letter-spacing: 2px;

font-size: 24px;

margin: 0 15px;

padding: 60px 0 0 0;

height: 110px;

font-family: 'Open Sans', Arial, sans-serif;

text-shadow:

0 0 1px #fff,

0 1px 2px rgba(0,0,0,0.3);

}

.ch-info p {

color: #fff;

padding: 10px 5px;

font-style: italic;

margin: 0 30px;

font-size: 12px;

border-top: 1px solid rgba(255,255,255,0.5);

}

.ch-info p a {

display: block;

color: rgba(255,255,255,0.7);

font-style: normal;

font-weight: 700;

text-transform: uppercase;

font-size: 9px;

letter-spacing: 1px;

padding-top: 4px;

font-family: 'Open Sans', Arial, sans-serif;

}

.ch-info p a:hover {

color: rgba(255,242,34, 0.8);

}

我们将使用translate3d在3d空间的Y轴上移动前部，并使用rotate3d实际旋转它。我们也会淡出它，因为我们之后不希望看到它的任何部分：

.ch-item:hover .ch-info-front {

transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);

opacity: 0;

}

背面将“向后”旋转到0度(记住，最初它向下旋转)：

.ch-item:hover .ch-info-back {

transform: rotate3d(1,0,0,0deg);

opacity: 1;

}

就是这样！一大堆悬停效果，允许许多不同的变化，快去尝试一下吧！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

兔肉菌

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html背景图变圆圈,使用CSS Transitions实现圆形悬停效果的示例代码

本文介绍了在今天的教程中，我们将在圆上试验悬停效果。自从有了border- radius属性，我们可以创建圆形形状，并且它们作为设计元素更常出现在网站中。我特别喜欢看到的一个用途是圆形缩略图，它看起来比通常的矩形更有趣。因为圆是如此特殊的形状，我们将为它创造一些特殊的悬停效果！我们将在本教程中省略浏览器前缀。但你当然会在下载文件中找到它们。那么，让我们开始吧！HTML结构对于大多数示例，我...
复制链接

扫一扫