android 按钮动画效果_CSS3按钮动画效果

前言

前阵子在B站上看到了一个关于CSS和js的前端小案例视频，看完之后激发了我的兴趣，便跟着把代码码了一遍(url:https://www.bilibili.com/video/BV1Bx411f7PT?from=search&seid=10127959308870452063);

代码部分：

• html页面：只是一个简单的div+button布局

LOGIN

• js部分：原视频是采取引用jQuery的方案，我改为用原生js实现效果，个人觉得练手案例用原生js足以

• CSS:样式这里不多说，懂得都懂，反正我是不懂啦

*{margin: 0;padding: 0;}.container{position: relative;top: 50px;background-color: antiquewhite;border-radius: 10px;width: 200px;height: 200px;text-align: center;line-height: 200px;margin: auto auto;}/* click before */.login{position: relative;background-color: black;color: white;font-size: 16px;border: none;outline: none;border-radius: 5rem;box-shadow: 0 5px 10px black;width: 100px;height: 40px;line-height: 40px;text-align: center;cursor: pointer;transition: 0.8s;}.login:hover{box-shadow: 0px 3px 3px black;}/* button clicked *//*按钮被点击后添加的样式*/.active.login{width: 40px;color: transparent; font-size: 0px;}/*按钮内部文字样式，有点击前样式和点击后动画样式*/.text{color: antiquewhite;animation: 0.8s showLogin 0.3s ease-in-out forwards;}@keyframes showLogin{  0%{font-size: 0px;color: antiquewhite;} 10%{font-size: 1px;color: antiquewhite;} 20%{font-size: 1px;} 30%{font-size: 2px;color: antiquewhite;} 40%{font-size: 2px;color: antiquewhite;} 50%{font-size: 3px;} 60%{font-size: 3px;color: antiquewhite;} 70%{font-size: 4px;color: antiquewhite;} 80%{font-size: 4px;} 90%{font-size: 5px;color: antiquewhite;}100%{font-size: 6px;color: antiquewhite;} }/* loading style start *//*这里是承载图片中加载小圆点的容器*/.loading{opacity: 0;transition: 0.5s;}/*容器被点击后的样式*/.active.loading{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 70%;height: 40%;border-radius: 1rem;/* 内容 */display: flex;justify-content: space-around;align-items: flex-end;}/*加载动画的小圆点*/.active.loading div{width: 0.3rem;height: 0.3rem;background-color: white;border-radius: 50%;animation: 0.8s load ease-in-out infinite alternate;}/*圆点动画*/@keyframes load{to{ transform: translate(0,-0.8rem);}}.active.loading div:nth-child(1){background-color: red;animation-delay: 0.1s;}.active.loading div:nth-child(2){animation-delay: 0.2s;background-color: deepskyblue;}.active.loading div:nth-child(3){background-color: #FAEBD7;animation-delay: 0.3s;}/* loadind style end */

效果：

原始

点击

结束

最后说一下，本文相较于视频中的案例简化了许多，想看完整项目可到文章开头获取链接。码字不易，各位客官老爷帮忙给个赞