php - 如何在opencart主题中创建一个带有翻转效果的心形按钮来替换添加到收藏夹

标签 php css themes e-commerce opencart

我们正在尝试用类似于 FAB.com 的心形 css 按钮替换添加到收藏夹按钮

创建心形CSS的代码是

这个网站

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

现在让它成为可能,如果这个人将它设为最喜欢它,它会保持红色但没有翻转它只是心脏周围的红色边框。

最佳答案

我不是 CSS 专家,但这是我的想法:

同时使用:

.heart and .heartwhite

工作示例: http://jsfiddle.net/nwznn/

但如果你问我,我会坚持图片

关于php - 如何在opencart主题中创建一个带有翻转效果的心形按钮来替换添加到收藏夹,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17297182/

相关文章:

具有透明/Alpha 背景的 PHP GD 文本

php - 我应该将应用程序设置存储在一列数组中吗?或者创建一个多列表?

javascript - PHP:在有限的时间后自动点击提交按钮

javascript - 网站速度真的很慢,不知道是什么减慢了速度

javascript - 如何获取 .NET 主题引用的 javascript 文件?

delphi - 在位图样式设计器中更改字体

php - Laravel 5.5 - where 访问关系

javascript - 可平移 Canvas 效果

css - 寻找一种在 table 后面放置一盒颜色的简单方法

javascript - 如何从 href 获取数据到字符串并在之后使用它