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. pycharm安装完成后的一些基本设置

    1.设置背景色 file-->Setting-->Appearance&Behavior-->Appearance 2.设置主题 settings --> editor ...

  2. Service Mesh架构的持续演进 单体模块化 SOA 微服务 Service Mesh

    架构不止-严选Service Mesh架构的持续演进 网易严选 王育松 严选技术团队 2019-11-25 前言同严选的业务一样,在下层承载它的IT系统架构一样要生存.呼吸.增长和发展,否则过时的.僵 ...

  3. Simple decorator that intercepts connection errors and ignores these if settings specify this.

    django-redis/cache.py at master · jazzband/django-redis https://github.com/jazzband/django-redis/blo ...

  4. git database 数据库 平面文件 Git 同其他系统的重要区别 Git 只关心文件数据的整体是否发生变化，而大多数其他系统则只关心文件内容的具体差异 Git 的设计哲学

    小结: 1.如果要浏览项目的历史更新摘要,Git 不用跑到外面的服务器上去取数据回来 2.注意 git clone  应指定版本,它复制的这个版本的全部历史信息: 各个分支  git init 数据库 ...

  5. 数位dp 笔记

    目录 数位dp 笔记 解决的问题 & 主体思想 入门 -- windy数 绕一个弯 -- 萌数 the end? -- 恨7不成妻 小心细节 [SDOI2016]储能表 复杂度起飞 [AHOI ...

  6. 数据库备份和恢复---MariaDB

    定义 数据备份:将源数据再次存储到新的位置 数据恢复:将备份好的数据重新应用到数据库系统 常见的备份类型: 按照是否备份整个数据集来分 完全备份:备份从开始到执行备份这一时刻的所有数据集 增量备份:备 ...

  7. Flink-v1.12官方网站翻译-P001-Local Installation

    本地安装 按照以下几个步骤下载最新的稳定版本并开始使用. 第一步:下载 为了能够运行Flink,唯一的要求是安装了一个有效的Java 8或11.你可以通过以下命令检查Java的正确安装. java - ...

  8. mac外接键盘HOME,END键问题

    参考: How to Fix the Home and End Buttons for an External Keyboard in Mac mac老用户应该都知道, MAC自带的键盘的 cmd+左 ...

  9. 翻译：《实用的Python编程》01_01_Python

    目录 | 下一节 (1.2 第一个程序) 1.1 Python Python 是什么? Python 是一种解释型(译者注:区别于编译型)的高级语言, 通常被归类为 "脚本语言"  ...

  10. UESTC 360（1425） another LCIS

    这道题是CD老OJ上面的一道题,现在在新OJ上的题号是360,开始在VJ上做的提交一直RE(囧).后来才知道OJ移位了. 这道题是一个简单的成段更新+区间合并的线段树的题,1A还让我小激动了一下 这道 ...