纯css3动画---粒子效果按钮组件封装（vue）

最新推荐文章于 2023-01-31 14:29:45 发布
最新推荐文章于 2023-01-31 14:29:45 发布
阅读量719 收藏 6
点赞数 1
分类专栏： 组件封装 按钮动画 vue 文章标签： css vue animation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44636778/article/details/103924570
版权

前言：先声明一下，按钮并非原创，而是引用掘金大佬的一篇文章，突发奇想做了一个简单封装，如有侵权，欢迎来搞，本人立刻删文，如果对本文由什么新的想法或好的意见，欢迎留言。
作者：XboxYan
文章链接CSS实现一个粒子动效的按钮

子组件中：

<template>
    <div>
        <button class="button" v-debounce="clickBtn">
            <slot name="content"></slot>
        </button>
    </div>
</template>
<script>
export default {
    props:{
        color:{
            type:String,
            default:'#fff',
        },
        fontSize:{
            type:String,
            default:'16px'
        },
        fontFamily:{
            type:String,
            default:'方正黑体'
        }
    },
    mounted(){
        // 样式在这里设置
        // 目前苹果手机中微信扫码预览不支持css3动画效果，不知为何，暂未解决（可能是不支持在伪元素中写动画）
        // 这种设置封装组件样式的写法不知规不规范，请大佬留言指点
        document.querySelector(".button").style.fontSize = this.fontSize;
        document.querySelector(".button").style.color = this.color;
    },
    // 自定义按钮提交节流点击事件
    directives: {
		debounce: {
			inserted: function (el, binding) {
				let timer
				el.addEventListener('click', () => {
					if (timer) {
						clearTimeout(timer)
					}
					timer = setTimeout(() => {
						binding.value()
					}, 300)
				})
			}
		}
	},
    methods:{
        clickBtn(){
            // 点击事件可在此处调用，并可传入参数
            this.$emit('clickFn',123)
        }
    }
}
</script>
<style>
body {
    font-size: 16px;/*px*/
    font-family: "Helvetica", "Arial", sans-serif;
    text-align: center;
    background-color: #f8faff;
    /* padding: 100px; */
}
h2 {
    padding-bottom: 2em;
}
.button {
    display: inline-block;
    margin: 30px auto;
    padding: 1em 2em;
    background-color: #ff0081;
    color: #fff;
    border-radius: 4px;
    border: none;
    font-size: 24px;
    cursor: pointer;
    position: relative;
    box-shadow: 0 2px 25px rgba(233, 30, 99, 0.5);
    outline: 0;
    transition: transform ease-in 0.1s, background-color ease-in 0.1s,
        box-shadow ease-in 0.25s;
    transition: -webkit-transform ease-in 0.1s, background-color ease-in 0.1s,
        box-shadow ease-in 0.25s;
    transition: -o-transform ease-in 0.1s, background-color ease-in 0.1s,
        box-shadow ease-in 0.25s;
    transition: -moz-transform ease-in 0.1s, background-color ease-in 0.1s,
        box-shadow ease-in 0.25s;
}

.button::before {
    position: absolute;
    content: "";
    left: -2em;
    right: -2em;
    top: -2em;
    bottom: -2em;
    pointer-events: none;
    transition: ease-in-out 0.5s;
    background-repeat: no-repeat;
    /* 按钮泡沫效果 */
    background-image: radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
        10% 10%, 18% 18%, 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%,
        20% 20%;
    background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
        65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
        64% 70%, 80% 71%;
    animation: bubbles ease-in-out 0.75s forwards;
    -webkit-animation: bubbles ease-in-out 0.75s forwards;
    -o-animation: bubbles ease-in-out 0.75s forwards;
    -moz-animation: bubbles ease-in-out 0.75s forwards;
}

.button:active {
    transform: scale(0.95);
    background-color: #f3037c;
    box-shadow: 0 2px 25px rgba(233, 30, 99, 0.5);
}
.button:active::before {
    animation: none;
    background-size: 0;
}
@keyframes bubbles {
    0% {
        background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
        65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
        64% 70%, 80% 71%;
    }
    50% {
        background-position: 10% 44%, 0% 20%, 15% 5%, 30% 0%, 42% 0%, 62% -2%,
        75% 0%, 95% -2%, 0% 80%, 95% 55%, 7% 100%, 24% 100%, 41% 100%, 55% 95%,
        68% 96%, 95% 100%;
    }
    100% {
        background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%,
        100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%,
        100% 100%;
        background-size: 0% 0%;
    }
}
@-webkit-keyframes bubbles {
    0% {
        background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
        65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
        64% 70%, 80% 71%;
    }
    50% {
        background-position: 10% 44%, 0% 20%, 15% 5%, 30% 0%, 42% 0%, 62% -2%,
        75% 0%, 95% -2%, 0% 80%, 95% 55%, 7% 100%, 24% 100%, 41% 100%, 55% 95%,
        68% 96%, 95% 100%;
    }
    100% {
        background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%,
        100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%,
        100% 100%;
        background-size: 0% 0%;
    }
}
@-o-keyframes bubbles {
    0% {
        background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
        65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
        64% 70%, 80% 71%;
    }
    50% {
        background-position: 10% 44%, 0% 20%, 15% 5%, 30% 0%, 42% 0%, 62% -2%,
        75% 0%, 95% -2%, 0% 80%, 95% 55%, 7% 100%, 24% 100%, 41% 100%, 55% 95%,
        68% 96%, 95% 100%;
    }
    100% {
        background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%,
        100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%,
        100% 100%;
        background-size: 0% 0%;
    }
}
@-moz-keyframes bubbles {
    0% {
        background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
        65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
        64% 70%, 80% 71%;
    }
    50% {
        background-position: 10% 44%, 0% 20%, 15% 5%, 30% 0%, 42% 0%, 62% -2%,
        75% 0%, 95% -2%, 0% 80%, 95% 55%, 7% 100%, 24% 100%, 41% 100%, 55% 95%,
        68% 96%, 95% 100%;
    }
    100% {
        background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%,
        100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%,
        100% 100%;
        background-size: 0% 0%;
    }
}
</style>

父组件中调用：
1、htnl部分：

<!-- 封装的按钮组件 -->
<!-- 支持传入字体颜色，字号，点击事件（可传参），按钮文案 -->
<!-- 本想按钮效果颜色及背景色都从父组件传递,不知如何下手,目前只能在子组件修改 -->
	<Btn :color="color" :fontSize="fontSize" :fontFamily="fontFamily" @clickFn="fn($event)">
		<span slot="content">submit</span>
	</Btn>

2、script部分

<script>
import Btn from "@/components/Btn";
export default {
	components: {
		Btn
	},
	data(){
		return {
			color:"#fff",
			fontSize:"20px",
			background:'#ff0081',
			fontFamily:'微软雅黑'
		}
	},
	methods: {
		fn(params){
			console.log(params)
		},
	}
};
</script>

代码中有注释。

❍❏❐❑❒❖❘❙❚
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯css3炫酷粒子动画特效
12-13
这是一款纯css3炫酷粒子动画特效。该特效使用多个div来制作光点粒子效果，并使用CSS3动画来制作光点粒子的上升动画，效果非常炫酷。
CSS3 粒子效果
weixin_30270561的博客
08-14 413
css3粒子效果，粒子飘飞效果，觉得挺不错的效果。请注意，此为CSS3代码，IE浏览器看不到效果，请使用IE9或火狐浏览器，或Chrome浏览器。 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>接触角测定仪</t...
CSS3粒子连接动画
qq_43093684的博客
07-13 691
这个暑假里第一篇博客。 说说我花了一个上午的时间写的css3粒子效果吧。我在写登陆页面的时候，专门去万能的谷歌搜了搜，炫酷的登陆界面，我参照这好多个炫酷的登陆界面，它们给我推荐的都是一些css3写的，看到这我就懵了，脑子里飞来好多乌鸦，css3我不会呀，呜呜呜。我选了几个自己看着比较好的页面，他们上面都是粒子动画加上比较好看的图片来写的，但是我看了下有星空的粒子效果，有普通的粒子...
CSS3实现王者匹配时的粒子动画效果
cxu123321的博客
05-14 300
CSS3实现王者匹配时的粒子动画效果 IT新时代 2019-07-24 21:59:58 825 收藏 展开 在码代码的时候会发现，很多东西都是殊途同归的，方法千千万，能解决问题的都是好办法，不一定非要把代码写的特别高深，这样反而后来的人看不懂，维护根据头疼。 所以用最简单通俗的代码，更能利于后期的维护开发。 先来看看背景粒子动画效果预览图： 按钮点击粒子动画 <div class="button"> <div class="button-text">确认</d...
amazeui学习笔记--css（常用组件15）--CSS动画Animation
weixin_34278190的博客
05-09 349
amazeui学习笔记--css（常用组件15）--CSS动画Animation 一、总结 1、css3动画封装：CSS3 动画封装，浏览器需支持 CSS3 动画。   Class描述 .am-animation-fade 淡入 .am-animation-scale-up 逐渐放大 .am-animation-scale-down 逐渐缩小...
Vue v-model组件封装(类似弹窗组件)
10-15
主要介绍了Vue中的 v-model组件封装(类似弹窗组件),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
particles-bg-vue:vue.js粒子动画背景组件
05-04
vue.js粒子动画背景组件。 使用它可以使您的网站看起来很酷。 检查一下是否要在React 使用它 指定 该项目引用官方网站的源代码以及proton的在线。 我将其打包到一个vue.js组件中。 感谢伟大的作者。 在线演示 演示1...
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
10-18
主要介绍了vue-video-player,通过自定义按钮组件实现全屏切换效果,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue-notification:使用Vue3的NotificationToast组件
03-28
@ dafcoe / vue-notification 使用Vue3构建的易于使用，可自定义的通知/吐司库。 在页面上查看操作。安装使用yarn或npm将软件包安装为项目依赖项： $ yarn add @dafcoe/vue-notification--- or ---$ npm install --...
vue-particle-effect-buttons:破裂的粒子效果按钮组件:sparkles::collision::snowflake::volcano:
05-11
Vue粒子效果按钮（ ） 爆裂Vue的粒子效果按钮。 该库是的一篇很棒的的Vue门户（原始）。 安装 npm install --save animejs vue-particle-effect-buttons 用法 查看以查看实际操作。 hello eveybody! < / ...
纯CSS3粒子雪花元素动画特效
07-24
纯CSS3粒子雪花元素动画特效是一款透明的颗粒状雪花，粒子雪花元素动画，雪花飘落网页背景动画特效。
react-particle-effect-button：为React Bur爆炸粒子效果按钮
02-05
React粒子效果按钮（） 为React破裂粒子效果按钮。 该库是的一篇很棒的的React端口（原始）。 安装 npm install --save react-particle-effect-button 用法 查看以查看实际操作。 import React , { Component } from ' react ' import ParticleEffectButton from ' react-particle-effect-button ' class App extends Component { state = { hidden : false } re
宇宙空间粒子CSS3动画特效
07-24
宇宙空间粒子CSS3动画特效是一款透明的星空粒子穿越背景动画特效。
CSS3发光粒子背景动画特效
04-25
CSS3发光粒子背景动画特效是一款基于css3 animation属性绘制的透明悬浮发光粒子酷炫动画特效。
让前端疯狂的特效代码（3D，粒子动画，鼠标跟随）
07-23
资源来自网络,具体特效请自行拆分使用。 3D切换效果 icebox焦点图 I jQuery右侧晨浮框控制楼层切换-改良版 ToolTip浮动提示框效果 京东楼层 3D切换效果 icebox焦京图 R bootstrap-datetimepicker-masterzip CSs3动画效果自动登录表单zip CS3给图片添加旋转背景特效zip csS3立体式3D图片全屏转符效zip CSs3实现酷炫流光页面动画特效zip 追CSs3鼠标晨停下拉显示二维码zp Date. rar HTML5 Canva指针大转盘抽奖代码zip Ra html5-video-js-codes(b51. net).ra htm|5点击刷新验证码特效zip htm5仿手机QQ拆红包游戏代码zip htm5基于 canvas实现的园形时钟效果源 HTML5手机微信摇一摇游戏代码zip HTML5坦克大战网页小游戏zi htm5用手机号码注册表单代码zip HTML5园形图片横向轮搔切换代码,zip
粒子动态效果的按钮
前端小菜米的博客
06-09 511
使用CSS实现一个粒子动效的按钮 以前开发中写按钮，好像从来没有去修饰过，不过今天看到这个粒子动态的按钮，甚是喜欢，一定要将其收入囊中。 如果想使用这个效果，可以看一下原作者写的案例，点击本文最下面的链接 <h2>鼠标点击试试~<h2> <button class="button">Button</button> css样式 /*在.button::before中添加*/ background-image: radial-gradient(circle,
CSS实现一个粒子动效的按钮
DHLSP15的博客
01-14 459
CSS实现一个粒子动效的按钮
Animate.css动画组件库
平平无奇前端开发的博客
01-31 340
npm install animate.css --save 安装插件。
vue3 table vue3-seamless-scroll组件的封装
最新发布
11-29
很抱歉，根据提供的引用内容，...因为引用内容中提到的是"vue-seamless-scroll"组件，而非"vue3-seamless-scroll"组件。同时，引用内容中也没有提到与table相关的内容。请提供更多相关信息或者明确问题，我将尽力回答。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值