【每日一练】25—CSS实现按钮悬停发光动画效果
web前端开发
共 3000字,需浏览 6分钟
· 2022-07-13
按钮,一直是网站开发项目中不可或缺的内容之一,很多时候,为了做一个好看有趣的动画效果,总是要花很多心思,我们在前面也分享了一些按钮的练习项目。
今天,我们再来练习一个新的关于按钮的效果,下面,我们一起来看一下今天这个项目的最终效果:
<html>
<head>
<meta charset="utf-8">
<title>【每日一练】25—CSS实现按钮悬停发光动画效果</title>
</head>
<body>
<div class="container">
<a href="http://www.aierweisi.com" target="_blank"><span>服务器主机站</span></a>
<a href="http://www.webqdkf.com" target="_blank"><span>web前端开发网站</span></a>
<a href="http://www.aierweisi.com" target="_blank"><span>服务器主机站</span></a>
<a href="http://www.webqdkf.com" target="_blank"><span>web前端开发网站</span></a>
</div>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
.container
{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
a
{
position: relative;
display: inline-block;
padding: 15px 30px;
color: #fff;
background: transparent;
border: 2px solid #42db14;
text-transform: uppercase;
font-weight: 600;
margin: 40px;
letter-spacing: 2px;
text-decoration: none;
transition: 0.5s;
transition-delay: 0s;
-webkit-box-reflect: below 0px linear-gradient(transparent,#0002);
}
a:hover
{
transition-delay: 1.5s;
color: #fff;
box-shadow: 0 0 10px #42db14,
0 0 20px #42db14,
0 0 40px #42db14,
0 0 80px #42db14,
0 0 160px #42db14;
}
a:nth-child(2)
{
filter: hue-rotate(40deg);
}
a:nth-child(3)
{
filter: hue-rotate(70deg);
}
a:nth-child(4)
{
filter: hue-rotate(90deg);
}
a span
{
position: relative;
z-index: 10;
}
a:before
{
content: '';
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 2px;
background: #42db14;
transition: width 0.5s,left 0.5s, height 0.5s,box-shadow 0.5s;
transition-delay: 1s,0.5s,0s,0s;
box-shadow: 5px -8px 0 #42db14,
5px 8px 0 #42db14;
}
a:hover:before
{
width: 60%;
height: 100%;
left: -2px;
transition-delay: 0s,0.5s,1s,1s;
box-shadow: 0px 0 0 #42db14,
0px 0 0 #42db14;
}
a:after
{
content: '';
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 2px;
background: #42db14;
transition: width 0.5s,right 0.5s, height 0.5s,box-shadow 0.5s;
transition-delay: 1s,0.5s,0s,0s;
box-shadow: -5px -8px 0 #42db14,
-5px 8px 0 #42db14;
}
a:hover:after
{
width: 60%;
height: 100%;
right: -2px;
transition-delay: 0s,0.5s,1s,1s;
box-shadow: 0px 0 0 #42db14,
0px 0 0 #42db14;
}
写在最后
希望今天的【每日一练】项目对你有用,有空的话,可以多试试,这个稍微修改一下CSS就会有新的效果出来,然后又是一个新项目,这个就是练习项目的好处,并且,我们平常的小练习,其实都可以作为我们以后开发的一些素材与灵感来源。
我一直觉得,做开发项目,就像玩搭积木游戏一样,都是一块一块搭建起来,把每一块搭建好了,然后整个项目就好了,从一个点到线到面的过程。
最后,感谢你的阅读,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
我是杨小爱,我们明天见。
学习更多技能
请点击下方公众号
评论
用 Shader 实现旗帜飘扬动画效果
我觉得对于刚入门 3D 编程的朋友来说,如果能够完成代码创建模型数据->创建材质->编写Shader动画这一系列,想必会有满满的成就感。今天就用 Cocos Creator 的 utils.MeshUtils.createMesh 接口,带大家感受一下这个流程。这个流程不仅可以用于新手学
COCOS
2
SpringBoot+Minio实现上传凭证、分片上传、秒传和断点续传
关注我们,设为星标,每天7:40不见不散,架构路上与您共享回复架构师获取资源大家好,我是你们的朋友架构君,一个会写代码吟诗的架构师。Spring Boot整合Minio后,前端的文件上传有两种方式:1、文件上传到后端,由后端保存到Minio这种方式好处是完全由后端集中管理,可以很好的做到、身份验证、
Java架构师社区
0
超越原生,散点图实现华夫饼图
之前我们介绍过了如何使用新卡片图实现华夫饼图。参考:超越原生,PowerBI 华夫饼图实现但是利用卡片图实现的华夫饼图有一些缺点,形状之间的大小跟间距不太好把握,而且有时形状大一点的话显示就会不正常,需要做出二次调整。今天给大家介绍一种原生视觉对象生成华夫饼图的更佳方案,既简单又美观。上图是利用散点
PowerBI战友联盟
2
全新 SOTA backbone | 2024年了,再见ViT系列Backbone,实数难得,不知道效果如何?
点击上方“小白学视觉”,选择加"星标"或“置顶”重磅干货,第一时间送达在构建用于精确匹配的深度固定长度表示时,确定指纹上的密集特征点,特别是在像素 Level 上,具有重大意义。为了探索指纹匹配的可解释性,作者提出了一种多阶段可解释的指纹匹配网络,名为通过视觉 Transformer 进行指纹匹配的
小白学视觉
10
Spring Boot + flowable 快速实现工作流
关注我们,设为星标,每天7:40不见不散,架构路上与您共享回复架构师获取资源大家好,我是你们的朋友架构君,一个会写代码吟诗的架构师。来源:blog.csdn.net/zhan107876/article/details/120815560总览一、flowable-ui部署运行二、绘制流程图绘图细节:
Java架构师社区
0
实现订单30分钟自动取消的策略
原文:juejin.cn/post/7285167401821798400简介在电商和其他涉及到在线支付的应用中,通常需要实现一个功能:如果用户在生成订单后的一定时间内未完成支付,系统将自动取消该订单。本文将详细介绍基于Spring Boot框架实现订单30分钟内未支付自动取消的几种方案,并提供实例
JAVA乐园
0
AI大模型之路 第三篇:从零实现词嵌入模型,加深理解!
你好,我是郭震今天我们研究「AI大模型第三篇」:词维度预测,很多读者听过词嵌入,这篇文章解答下面问题:词嵌入是什么意思?怎么做到的?原理是什么?从零实现一个专属你数据集的词嵌入我们完整从零走一遍,根基的东西要理解透,这样才能发明出更好的东西。1 skip-gram模型Skip-gram模型是一种广泛
Python与算法社区
11
面试官:谈谈前端路由的实现原理【hash&history】
哈喽,大家好我是考拉🐨。今天我们来聊一聊前端路由。当谈到前端路由时,指的是在前端应用中管理页面导航和URL的机制。前端路由使得单页应用(Single-Page Application,SPA)能够在用户与应用交互时动态地加载不同的视图,而无需每次都重新加载整个页面。在前端开发中,常用的前端路由库有很
程序员成长指北
10