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. 开源AwaitableCompletionSource，用于取代TaskCompletionSource

    1 TaskCompletionSource介绍 TaskCompletionSource提供创建未绑定到委托的任务,任务的状态由TaskCompletionSource上的方法显式控制,以支持未来的 ...

  2. 函数式编程 偏函数 生成器 yield

    高阶函数 # 高阶函数def f(x): return x * x# map()函数接收两个参数,一个是函数,一个是Iterable,map将传入的函数依次作用到序列的每个元素,并把结果作为新的Ite ...

  3. tcpdump 参数详解及使用案例

    参数 -A 以ASCII码方式显示每一个数据包(不会显示数据包中链路层头部信息). 在抓取包含网页数据的数据包时, 可方便查看数据(nt: 即Handy for capturing web pages ...

  4. php中两个函数可能导致的sql注入

    sprintf https://www.php.net/manual/zh/function.sprintf.php 漏洞demo: <?php $name = addslashes($_GET ...

  5. （六）整合 QuartJob ,实现定时器实时管理

    整合 QuartJob ,实现定时器实时管理 1.QuartJob简介 1.1 核心API 2.SpringBoot整合QuartJob 2.1 项目结构 2.2 定时器配置 2.3 定时器管理工具 ...

  6. Tomcat优化，JNDI，连接池，数据源

    什么是JNDI? JNDI的简单应用 什么是连接池技术? 连接池 性能 连接池技术与传统数据库连接的比较 连接池技术工作原理 为什么使用连接池? 传统数据库连接方式的不足 企业级开发需要稳健和高效的数 ...

  7. apache https 双向证书生成

    Https分单向认证和双向认证 单向认证表现形式:网站URL链接为https://xxx.com格式 双向认证表现心事:网站URL链接为https://xxx.com格式,并且需要客户端浏览器安装一个 ...

  8. 使用两个FIFO完成流水操作

    一.设计目标 写一个FIFO控制器,控制器里有两个FIFO,输入的数据由串行接收模块(uart_rx_module)送来,一共有86行86列的数据,按0.1.2行,1.2.3行,直到最后83.84.8 ...

  9. 设计模式（二）——Java简单工厂模式

    简单工厂模式 案例: 披萨的项目(要便于披萨种类的扩展,要便于维护) 1)披萨的种类很多(比如 GreekPizz.CheesePizz 等) 2)披萨的制作有 prepare,bake, cut, ...

  10. Java一些概念

    1.Java先编译后解释 同一个.class文件在不同的虚拟机会得到不同的机器指令(Windows和Linux的机器指令不同),但是最终执行的结果却是相同的. 2.JDK包含JRE,JRE包含JVM, ...