button-animation - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

package.json

		{
		"name": "button-animation",
		"version": "1.0.2",
		"version": "1.0.3",
		"description": "一个b站上学习到的按钮点击动画",
		@@ -5,0 +5,0 @@ "main": "btnAnimation.js",

README.md

		# 演示效果

		https://img13.360buyimg.com/ddimg/jfs/t1/194670/24/18242/87921/6118fab8Eb30bd666/14406878e2dd8206.gif
		https://img12.360buyimg.com/ddimg/jfs/t1/191685/13/18463/235002/61190b62E79e52c3f/6fa7428e9032ac56.gif

		# 使用案例

		1.install
		1.install

		@@ -16,42 +16,64 @@ ```bash
		```js
		import { buttonAnimation } from 'button-animation'
		import { buttonAnimation } from "button-animation";
		```

		3.绑定点击事件,需要传入event
		3.绑定点击事件,需要传入 event

		buttonAnimation(e)

		示例 demo


		示例demo

		```vue
		<template>
		<button @click="login">登录</button>
		<article class="buttons">
		<button @click="clickBtn">Button</button>
		<button @click="clickBtn">Button</button>
		</article>
		</template>

		<script>
		import { buttonAnimation } from 'button-animation'
		import { buttonAnimation } from "button-animation";
		export default {
		methods: {
		login (e) {
		buttonAnimation(e)
		}
		}
		}
		methods: {
		clickBtn(e) {
		buttonAnimation(e);
		},
		},
		};
		</script>

		<style>
		* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		}
		body {
		margin: 0;
		background-color: #350048;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		}
		button {
		background-color: pink;
		outline: none;
		border: none;
		border-radius: 20px;
		width: 200px;
		height: 100px;
		font-size: 40px;
		color: white;
		border: none;
		outline: none;
		color: #fff;
		border-radius: 45px;
		margin: 0 15px;
		padding: 14px 40px;
		font-size: 30px;
		font-weight: 400;
		background: linear-gradient(90deg, #6616d0, #ac34e7);
		box-shadow: 3px 5px rgba(0, 0, 0, 0.1);
		border-top: 1px solid rgba(0, 0, 0, 1);
		}
		button:nth-child(2) {
		background: linear-gradient(90deg, #025ce3, #4e94fd);
		}
		</style>
		```

		注意
		button 的 css 会被设置为 position:relative;overflow:hidden;

button-animation - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics