1. ホーム
  2. 質問と答え
  3. 境界線の右と左の色が透明になると、線がFFに表示されます

境界線の右と左の色が透明になると、線がFFに表示されます

2017-05-28 22 views
0

iは境界スタイルを使用してCSSで半円を作成しました。円を作るために、私は右と左の境界線の色を透明にし、クロムでうまく動作しますが、Firefoxでは円の中にいくつかの線が入っています。これについて誰もが考えている？ここ境界線の右と左の色が透明になると、線がFFに表示されます

リンク codepen.io/imarun/pen/ggOdoN

body { 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 64px; 
 
} 
 

 
.outer { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    width: 200px; 
 
    height: 100px; 
 
    margin-left: -50px; 
 
    margin-top: -50px; 
 
} 
 
.outer p { 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    line-height: 100px; 
 
    background: antiquewhite; 
 
    border-radius: 10%; 
 
} 
 
.outer p:hover .round:before { 
 
    -webkit-transform: rotate(225deg) scale(0.5) translate(-10px, -10px); 
 
      transform: rotate(225deg) scale(0.5) translate(-10px, -10px); 
 
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.9); 
 
} 
 
.outer p:hover .round:after { 
 
    -webkit-transform: rotate(0deg); 
 
      transform: rotate(0deg); 
 
} 
 
.outer p:hover .dots:before, 
 
.outer p:hover .dots:after { 
 
    -webkit-transform: scaleY(1); 
 
      transform: scaleY(1); 
 
} 
 

 
.round { 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    left: 80px; 
 
    top: 24px; 
 
    border-radius: 50%; 
 
    border: 1px solid black; 
 
    border-right-color: transparent; 
 
    z-index: 100; 
 
} 
 
.round:before { 
 
    position: absolute; 
 
    content: ""; 
 
    display: block; 
 
    border: 25px solid grey; 
 
    border-right-color: transparent; 
 
    border-bottom-color: transparent; 
 
    -webkit-transform: rotate(45deg) scale(1) translate(0, 0); 
 
      transform: rotate(45deg) scale(1) translate(0, 0); 
 
    -webkit-transition: -webkit-transform 0.5s ease-in; 
 
    transition: -webkit-transform 0.5s ease-in; 
 
    transition: transform 0.5s ease-in; 
 
    transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in; 
 
    top: 0; 
 
    border-radius: 50%; 
 
    z-index: 90; 
 
} 
 
.round:after { 
 
    position: absolute; 
 
    content: ""; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: -1px; 
 
    left: -1px; 
 
    border-radius: 50%; 
 
    border: 1px solid transparent; 
 
    border-right-color: black; 
 
    z-index: 99; 
 
    -webkit-transition: -webkit-transform 0.5s ease-in; 
 
    transition: -webkit-transform 0.5s ease-in; 
 
    transition: transform 0.5s ease-in; 
 
    transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in; 
 
    -webkit-transform: rotate(-45deg); 
 
      transform: rotate(-45deg); 
 
} 
 
.round .dots { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.round .dots:before, 
 
.round .dots:after { 
 
    position: absolute; 
 
    content: ""; 
 
    top: 35%; 
 
    left: 25%; 
 
    width: 5px; 
 
    height: 5px; 
 
    background: black; 
 
    border-radius: 50%; 
 
    -webkit-transform: scaleY(0); 
 
      transform: scaleY(0); 
 
    -webkit-transition: -webkit-transform 0.3s 0.7s ease; 
 
    transition: -webkit-transform 0.3s 0.7s ease; 
 
    transition: transform 0.3s 0.7s ease; 
 
    transition: transform 0.3s 0.7s ease, -webkit-transform 0.3s 0.7s ease; 
 
} 
 
.round .dots:after { 
 
    right: 25%; 
 
    left: auto; 
 
} 
 
.round.round1 { 
 
    left: 140px; 
 
}
<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
 

 
    <style> 
 
    </style> 
 

 
</head> 
 
<div class="outer"> 
 
    <p>FR 
 
    <span class="round"> 
 
     <span class="dots"></span> 
 
    </span> 
 

 
    <span class="round round1"> 
 
     <span class="dots"></span> 
 
    </span> 
 
    </p> 
 
</div> 
 

 
<!-- <?xml version="1.0" encoding="utf-8"?> 
 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t width="285.333px" height="286.667px" viewBox="0 0 285.333 286.667" enable-background="new 0 0 285.333 286.667" 
 
\t xml:space="preserve"> 
 

 
\t <style> 
 
\t \t \t svg *{ 
 
\t \t \t -moz-transition:all 0.3s ease-out; 
 
\t \t \t -o-transition:all 0.3s ease-out; 
 
\t \t \t -webkit-transition:all 0.3s ease-out; 
 
\t \t \t \t transition:all 0.3s ease-out; 
 
\t \t \t } 
 

 
\t \t \t svg:hover .cutpart{ 
 
\t \t \t \t transform: translate(62px); 
 
\t \t \t } 
 
\t </style> 
 

 
<g> 
 
\t <path fill="none" stroke="#3FA9F5" stroke-width="5" stroke-miterlimit="10" d="M281.258,142.812 
 
\t \t c0-76.62-62.113-138.732-138.732-138.732S3.793,66.192,3.793,142.812s62.113,138.732,138.732,138.732 
 
\t \t c31.112,0,59.832-10.241,82.972-27.536"/> 
 
\t <path class="cutpart" fill="none" stroke="#3FA9F5" stroke-width="5" stroke-miterlimit="10" d="M225.498,254.008 
 
\t \t c24.46-18.281,42.687-44.444,50.916-74.724c3.158-11.622,4.844-23.85,4.844-36.472"/> 
 
\t <circle fill="#FFFFFF" stroke="#3FA9F5" stroke-width="5" stroke-miterlimit="10" cx="89.147" cy="94.967" r="10.058"/> 
 
\t <circle fill="#FFFFFF" stroke="#3FA9F5" stroke-width="5" stroke-miterlimit="10" cx="197.147" cy="94.967" r="10.058"/> 
 
\t <path fill="#2375AD" stroke="#3FA9F5" stroke-miterlimit="10" d="M68.765,164.833c0,41,33.024,73.761,73.761,73.761 
 
\t \t c40.737,0,73.761-32.761,73.761-73.761H68.765z"/> 
 
\t <path fill="#144F70" d="M81.765,170.833c0,33,27.203,60.761,60.761,60.761c33.557,0,60.761-27.761,60.761-60.761H81.765z"/> 
 
</g> 
 
</svg> -->

出典

2017-05-28 Arun

+0

を丸めるとの組み合わせで、私の答えは働いて受け入れることができるなら、私に知らせていることを解決

、そうでなければ私はそれを削除します。 – LGSon

+0

それは仕事をしませんでした@LGSon – Arun

+0

@LGSonあなたの答えを入れてください、私はtransfrom回転と目の中でテストをしなかったので...あなたの答えを入れて... :) – Arun

答えて

1

あなたはそれらの "e" の看板を作成する方法を簡素化した場合、あなたはそれらの問題

側の注意点を取得することはありません：元のコードの問題は、.roundの擬似規則のborderを設定する方法にあります。たとえば、赤い背景を与えると、白い線が赤くなるので、これはアンチエイリアスの問題だと思います。私が代わりに背景色を使用して、左上と右の境界

.outer p { 
 
    font-size: 64px; 
 
    margin: 0; 
 
} 
 
.outer p > span { 
 
    position: relative; 
 
    display: inline-block; 
 
    top: 2px; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.outer p > span + span { 
 
    margin-left: 7px; 
 
} 
 
.outer p > span::after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; top: 0; 
 
    height: 50%; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    border-width: 1px 1px 0 1px; 
 
    background: gray; 
 
    border-top-left-radius: 50px; 
 
    border-top-right-radius: 50px; 
 
    transition: transform 0.5s; 
 
    transform-origin: center bottom; 
 
} 
 
.outer p > span::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    border-right-color: transparent; 
 
    border-radius: 50%; 
 
    transform: rotate(10deg); 
 
    transition: border-color 0.5s; 
 
} 
 

 
.outer p > span span { 
 
    position: relative; 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.outer p > span span::before, 
 
.outer p > span span::after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 15px; top: 15px; 
 
    width: 5px; 
 
    height: 5px; 
 
    background: gray; 
 
    border-radius: 50%; 
 
    transform: scaleY(0); 
 
    transition: transform 0.2s 0.3s; 
 
} 
 
.outer p > span span::after { 
 
    left: 30px; 
 
} 
 

 
.outer p:hover > span::before { 
 
    border-right-color: black; 
 
} 
 
.outer p:hover > span::after { 
 
    color: black; 
 
    transform: translateY(10%) scale(0.6) rotate(180deg); 
 
} 
 
.outer p:hover > span span::before, 
 
.outer p:hover > span span::after { 
 
    transform: scaleY(1); 
 
}
<div class="outer"> 
 
    <p>FR<span><span></span></span><span><span></span></span> 
 
    </p> 
 
</div>

出典

2017-05-28 09:43:27 LGSon

+0

答えてくれてありがとう@LGSonしかし、どのように白い線がどこから来るのか教えていただけますか？ – Arun

+0

ありがとう@LGSonこれは私が期待しているものです。大きな助け!!! – Arun

関連する問題

 関連する問題