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. Hive常用日期格式转换

    固定日期转换成时间戳 select unix_timestamp('2016-08-16','yyyy-MM-dd') --1471276800 select unix_timestamp('2016 ...

  2. （002）每日SQL学习：删除名称重复的数据

    create table A ( id VARCHAR2(36), name VARCHAR2(100), sl VARCHAR2(36) ); insert all into a (id,name) ...

  3. TCMalloc源码学习（二）

    替换libc中的malloc free 不同平台替换方式不同. 基于unix的系统上的glibc,使用了weak alias的方式替换.具体来说是因为这些入口函数都被定义成了weak symbols, ...

  4. mysql本地中127.0.0.1连接不上数据库怎么办

    首先在本地使用Navicat for MySQL建立一个bai数据库.在dreamweaver中建立一个PHP格式的网页,方便链接测试.测试发du现,如果zhi无法使用localhost链接mysql ...

  5. valgrind和Kcachegrind性能分析工具详解

    一.valgrind介绍 valgrind是运行在Linux上的一套基于仿真技术的程序调试和分析工具,用于构建动态分析工具的装备性框架.它包括一个工具集,每个工具执行某种类型的调试.分析或类似的任务, ...

  6. Scala中使用fastJson 解析json字符串

    Scala中使用fastJson 解析json字符串 添加依赖 2.解析json字符 2.1可以通过JSON中的parseObject方法,把json字符转转换为一个JSONObject对象 2.2然 ...

  7. java格式化json串

    package com.loan.modules.extbiz.in.rabbitmq.util; import com.loan.modules.extbiz.in.rabbitmq.excepti ...

  8. IP路由__IP路由选择过程

    1.主机A上的某个用户ping主机B的IP地址 1.主机A的因特网控制报文协议(ICMP)将创建一个回应请求数据包(在它的数据域中只包含有字母). 2. ICMP将把这个有效负荷交给因特网协议(IP) ...

  9. dedecms新建内容模型以及如何添加字段

    dedecms新建内容模型以及如何添加字段 内容模型就是我们所说的频道模型,利用频道模型可以实现其使用他的栏目具备一些功能,比如说,图片模型,在使用他的栏目中就可以发表多个图片,并且能够达到相册的功能 ...

  10. Luogu P2408 不同子串个数【SAM】

    P2408 不同子串个数 计算一个字符串的不同子串个数 两种方法,一种是\(dp\)出来\(SAM\)从起点开始的路径数量 另一种方法就是计算每个点的\(len[i]-len[link[i]]\)这个 ...