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. 解决window10 和 ubuntu 双系统安装没有启动选项问题

    win10 和Ubuntu 双系统安装在网上已经有很多例子了,这里就不在赘述了. 今天新买的笔记本,想安装双系统.正常安装完ubuntu 重启后没有选项. 解决方法一 下载和解压以后,按照以下的步骤安 ...

  2. 阿姆达尔定律 Amdahl's law

    Amdahl's law - Wikipedia https://en.wikipedia.org/wiki/Amdahl%27s_law 阿姆达尔定律(英语:Amdahl's law,Amdahl' ...

  3. 逻辑bug 测试用例

    1. 179. 最大数 - 力扣(LeetCode) https://leetcode-cn.com/problems/largest-number/ 给定一组非负整数 nums,重新排列它们每个数字 ...

  4. 唯一ID生成算法剖析

    https://mp.weixin.qq.com/s/E3PGP6FDBFUcghYfpe6vsg 唯一ID生成算法剖析 原创 cloudoxou 腾讯技术工程 2019-10-08    

  5. shiro的授权与认证

    shiro的授权与认证 package com.cy.pj.common.aspect;import java.lang.reflect.Method;import java.util.Arrays; ...

  6. 后端API接口的错误信息返回规范

    前言 最近我司要制定开发规范.在讨论接口返回的时候,后端的同事询问我们前端,错误信息的返回,前端有什么意见? 所以做了一些调研给到后端的同事做参考. 错误信息返回 在使用API时无可避免地会因为各种情 ...

  7. [BJOI2016]水晶 做题心得

    [BJOI2016]水晶 做题心得 这是一个写了我两小时的傻逼题.写这个题浪费了一堆时间后,我才意识到我码力又不行了.于是整理起了实现技巧,开始练码力. 思路 不难.首先把 \((x,y,z)\) 变 ...

  8. Python 学习笔记（1）

    Mac下载安装Python mac 系统自带有python .但就最新的mac系统而言,它自带的python版本为2.*版本. 虽然不影响对于老python项目的运行,但3.*版本中很多语法都发生了改 ...

  9. Kibana，Logstash 和 Cerebro 的安装运行

    公号:码农充电站pro 主页:https://codeshellme.github.io 1,安装 Kibana Kibana 用于数据可视化,我们可以进入到 Kibana 下载页面下载 Kibana ...

  10. Java线程八锁

    package com.atguigu.juc1205; import java.util.concurrent.TimeUnit; class Phone//Phone.java ---> P ...