2

お気に入りに追加ボタンを FAB.com のようなハート型の css ボタンに置​​き換えようとしています。

ハートシェイプCSSを作成するコードは

このcs

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Creating Heart using CSS3 </title> 
    <style type="text/css"> 
      #heart { 
        position: relative; 
        width: 100px; 
        height: 90px; 
      } 

      #heart:before, #heart:after { 
        position: absolute; 
        content: ""; 
        left: 50px; 
        top: 0; 
        width: 50px; 
        height: 80px; 
        background: red; 
        border-radius: 50px 50px 0 0; 
        -webkit-transform: rotate(-45deg); 
        -moz-transform: rotate(-45deg); 
        -ms-transform: rotate(-45deg); 
        -o-transform: rotate(-45deg); 
        transform: rotate(-45deg); 
       -webkit-transform-origin: 0 100%; 
       -moz-transform-origin: 0 100%; 
       -ms-transform-origin: 0 100%; 
       -o-transform-origin: 0 100%; 
       transform-origin: 0 100%; 
     } 

      #heart:after { 
        left: 0; 
        -webkit-transform: rotate(45deg); 
        -moz-transform: rotate(45deg); 
        -ms-transform: rotate(45deg); 
        -o-transform: rotate(45deg); 
       transform: rotate(45deg); 
       -webkit-transform-origin: 100% 100%; 
       -moz-transform-origin: 100% 100%; 
       -ms-transform-origin: 100% 100%; 
       -o-transform-origin: 100% 100%; 
       transform-origin :100% 100%; 
     } 
  </style> 
</head>

HTML :

<body> 
      <div id="heart"></div> 
    </body> 
    </html>

人がそれをお気に入りにした場合、それは赤のままですが、ロールオーバーがない場合は、ハートの周りに赤い境界線が表示されるようになりました。

4

1 に答える 1

1

私はCSSの専門家ではありませんが、私の考えは次のとおりです。

両方を使う：

.heart and .heartwhite

作業例: http://jsfiddle.net/nwznn/

でも私に言わせれば、私はイメージに固執します

于 2013-06-25T12:45:09.990 に答える