CSS clip-path in action



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue-clap-button demo</title>

</head>

<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>

<script src='https://cdn.jsdelivr.net/gh/AJLoveChina/vue-clap-button/dist/vue-clap-button.js'></script>

<div id="app">

  <vue-clap-button class="icon"></vue-clap-button>

  <vue-clap-button class="icon" icon="love"></vue-clap-button>

  <vue-clap-button class="icon" icon="star"></vue-clap-button>

  <vue-clap-button class="icon" icon="good" :size="30"></vue-clap-button>

  <vue-clap-button class="icon" icon="love" :size="30"></vue-clap-button>

  <vue-clap-button class="icon" icon="star" :size="30"></vue-clap-button>

</div>

<style>

  body {

    background-color:white;

  }

  #app{

    margin:40px;

  }

  .icon{

    display: inline-block;

    vertical-align: middle;

    margin:0 15px;

  }

</style>

<script>

  new Vue({

    el: "#app"

  })

</script>

</body>

</html>

https://jsbin.com/kapomaw/edit?html,output

refs

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

CSS clip-path in action的更多相关文章

  1. CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具，可以直接生成SVG代码以及配合Mask制作蒙板。

    CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...

  2. CSS clip:rect矩形剪裁功能及一些应用介绍

    CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...

  3. CSS Clip剪切元素动画实例

    1.CSS .fixed { position: fixed; width: 90px; height: 90px; background: red; border: 0px solid blue; ...

  4. CSS Grid Layout In Action

    CSS Grid Layout In Action CSS 异形网格布局实战 refs https://static-nginx-online.fbcontent.cn/tutor/tutor-ybc ...

  5. [ javascript css clip ] javascript css clip 的奇思妙想之文字拼接效果

      语法: clip : auto | rect ( number number number number ) 参数: auto : 对象无剪切 rect ( number number numbe ...

  6. 将CSS CLIP属性应用在：扩展覆盖效果

    我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡.这个想法是为了实现某种叠加效果,好像它实际上在各个元素的下面.点击其中一个元素将创建一个切断 ...

  7. CSS Clip剪切元素实例

    一.实例1: .fixed { position: fixed; width: 382px; height: 100px; background: red; border: 1px solid blu ...

  8. CSS Clip属性

    Clip属性在W3C官网是这样进行描述的:“通过对元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了clip属性”. .selector { c ...

  9. 理解CSS Clip属性及用法

    应用Clip属性实现的一个简单效果图: 样式写法: .my-element { position: absolute; clip: rect(10px  350px  170px  0); /* IE ...

  10. CSS clip:rect矩形剪裁功能及应用

    .clip{ position:absolute; clip: rect(10px 30px 20px 10px); } 最后有必要说明下:clip:rect矩形剪裁只能作用于position:abs ...

随机推荐

  1. h3c交换机配置ssh密码验证登录方式

    一.背景: 1.由于PC机串口不支持热插拔,请不要在交换机带电的情况下,将串口插入或者拔出PC机.当连接PC和交换机时,请先安装配置电缆的DB-9端到PC机,再连接RJ-45到交换机:在拆下时,先拔出 ...

  2. history附上时间戳，history命令_Linux history命令：查看和执行历史命令

    起因是这样的,一台机器客户反馈连接不上,说没有任何操作.好吧,排查吧. 1.第一步先看网络是否通: 从图中可以看到一开始是一直不通的.然后就通了,问了客户有没操作重启什么的结果说没有任何操作,还让给个 ...

  3. CSS Color Adjustment Module Level 1

    CSS Color Adjustment Module Level 1 https://drafts.csswg.org/css-color-adjust-1/ DarkMode 适配指南 | 微信开 ...

  4. ShardingSphere内核原理 原创 鸽子 架构漫谈 2021-01-09

    ShardingSphere内核原理 原创 鸽子 架构漫谈 2021-01-09

  5. PB 级大规模 Elasticsearch 集群运维与调优实践

    PB 级大规模 Elasticsearch 集群运维与调优实践 https://mp.weixin.qq.com/s/PDyHT9IuRij20JBgbPTjFA | 导语 腾讯云 Elasticse ...

  6. Go GC: Latency Problem Solved

    https://talks.golang.org/2015/go-gc.pdf https://www.oschina.net/translate/go-gc-solving-the-latency- ...

  7. ThinkPHP3.2.4 order方法注入

    漏洞详情: 漏洞文件:./ThinkPHP\Library\Think\Db\Driver.class.php 中的 parseOrder方法: 这也是继上次order方法注入之后的修复手段. 可以看 ...

  8. ubuntu中如何安装selenium+chrome(headless)无界面浏览器？

    selenium是一个Web的自动化测试工具,它可以根据我们的指令,让浏览器自动加载页面,获取需要的数据,甚至页面截屏,或者判断网站上某些动作是否发生.但是它自身不带浏览器,不支持浏览器的功能,因此它 ...

  9. Language Guide (proto3) | proto3 语言指南（十三）JSON映射

    JSON Mapping - JSON映射 Proto3支持JSON中的规范编码,使得在系统之间共享数据更加容易.下表按类型对编码进行了描述. 如果JSON编码的数据中缺少一个值或者它的值为null, ...

  10. Spring Boot 2.x基础教程：使用JTA实现多数据源的事务管理

    在一个Spring Boot项目中,连接多个数据源还是比较常见的.之前也介绍了如何在几种常用框架的场景下配置多数据源,具体可见: Spring Boot 2.x基础教程:JdbcTemplate的多数 ...