Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
button-animation
Advanced tools
button-animation - npm Package Compare versions
Comparing version 1.0.8 to 1.0.9
| { | ||
| "name": "button-animation", | ||
| "version": "1.0.8", | ||
| "version": "1.0.9", | ||
| "description": "b站上学习到的按钮点击动画", | ||
@@ -5,0 +5,0 @@ "main": "btnAnimation.js", |
@@ -0,1 +1,5 @@ | ||
| learn from CodingLab | ||
| 【按钮波纹动画在 HTML CSS 和 JavaScript-哔哩哔哩】https://b23.tv/PheNse | ||
| # 演示效果 | ||
@@ -109,3 +113,3 @@ | ||
| mounted生命周期中注册，接收三个参数，第一个为button类名，第二个为动画颜色，第三个为动画方向 | ||
| mounted 生命周期中注册，接收三个参数，第一个为 button 类名，第二个为动画颜色，第三个为动画方向 | ||
@@ -124,21 +128,18 @@ ```js | ||
| <template> | ||
| <article class="buttons"> | ||
| <button class="button">Button | ||
| </button> | ||
| <button class="button1">Button | ||
| </button> | ||
| <button class="button2">Button | ||
| </button> | ||
| </article> | ||
| <article class="buttons"> | ||
| <button class="button">Button</button> | ||
| <button class="button1">Button</button> | ||
| <button class="button2">Button</button> | ||
| </article> | ||
| </template> | ||
| <script > | ||
| <script> | ||
| import { buttonHover } from "button-animation"; | ||
| export default { | ||
| mounted () { | ||
| buttonHover('button', '#ff7242', 'left') | ||
| buttonHover('button1', '#ff7242', 'center') | ||
| buttonHover('button2', '#ff7242', 'right') | ||
| } | ||
| } | ||
| mounted() { | ||
| buttonHover("button", "#ff7242", "left"); | ||
| buttonHover("button1", "#ff7242", "center"); | ||
| buttonHover("button2", "#ff7242", "right"); | ||
| }, | ||
| }; | ||
| </script> | ||
@@ -148,29 +149,29 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
| body { | ||
| margin: 0; | ||
| background-color: #350048; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| margin: 0; | ||
| background-color: #350048; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| } | ||
| button { | ||
| 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); | ||
| 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); | ||
| background: linear-gradient(90deg, #025ce3, #4e94fd); | ||
| } | ||
@@ -184,2 +185,2 @@ </style> | ||
| ## | ||
| ## |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.18%
7897
- Number of lines in readme file
- increased by0.55%
183
No dependency changes