特效列表Slider：Jelly：Pulse：Flash：Bubble：Slider效果图原理因为按钮元素可以使用before/after伪元素，所以用伪元素的帮助，可以实现动态图中的覆盖层。为了避免回流重绘，滑块的移动方向是垂直的，所以使用scaleY属性。对于动画的方向，需要使用transform-origin来改变动画的原点。代码实现html:css:button{outline:none;边框：无；z-索引：1；位置：相对；白颜色;背景：#40a9ff；padding:0.5em1em;}button::before{content:"";z-指数：-1；位置：绝对；顶部：0；底部：0；左：0；右：0；背景色：#fa541c；原点：中心底部；变换：scaleY(0)；transition:transform0.4sease-in-out;}button:hover{cursor:pointer;}button:hover::before{transform-origin:centertop;transform:scaleY(1);}Web前端开发学习Q-Q-U-N：784783012，分享开发工具，零基础，进阶视频教程，希望新手少走弯路。transition的实现，要用animation。而动画触发的时间点是鼠标移进来的时候，所以动画要在:hvoer中声明。按钮{z-index:1;白颜色;背景：#40a9ff；大纲：无；边框：无；padding:0.5em1em;}button:hover{cursor:pointer;动画：果冻0.5s;}web前端开发学习Q-Q-U-N：784783012，分享开发工具，零基础，进阶视频教程，希望新手少走弯路，开始写果冻动画特效。这个动画可以分解为4个部分：“初始=>挤压高度=>挤压=>回到初始状态”。压高和压扁都是通过scale实现的，代码如下：@keyframesjelly{0%,100%{transform:scale(1,1);}33%{变换：比例（0.9，1.1）；}66%{变换：比例（1.1，0.9）；}}更进一步，上面的动态已经模拟的很好了，如果4个部分变成5个部分：“Initial=>Squeezeheight=>Squeeze=>Squeezeheight=>Backtotheinitialstate”。视觉上会有一种特殊的弹簧效果，就像手压果冻的效果：@keyframesjelly{0%,100%{transform:scale(1,1);}25%,75%{变换:scale(0.9,1.1);}50%{变换：比例（1.1，0.9）；}}Web前端开发学习Q-Q-U-N：784783012，分享开发工具，零基础，进阶视频教程，希望新手少走弯路脉冲特效渲染原理及代码首先去除按钮默认样式。注意设置按钮的z-index属性并使其生效。确保它大于::before的z-index属性，以防止dom元素被伪元素覆盖。按钮{位置：相对；z-索引：1；边框：无；大纲：无；填充：0.5em1em；白颜色;background-color:#1890ff;}button:hover{cursor:pointer;}rest设置伪元素即可。因为脉冲特效给人一种“镂空”放大的感觉。因此，变化的对象是border属性。镂空效果是通过透明背景实现的。按钮::之前{内容：“”；位置：绝对；z-指数：-1；顶部：0；左：0；底部：0；右：0；边框：4pxsolid#1890ff；变换：比例（1）；transform-origin:center;}动画的开始时间是鼠标移进来的时候，边框上的变化是颜色变浅，尺寸变小，透明度逐渐变成0。button:hover::before{transition:all0.75sease-out;边框：1pxsolid#e6f7ff；变换：比例（1.25）；opacity:0;}??transition和transform是放置在hover状态的伪元素，目的是让动画瞬间回到初始状态。flash特效的原理和代码实现还是依赖伪元素。Flash特效更注重配色。动画实现的核心是使用rotate实现“倾斜”效果，使用translate3d实现“闪烁”效果。按钮{大纲：无；边框：无；z-索引：1；位置：相对；白颜色;背景：#262626；填充：0.5em1em；溢出：隐藏；--shine-width:1.25em;}button::after{content:"";z-指数：-1；位置：绝对；背景：#595959；/*核心代码：逐级调整位置*/top:-50%;左：0%；底部：-50%；宽度：1.25em；变换：translate3d(-200%,0,0)rotate(35deg);/**/}button:hover{cursor:pointer;}button:hover::after{transition:transform0.5sease-in-out;transform:translate3d(500%,0,0)rotate(35deg);}Web前端开发学习Q-Q-U-N：784783012，分享开发工具，零基础，进阶视频教程，希望新手少走弯路??除了避免重绘和回流，translate3d还可以启用GPU加速以获得更高的性能。但是为了方便，一般都使用translate属性。气泡效果图的原理和代码首先禁用按钮元素的默认样式，调整配色：button{outline:none;边框：无；游标：指针；白颜色;位置：相对；填充：0.5em1em；background-color:#40a9ff;}由于按钮的伪元素层次覆盖了按钮，所以需要设置z-index属性，防止伪元素覆盖显示。毕竟你只是想覆盖底色，字体不需要覆盖。在上面的样式中添加：button{z-index:1;overflow:hidden;}最后要处理的是伪元素的变化效果。特效从中心向四周扩散，所以要居中。对于大小更改，请使用scale属性。因为是圆形，所以设置border-radius为50%。按钮::之前{z-index:-1;内容：””;位置：绝对；顶部：50%；左：50%；宽度：1em；高度：1em；边界半径：50%；#9254de;变换原点：中心；转换：translate3d(-50%,-50%,0)scale(0,0);transition:transform0.45s缓入缓出；}button:hover::before{transform:translate3d(-50%,-50%,0)scale(15,15);}改变方向？示例代码中的气泡效果从中间向四周扩散。如果想从左上角向右下角扩散怎么办？例如如下图所示：处理过程很简单，只需要改变气泡的初始位置即可。按钮::之前{z-index:-1;内容：””;位置：绝对；宽度：1em；高度：1em；边界半径：50%；背景色：#9254de；/*改变位置的代码*/top:0;左：0；变换原点：中心；转换：scale3d(0,0,0);transition:transform0.45s缓入缓出；/***************/}button:hover::before{transform:scale3d(15,15,15);}Web前端开发学习Q-Q-U-N：784783012，分享开发工具，零基础，进阶视频教程，希望新手少走弯路
