bubble气泡特效

看看人家的气泡效果：

人家直接引入即可，超方便：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/bubbly-bg@0.2.3/dist/bubbly-bg.js"></script>
<script>bubbly();</script></body>
</html>

咱们再简单的创建一个登陆窗口，那么一个完美的登陆页面就出来了。

效果：

代码

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><style>input {font-size: 2rem;border-radius: 9px;outline: none;}p {text-align: center;}#loginDiv {width: 30%;font-size: 2rem;position: relative;top: 50vh;left: 70%;}</style><div id="loginDiv"><p><input type="text" placeholder="请输入用户名"></p><p><input type="text" placeholder="请输入mima" /></p><p><input type="button" value="登录" /></p></div><script src="https://cdn.jsdelivr.net/npm/bubbly-bg@0.2.3/dist/bubbly-bg.js"></script><script>bubbly();</script></body></html>

还能换个颜色什么的：

开始颜色和结束颜色都能改的哦

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><style>input {font-size: 2rem;border-radius: 9px;outline: none;}p {text-align: center;}#loginDiv {width: 30%;font-size: 2rem;position: relative;top: 50vh;left: 70%;}</style><div id="loginDiv"><p><input type="text" placeholder="请输入用户名"></p><p><input type="text" placeholder="请输入mim" /></p><p><input type="button" value="登录" /></p></div><script src="https://cdn.jsdelivr.net/npm/bubbly-bg@0.2.3/dist/bubbly-bg.js"></script><script>bubbly({colorStart: "pink",colorStop: "skyblue",});</script></body></html>

希望能给大家带来点收获。

bubble气泡特效相关推荐

html5制作一款超好看的点赞爱心气泡特效
基于canvas点击圆形爱心按钮,喷出爱心气泡动画特效.这是一款点赞喜欢爱心特效. css代码 <style>body {background-color: rgba(255, 137, ...
Android R 通知新特性—人与对话（气泡窗）
文章目录对话 Conversation Space Bubbles 通知中心的Bubble 如何弹出Bubble(app端相关) 系统是如何弹出Bubble的(源码相关) Android R 通知新 ...
html 气泡样式,jQuery 插件实现随机自由弹跳气泡样式
安装方法由于是基于jQuery的扩展插件,因此引入jQuery是必须的. 此外,还需引入插件自身的实现脚本. 在此之前,我们还需要引入样式依赖文件 jquery.bubble.min.css ,主要 ...
android 气泡,Android Q 气泡
本节内容测试Android Q新功能 -- 气泡当前文章首次编辑于Android Q Beta 2 版本,可能部分内容会在后期版本上发生变化,仅供参考气泡是Android Q中的一项新功能.通过气 ...
html5对话框背景透明度,纯CSS3背景透明的Speech Bubbles对话气泡
这是一款使用纯CSS3制作的背景透明的Speech Bubbles对话气泡特效.该对话气泡使用两张透明的png图片来作为背景,通过简单的CSS代码来将它们组合为一个对话气泡效果. 使用方法 HTML结 ...
Android仿QQ消息拖拽黏连消失效果,气泡爆炸效果
公司需要这个效果,看了很多博客,根据自己项目的需要写出来的一个完整的过程. 拖拽控件代码根据手势拖动的位置利用贝塞尔曲线算法画出控件 package cn.stike.bubble.stickbub ...
android 水下气泡上升界面效果
首先声明,该效果并不是用动画实现的,而是用自定义View实现的,在onDraw方法里面调用invalidate()函数,实现气泡上升效果气泡类: private class Bubble ...
图像抽象成彩色文字/符号/黑色气泡
前言在网上看到一些有趣的特效,于是自己琢磨了一下,写了份简单的python代码 github:https://github.com/AIjugg/AbstractImage 效果图原图如下彩色文 ...
游戏引擎设计 - 粒子系统
粒子系统是一个游戏引擎必不可少的部分,粒子系统的实现并没有统一的标准,各类3D动画软件和游戏引擎的实现也不尽相同. 本套粒子系统基于3ds max的标准,实现了max9绝大部分的粒子参数调节功能.暂不 ...

bubble气泡特效

bubble气泡特效相关推荐

最新文章

热门文章