用 CSS 如何实现仿王者匹配时的粒子按钮动画效果? 下面本篇文章就来给大家介绍一下使用 CSS3 实现仿王者匹配时的粒子按钮动画效果. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
在码代码的时候会发现, 很多东西都是殊途同归的, 方法千千万, 能解决问题的都是好办法, 不一定非要把代码写的特别高深, 这样反而后来的人看不懂, 维护根据头疼.
所以用最简单通俗的代码, 更能利于后期的维护开发.
先来看看背景粒子动画效果预览图:
按钮点击粒子动画
- <div class="button">
- <div class="button-text">确认</div>
- </div>
由于按钮是梯形的, 之前代码在 button 选择器上面已经加了伪类来实现梯形了, 所以我们只能再套一层元素 (button-text) 来实现粒子.
- .button-text {
- position: relative;
- width: 100%;
- border-radius: 4px;
- border: none;
- cursor: pointer;
- }
- .button-text:before,
- .button-text:after {
- position: absolute;
- content: '';
- display: block;
- width: 140%;
- height: 100%;
- left: -20%;
- z-index: -1000;
- background-repeat: no-repeat;
- }
- .button-text:before {
- display: none;
- top: -75%;
- background-image:
- radial-gradient(circle, #fff 20%, transparent 20%),
- radial-gradient(circle, transparent 20%, #fff 20%, transparent 30%),
- radial-gradient(circle, #fff 20%, transparent 20%),
- radial-gradient(circle, #fff 20%, transparent 20%),
- radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%),
- radial-gradient(circle, #fff 20%, transparent 20%),
- radial-gradient(circle, #fff 20%, transparent 20%),
- radial-gradient(circle, #fff 20%, transparent 20%),
- radial-gradient(circle, #fff 20%, transparent 20%);
- background-size:
- 10% 10%,
- 20% 20%,
- 15% 15%,
- 20% 20%,
- 18% 18%,
- 10% 10%,
- 15% 15%,
- 10% 10%,
- 18% 18%;
- }
- .button-text:after {
- display: none;
- bottom: -75%;
- background-image:
- radial-gradient(circle, #fff 20%, transparent 20%),
- radial-gradient(circle, #fff 20%, transparent 20%),
- radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%),
- radial-gradient(circle, #fff 20%, transparent 20%),
- radial-gradient(circle, #fff 20%, transparent 20%),
- radial-gradient(circle, #fff 20%, transparent 20%),
- radial-gradient(circle, #fff 20%, transparent 20%);
- background-size:
- 15% 15%,
- 20% 20%,
- 18% 18%,
- 20% 20%,
- 15% 15%,
- 10% 10%,
- 20% 20%;
- }
- .button-text:active {
- transform: scale(0.9);
- }
在 button-text 的伪类元素上面, 添加 background-image , 并用径向渐变 radial-gradient 画出多个圆作为粒子.
transform: scale(0.9) , 是鼠标点击时, 缩放 button-text 元素.
大家应该都看到默认伪类元素是 display: none; 隐藏的. 所有当我们点击时, 需要添加一个选择器, 让其显示出来, 并执行动画.
JS 来监听点击事件, 点击后添加 animate 选择器.
- var animateButton = function(e) {
- e.preventDefault;
- e.target.classList.remove('animate');
- e.target.classList.add('animate');
- setTimeout(function(){
- e.target.classList.remove('animate');
- },700);
- };
- var classname = document.getElementsByClassName("button-text");
- for (var i = 0; i < classname.length; i++) {
- classname[i].addEventListener('click', animateButton, false);
- }
然后我们添加 CSS, 开始动画
- .button-text.animate:before {
- display: block;
- animation: topBubbles ease-in-out 0.75s forwards;
- }
- .button-text.animate:after {
- display: block;
- animation: bottomBubbles ease-in-out 0.75s forwards;
- }
- @keyframes topBubbles {
- 0% {
- background-position:
- 5% 90%,
- 10% 90%,
- 10% 90%,
- 15% 90%,
- 25% 90%,
- 25% 90%,
- 40% 90%,
- 55% 90%,
- 70% 90%;
- }
- 50% {
- background-position:
- 0% 80%,
- 0% 20%,
- 10% 40%,
- 20% 0%,
- 30% 30%,
- 22% 50%,
- 50% 50%,
- 65% 20%,
- 90% 30%;
- }
- 100% {
- background-position:
- 0% 70%,
- 0% 10%,
- 10% 30%,
- 20% -10%,
- 30% 20%,
- 22% 40%,
- 50% 40%,
- 65% 10%,
- 90% 20%;
- background-size:
- 0% 0%,
- 0% 0%,
- 0% 0%,
- 0% 0%,
- 0% 0%,
- 0% 0%;
- }
- }
- @keyframes bottomBubbles {
- 0% {
- background-position:
- 10% -10%,
- 30% 10%,
- 55% -10%,
- 70% -10%,
- 85% -10%,
- 70% -10%,
- 70% 0%;
- }
- 50% {
- background-position:
- 0% 80%,
- 20% 80%,
- 45% 60%,
- 60% 100%,
- 75% 70%,
- 95% 60%,
- 105% 0%;
- }
- 100% {
- background-position:
- 0% 90%,
- 20% 90%,
- 45% 70%,
- 60% 110%,
- 75% 80%,
- 95% 70%,
- 110% 10%;
- background-size:
- 0% 0%,
- 0% 0%,
- 0% 0%,
- 0% 0%,
- 0% 0%,
- 0% 0%;
- }
- }
我们通过 background-position 改变背景的位置, 用 background-size 改变大小, 来形成动画效果.
这样就形成按钮点击粒子动画效果了.
同理, 我们可以在背景上面添加同样的粒子效果. 代码基本可以 copy.
背景粒子效果
.king:before { position: absolute; content: ''; display: block; width: 100%; height: 100%; top: 0; z-index: 1; background-repeat: no-repeat; opacity: 0.4; } .king:before { background-image: radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, transparent 20%, #fff 20%, transparent 30%), radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%), radial-gradient(circle, #fff 20%, transparent 20%); background-size: 10% 10%, 12% 12%, 5% 5%, 12% 12%, 5% 5%, 10% 10%, 5% 5%, 10% 10%, 5% 5%; display: block; animation: topBubbles ease-in-out 3s forwards infinite; }
这里我们改变一下粒子的大小, 和透明度, 以及层次 (z-index). 让其一开始就执行动画, 并且循环执行(infinite). 动画执行效果, 我们直接用上面按钮的效果(topBubbles) 即可.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/css/16157.html