【每日一练】68—CSS实现一组渐变按钮动画效果

在之前，我们也练习过一些按钮动画的效果，今天我们再来练习一组CSS实现的按钮动画效果，下面是今天练习的最终效果：

接下来，我们再来看一下这个案例的源码。

HTML代码：

<!doctype html>
<html>
<head><meta charset="utf-8"><title>【每日一练】68—CSS实现一组渐变按钮动画效果</title>
</head>
<body><div class="container"><a href="https://www.webqdkf.com/">首页</a><a href="https://www.webqdkf.com/qdkf/">前端技术</a><a href="https://www.webqdkf.com/code/">源码案例</a><a href="https://www.webqdkf.com/mb/">建站模板</a><a href="http://www.aierweisi.com">建站主机</a><a href="https://www.webqdkf.com/">资源导航</a></div>
</body>
</html>

CSS代码：

*
{margin: 0;padding: 0;font-family: 'Poppins', sans-serif;
}
body
{display: flex;justify-content: center;align-items: center;min-height: 100vh;
}
.container
{width: 1200px;display: flex;justify-content: space-around;flex-wrap: wrap;
}
.container a
{position: relative;display: inline-block;padding: 10px 30px;margin: 20px;text-decoration: none;text-transform: uppercase;letter-spacing: 2px;font-size: 16px;color: #fff;transition: 0.5s;
}
.container a:nth-child(1)
{background: linear-gradient(to right,#C6FFDD, #FBD786,#f64f59);background-size: 200%;
}
.container a:nth-child(2)
{background: linear-gradient(to right,#7F7FD5, #86A8E7,#91EAE4);background-size: 200%;
}
.container a:nth-child(3)
{background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);background-size: 200%;
}
.container a:nth-child(4)
{background: linear-gradient(to right, #4481eb, #04befe, #4481eb);background-size: 200%;
}
.container a:nth-child(5)
{background: linear-gradient(to right, #1E9600, #FFF200, #FF0000);background-size: 200%;
}
.container a:nth-child(6)
{background: linear-gradient(to right, #fdfc47, #24fe41, #fdfc47);background-size: 200%;
}
.container a:hover
{background-position-x: 100%;transform: translateY(-15px);
}
.container a:after
{content: '';position: absolute;top: 0;left: 0;width: 50%;height: 100%;background: rgba(255,255,255,.2);
}
.container a:before
{content: '';position: absolute;bottom: 0px;left: 5%;width: 90%;height: 4px;background: rgba(0,0,0,0.2);border-radius: 50%;transform: scale(0);transition: 0.5s;filter: blur(5px);z-index: -1;
}
.container a:hover:before
{transform: scale(1);bottom: -15px;
}

写在最后

以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

学习更多技能

请点击下方公众号

【每日一练】68—CSS实现一组渐变按钮动画效果相关推荐

【每日一练】138—CSS实现炫酷背景动画效果
以下是今天练习的最终效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head><meta na ...
html渐变显示动画效果,使用CSS transition和animation改变渐变状态
到目前为止,CSS的渐变属性linear-gradient和radial-gradient已经是很成熟的CSS特性了,而且repeating-linear-gradient和conic-gradien ...
CSS实现内容颜色渐变的动画效果
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 CSS实现内容颜色渐变的动画效果主要用到css的动画一.HTML代码二.CSS代码主要用到css的动画这是css动画的文档, ...
25个CSS3 渐变和动画效果教程
2019独角兽企业重金招聘Python工程师标准>>> 随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站 ...
【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> ...
【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> & ...
c语言实现小球抛物线动画,CSS实现小球抛物线运动的动画效果（代码）
本篇文章给大家带来的内容是关于CSS实现小球抛物线运动的动画效果 (代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一个物体实现抛物线运动,物理上是将物体分为水平运动(匀速) ...
纯CSS制作3D旋转风车动画效果
效果图展示 HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...
html图片自动循环,css实现图片循环的动画效果（代码）
本篇文章给大家带来的内容是关于css实现图片循环的动画效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. *{margin: 0;padding: 0;} .robot{ w ...

【每日一练】68—CSS实现一组渐变按钮动画效果

【每日一练】68—CSS实现一组渐变按钮动画效果相关推荐

最新文章

热门文章