javascript - 内部にテキストを含む CSS3 円を作成する

Question

CSS3 の円の中にテキストを追加しようとしています。しかし、テキストは円の比率の外側にあります。円にカーソルを合わせると色が変わりますが、テキストも消えるようにしたいと思います。

エクストラ: マウスが上にあるときに円を脈動させる方法はありますか? jquery または javascript は必要ですか?

<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>

score 1 · Accepted Answer

スパンスタイルセットで：

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

そして取り除くtext-indent: -9000px;

テキストを非表示にするには、ホバー時の背景色と同じ色を設定します。

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

デモ

円を脈動させたい場合は、単純な遷移ではなく、ホバーにアニメーション(MDN Docs)を使用することを検討してください。

score 0 · Accepted Answer

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: "";
}

デモ

今のところ、これはホバー時に拡大縮小し、色が変わるだけです。脈動とはどういう意味ですか？キーフレーム付きの脈動

score 0 · Accepted Answer

CSS3 を使用して、CSS だけで脈動させることができanimationsます。詳細はこちら.

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

javascript - 内部にテキストを含む CSS3 円を作成する

4 に答える 4

Related

Reference