CSS clip-path in action
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的更多相关文章
- CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具，可以直接生成SVG代码以及配合Mask制作蒙板。
CLIP PATH (MASK) GENERATOR是一款在线制作生成clip-path路径的工具,可以直接生成SVG代码以及配合Mask制作蒙板. CLIP PATH (MASK) GENERATO ...
- CSS clip:rect矩形剪裁功能及一些应用介绍
CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...
- CSS Clip剪切元素动画实例
1.CSS .fixed { position: fixed; width: 90px; height: 90px; background: red; border: 0px solid blue; ...
- CSS Grid Layout In Action
CSS Grid Layout In Action CSS 异形网格布局实战 refs https://static-nginx-online.fbcontent.cn/tutor/tutor-ybc ...
- [ javascript css clip ] javascript css clip 的奇思妙想之文字拼接效果
语法: clip : auto | rect ( number number number number ) 参数: auto : 对象无剪切 rect ( number number numbe ...
- 将CSS CLIP属性应用在：扩展覆盖效果
我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡.这个想法是为了实现某种叠加效果,好像它实际上在各个元素的下面.点击其中一个元素将创建一个切断 ...
- CSS Clip剪切元素实例
一.实例1: .fixed { position: fixed; width: 382px; height: 100px; background: red; border: 1px solid blu ...
- CSS Clip属性
Clip属性在W3C官网是这样进行描述的:“通过对元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了clip属性”. .selector { c ...
- 理解CSS Clip属性及用法
应用Clip属性实现的一个简单效果图: 样式写法: .my-element { position: absolute; clip: rect(10px 350px 170px 0); /* IE ...
- CSS clip:rect矩形剪裁功能及应用
.clip{ position:absolute; clip: rect(10px 30px 20px 10px); } 最后有必要说明下:clip:rect矩形剪裁只能作用于position:abs ...
随机推荐
- XV6学习（1） Lab util
正在学习MIT的6.S081,把做的实验写一写吧. 实验的代码放在了Github上. 第一个实验是Lab util,算是一个热身的实验,没有涉及到系统的底层,就是使用系统调用来完成几个用户模式的小程序 ...
- Python+Selenium+Unittest实现PO模式web自动化框架（2）
1.Common目录下的具体模块讲解. 2.basepage.py basepage.py模块里面是封装的对元素的操作.例如:查找元素.点击元素.文本输入等等. # --^_^-- coding:ut ...
- LDAP学习
.top pre { display: block; background: rgba(68, 67, 65, 1); color: rgba(255, 255, 255, 1); margin: 1 ...
- PyPy CPython C++ connects programs written in C and C++ with a variety of high-level programming languages
PyPy 为什么会比 CPython 还要快? - 知乎 https://www.zhihu.com/question/19588346/answer/131977984 有个名词在现有的回答下面都没 ...
- ECMAScript6常用新特性总结
一.let声明变量 1.基本用法: ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. 如下代码: { let a = 10; var ...
- C#Process调用外部程序
前言 使用C#调用外部程序,一种是通过Process类,一种是通过命令行,本文主要说一下使用C#中的Process类调用外部程序的方式. 过程: 1. 创建Process对象 2. 配置启动选项(输入 ...
- 在plsql/developer的命令窗口执行sql脚本
在plsql/developer的命令窗口执行sql脚本的命令是@+路径. 命令窗口,如下: 1.在指定位置创建.sql文件 2-1.输入@,点击回车,选择.sql文件 2-2.或者@加路径
- 用RabbitMQ了好几年之后，我总结出来5点RabbitMQ的使用心得
大概从 2013 年开始,我就开始了自己和 RabbitMQ 的接触,到现在已经有七年多了. 在这七年中,既有一些对 RabbitMQ 的深度体验,更有无数的血泪史. 而根据我这么多年的使用经验,我将 ...
- Java中把对象、对象bean、list集合、对象数组、Map和Set以及字符串转换成Json
对象转换为Json 对象bean转换为Json List集合转换为Json 对象数组转换为Json Map集合转换为Json Set集合转为Json 字符串转换为Json 把Java对常用的一些数据转 ...
- 【疑】checkpoint防火墙双链路负载均衡无法配置权重问题
现状: 按照上一篇checkpoint疑难中描述,已完成双机+双链路冗余配置 故障现象: 外网出口为200M电信+200M联通,CP上负载权重设置如下 但是在实际使用中发现电信出口流量远大于联通. 调 ...