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