Web动态按钮设计——波纹扩散
Posted Chivas_/Regal
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web动态按钮设计——波纹扩散相关的知识，希望对你有一定的参考价值。
📕效果演示
这里是个"明色" ⟺ \\Longleftrightarrow ⟺"暗色"主题切换按钮的应用
📕制作过程
🎈 [.html]
分析一下主体部分
一个会有变大扩散动画的圆（无法点击：<div>）
里面还有一个保持原大小的圆（可以点击：<button>）
<body id="bd">
<div id="divDay">
<button id="butn" onclick="Change()"></button>
</div>
🎈 [.css]
分析并设计样式
body
开始的时候界面是明色，背景自然需要是白色
由于开始背景自然是白色，所以我们不需要设计body的css样式，只需要固定一个id以便后面js更改
div
要有对比，所以我们的动画层#divDay{}
颜色是黑色
background-color: black;
边角圆形
border-radius: 50%;
大小位置abosulute一下就行（这里是居中）
position: absolute;
width: 70px;
height: 70px;
top: 50%;
margin-top: -35px;
left: 50%;
margin-left: -35px;
动画层过渡@keyframes kf_div{}的时候
0%的状态还是原样式
100% 的状态要是最后状态：
大小更大
width: 140px;
height: 140px;
偏移量重修
margin-top: -70px;
margin-left: -70px;
颜色贴近背景
background-color: white;
鼠标响应#divDay:hover{}设置一下动画：1s的每次演示时间、动画样式、持续次数无限
animation: 1s kf_div infinity;
然后我们再设置一套"暗色模式"的样式#divNight{}、#divNight:hover{}、@keyframes vid_fk{}（方便后期js修改）
也就是对颜色进行一下改变就行了「black
→
\\rightarrow
→white」or 「white
→
\\rightarrow
→black」
button
#butn{}
与#divDay{}保持一致即可
加一个阿里的矢量图标
大小设置为块大小
background-img: url('');
background-size: 70px 70px;
删除一下按钮的边框
*{ border: 0px none black; }
🎈[.js]
一个主题切换方法function Change(){}即可
通过body的background判断一下是明色主题还是暗色主题
if(document.getElementById('butn').style.backgroundColor == "black"){
}else{
}
每次要切换的就四个样式
1.body的background
document.getElementById('bd').style.backgroundColor = "";
2.button的background
document.getElementById('butn').style.backgroundColor = "";
3.button的background-img
document.getElementById('butn').style.backgroundImage = "url('')";
4.div的id
document.getElementById('').id = "";
最后，别忘了在.html文件里面导入就行了
📕成品代码
以上是关于Web动态按钮设计——波纹扩散的主要内容，如果未能解决你的问题，请参考以下文章
一起Talk Android吧（第五百一十五回：绘制向外扩散的水波纹)