开源项目 > 其他开源 > 图书/手册/教程 &&

加入 Gitee

与超过 1200万开发者一起发现、参与优秀开源项目，私有仓库也完全免费：）

克隆/下载

hotspot-like.md 1.36 KB

# 其他多边形

?> 背景知识：:point_right: [box-sizing](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform)

> *{ box-sizing: border-box; }

<vuep template="#hotspot-like"></vuep>

<script v-pre type="text/x-template" id="hotspot-like">
<style>
  main{
    width: 100%;
    padding: 60px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .like {
    width: 100px; height: 100px;
    background: url("https://cssanimation.rocks/images/posts/steps/heart.png") no-repeat;
    background-position: 0 0;
    cursor: pointer;
    transition: background-position 1s steps(28);
    transition-duration: 0s;
  }
  .like:active {
    transition-duration: 1s;
    background-position: -2800px 0;
  }
</style>
<template>
  <main>
    <div class="like"></div>
  </main>
</template>
<script>  
</script>
</script>

### 浏览器支持

<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css3-boxsizing&amp;periods=future_1,current,past_1,past_2,past_3&amp;accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>

<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=transforms3d&amp;periods=future_1,current,past_1,past_2,past_3&amp;accessible-colours=false" frameborder="0" width="100%" height="480px"></iframe>

一键复制编辑原始数据按行查看历史

提交于 2018-04-08 10:16 . :wrench:style: amend id of vuep'template

其他多边形

?> 背景知识： box-sizing, transform

*{ box-sizing: border-box; }

<script v-pre type="text/x-template" id="hotspot-like"> <style> main{ width: 100%; padding: 60px 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .like { width: 100px; height: 100px; background: url("https://cssanimation.rocks/images/posts/steps/heart.png") no-repeat; background-position: 0 0; cursor: pointer; transition: background-position 1s steps(28); transition-duration: 0s; } .like:active { transition-duration: 1s; background-position: -2800px 0; } </style>

<script> </script> </script>

浏览器支持

<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css3-boxsizing&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe> <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=transforms3d&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="480px"></iframe>

CSS

1

https://gitee.com/lhammer/You-need-to-know-css.git

git@gitee.com:lhammer/You-need-to-know-css.git

lhammer

You-need-to-know-css

You-need-to-know-css

master