上海哪里有做网站的,河北省住房和城乡建设局网站,wordpress中文插件,揭阳做网站的大家好#xff0c;我是若川。邀你进源码共读群学习交流。今天分享一篇好文。可收藏#xff5e;近期工作中遇到一个需求——实现一些酷炫的按钮#xff0c;看到效果图之后#xff0c;按钮确实漂亮#xff0c;有弹跳、颜色渐变、扫光、霓虹灯#xff0c;瞬间激起了我的好奇… 大家好我是若川。邀你进源码共读群学习交流。今天分享一篇好文。可收藏近期工作中遇到一个需求——实现一些酷炫的按钮看到效果图之后按钮确实漂亮有弹跳、颜色渐变、扫光、霓虹灯瞬间激起了我的好奇心开启了研究实现之路。所有button.gif一、基础储备实现这些漂亮的按钮主要利用了一些CSS的属性主要有animation、background-size、background-position、linear-gradient(),下面对这四个内容进行简要概述。1.1 animationanimation 属性用来指定一组或多组动画每组之间用逗号相隔其语法如下所示详细用法可参考MDNanimation: name duration timing-function delay iteration-count direction;
1.2 background-sizebackground-size 设置背景图片大小。图片可以保有其原有的尺寸或者拉伸到新的尺寸或者在保持其原有比例的同时缩放到元素的可用空间的尺寸其语法如下所示详细用法可参考MDNbackground-size: length|percentage|cover|contain;
1.3 background-positionbackground-position 为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的详细用法可参考MDN.在使用这个属性时有一个位置必须特别注意否则很难理解为什么background-position指定的位置和自己想要的不一样这个位置就是其百分比的计算公式通过下面公式就可以理解设定百分比后背景图片成了什么结果了background-postion:x y;
x{容器(container)的宽度—背景图片的宽度}*x百分比超出的部分隐藏。
y{容器(container)的高度—背景图片的高度}*y百分比超出的部分隐藏。
1.4 linear-gradientlinear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于gradient数据类型是一种特别的image数据类型其语法如下所示详细用法可参考MDNbackground-image: linear-gradient(direction, color-stop1, color-stop2, ...);
二、效果实现下面的四种动画效果其实就是充分利用CSS属性实现的让我们具体来看看都是如何实现的。2.1 弹跳效果第一种效果是弹跳效果所谓弹跳效果就是按钮在大小之间变换其思想如下创建一个静态的按钮然后利用animation属性创建动画当变换到50%时按钮变换到1.2倍到动画100%时按钮又恢复原样。button1.gifdiv classbutton1span立即下载/span
/div
.button1 {width: 200px;height: 46px;line-height: 46px;background: #2e82ff;color: #ffffff;font-size: 18px;border-radius: 27px;animation: zoomIn 1.5s infinite;text-align: center;
}
keyframes zoomIn {50% {transform: scale(1.2);}100% {transform: scale(1);}
}
2.2 颜色渐变效果第二种是颜色渐变效果所谓颜色渐变效果就是颜色从一种颜色到另一种颜色然后循环如此其思想如下创建一个静态按钮添加渐变颜色对称的的背景色背景色x轴方向拉伸至200%这样就可以让原来对称轴处的背景色由中间到了右侧最后利用animation实现操作位置的动画模拟出颜色不断渐变的动画。button2.gifdiv classbutton2span立即下载/span
/div
.button2 {display: inline-block;width: 200px;height: 46px;line-height: 46px;color: #ffffff;font-size: 18px;border-radius: 27px;text-align: center;background-image: linear-gradient(to right, #ff3300 0%, #eb4402 25%, #ffc404 50%, #eb4402 75%, #ff3300 100%);background-size: 200%;animation: colorGradient 1.5s infinite;
}keyframes colorGradient {0% {background-position: 0 0;}100% {background-position: 100% 0;}
}
2.3 扫光效果第三种是扫光效果所谓扫光指的就是一个白色透明颜色从一端不断向另一端扫描其思想如下创建一个静态按钮在静态按钮前利用::before伪元素设置该元素的背景色为白色微透明的颜色并将该中心位置通过缩放移动到容器右侧利用animation实现动画并不断变换位置实现扫光效果。button3.gifdiv classbutton3span立即下载/span
/div
.button3 {width: 200px;height: 46px;line-height: 46px;background-color: #2e82ff;color: #ffffff;font-size: 18px;text-align: center;border-radius: 27px;position: relative;
}
.button3::before {content: ;position: absolute;left: 0px;width: 100%;height: 100%;background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 70%);background-size: 200%;animation: wipes 1s infinite;
}
keyframes wipes {0% {background-position: 0 0;}100% {background-position: 100% 0;}
}
2.4 霓虹灯效果第四种是霓虹灯效果所谓霓虹灯效果其实更像一种斜线在不断移动其原理如下所示创建一个静态按钮在静态按钮前利用::before伪元素设置该元素的背景色为倾斜的霓虹灯效果该效果实现是通过创建一个20px * 20px的正方形背景然后利用linear-gradient将背景色135°方向渐变倾斜实现小返回的霓虹灯然后通过背景不断repeat实现整个的效果利用animation实现动画并不断变换位置实现霓虹灯效果。button4.gifdiv classbutton4span立即下载/span
/div
.button4 {width: 200px;height: 46px;line-height: 46px;background: #2e82ff;color: #ffffff;font-size: 18px;border-radius: 27px;text-align: center;position: relative;overflow: hidden;
}
.button4:before {content: ;position: absolute;left: 0px;width: 100%;height: 100%;background-size: 20px 20px;background-image: linear-gradient(135deg, rgba(255, 0, 0, 0.1) 0%, rgba(255, 0, 0, 0.1) 25%, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 0, 0, 0.1) 50%, rgba(255, 0, 0, 0.1) 75%,rgba(255, 255, 255, 0.1) 75%, rgba(255, 255, 255, 0.1) 100%);animation: moveblock 0.5s linear infinite;
}
keyframes moveblock{0% {background-position: 0px 0px;}100% {background-position: 20px 0px;}
}
最近组建了一个江西人的前端交流群如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。推荐阅读我在阿里招前端该怎么帮你可进面试群我读源码的经历初学者也能看懂的 Vue3 源码中那些实用的基础工具函数老姚浅谈怎么学JavaScript················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时活跃在知乎若川掘金若川。致力于分享前端开发经验愿景帮助5年内前端人走向前列。识别上方二维码加我微信、拉你进源码共读群今日话题略。欢迎分享、收藏、点赞、在看我的公众号文章~
