用里面的文字创建CSS3圈子

时间：2013-09-01 18:45:37

标签： javascript jquery css css3

我正在尝试在CSS3圈子中添加文字。但是文本超出了圈子的比例。当我将鼠标悬停在圆圈上时，它会改变颜色，但我也希望文本也能消失。

额外：有没有办法在鼠标悬停时创建圆形脉动？ jquery或javascript是否必要？

示例：http://jsfiddle.net/jqEzZ/2/ 

<style>

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

.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;
}

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

.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;
}

.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;
}

.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;
}

</style>

HTML 

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

4 个答案:

答案 0 :(得分：1)

在你的范围集中：

.cn-nav a span {
    overflow: hidden;
    ….
}

并删除text-indent: -9000px;

要使文本消失，请将颜色设置为等于悬停时的背景颜色：

.cn-nav a:hover span {
    ...
    background-color:#a8872d;
    color: #a8872d;
}

Demo

如果您希望圆圈产生脉动，请查看使用动画(MDN Docs)进行悬停而不是简单的过渡。

答案 1 :(得分：0)

使用CSS3 animations可以使用纯粹的CSS进行脉动。 Learn more here

JSfiddle：http://jsfiddle.net/Q3gMS/1/

HTML：

<div class="cn-nav">
<a href="#" class="cn-nav-prev">
    <p>Click ME!</p>
<span></span>
<div style="background-image:url(images/1.jpg);"></div>
</a>
</div>

CSS：

.cn-nav > a {
    position: absolute;
    top: 0px;
    height: 70px;
    width: 70px;
}
a.cn-nav-prev {
    left: 0px;
}
a.cn-nav-next {
    right: 0px;
}
.cn-nav a span {
    width: 46px;
    height: 46px;
    display: block;
    text-indent: -9000px;
    border-radius: 23px;
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    opacity: 0.9;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-background-size: 17px 25px;
    -moz-background-size: 17px 25px;
    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;
}
.cn-nav a p {
    display: block;
    height: 70px;
    width: 70px;
    line-height: 70px;
    text-align: center;
    margin: 0;
    padding: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: opacity 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
    -ms-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
}
.cn-nav a:hover p {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}
.cn-nav a:hover span {
    -webkit-animation: pulsate 1s infinite;
    -moz-animation: pulsate 1s infinite;
    -ms-animation: pulsate 1s infinite;
    -o-animation: pulsate 1s infinite;
    animation: pulsate 1s infinite;
}
@keyframes "pulsate" {
 0% {
    background-color: #a8872d;
 }
 50% {
    background-color: red;
 }
 100% {
    background-color: #a8872d;
 }
}
@-moz-keyframes pulsate {
 0% {
   background-color: #a8872d;
 }
 50% {
   background-color: red;
 }
 100% {
   background-color: #a8872d;
 }
}
@-webkit-keyframes "pulsate" {
 0% {
   background-color: #a8872d;
 }
 50% {
   background-color: red;
 }
 100% {
   background-color: #a8872d;
 }
}
@-ms-keyframes "pulsate" {
 0% {
   background-color: #a8872d;
 }
 50% {
   background-color: red;
 }
 100% {
   background-color: #a8872d;
 }
}
@-o-keyframes "pulsate" {
 0% {
   background-color: #a8872d;
 }
 50% {
   background-color: red;
 }
 100% {
   background-color: #a8872d;
 }
}
.cn-nav a.cn-nav-prev span {
    background: #666 url(../images/prev.png) no-repeat center center;
}
.cn-nav a div {
    width: 0px;
    height: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 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;
}
.cn-nav a:hover span {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
    opacity: 0.6;
    margin: -50px 0 0 -50px;
    -webkit-background-size: 22px 32px;
    -moz-background-size: 22px 32px;
    background-size: 22px 32px;
    background-color: #a8872d;
}
.cn-nav a:hover div {
    width: 90px;
    height: 90px;
    -webkit-background-size: 120% 120%;
    -moz-background-size: 120% 120%;
    background-size: 120% 120%;
    margin: -45px 0 0 -45px;
    border-radius: 45px;
}

答案 2 :(得分：0)

我无法看到您正在使用哪种图片作为背景图片，但我知道如何将文字放在圆圈内并将其隐藏在悬停中。 我想我会使用伪元素来解决这个问题，因为你可以将文本放在链接中并使其居中。 在悬停时，您可以放置​​不透明度：0或清空内容（内容：“”;）

我确实简化了标记，只是为了向您展示我是如何使用伪元素解决它的。

http://dabblet.com/gist/6406590

答案 3 :(得分：0)

<强> HTML 

<a class="circle"></a>

<强> CSS 

.circle {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: #bada55;
    display: block;
    border-radius: 50%;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.circle:after {
    content: "Hover Here";
    position: absolute;
    width: 100%;
    text-align: center;
    top: 40%;
}
.circle:hover {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    background: #82983b;
}
.circle:hover:after {
    content: "";
}

<强> DEMO

现在，这只是在悬停时缩放并改变颜色。脉搏是什么意思 - 有点像这样？ Pulsate w/ Keyframes

相关问题
最新问题