web前端总结---day03

最新推荐文章于 2024-04-06 01:09:36 发布

Ch An

最新推荐文章于 2024-04-06 01:09:36 发布

阅读量98

点赞数

文章标签：前端 javascript css

版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/anran_06/article/details/127797683

版权

作业：使用所学的各种那个样式制作一个酷炫的按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="陈安">
		<meta name=" description" content="第一个页面">
		<meta name="keywords" content="调教">
		<title>第一个页面</title>
		<style>
			#loading-btn {
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  height: 100vh;
			}
			
			button {
			  background: transparent;
			  border: 0;
			  border-radius: 0;
			  text-transform: uppercase;
			  font-weight: bold;
			  font-size: 20px;
			  padding: 15px 50px;
			  position: relative;
			}
			
			button:before {
			  transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);
			  content: '';
			  width: 1%;
			  height: 100%;
			  background: #ff5964;
			  position: absolute;
			  top: 0;
			  left: 0;
			}
			
			button span {
			  mix-blend-mode: darken;
			}
			
			button:hover:before {
			  background: #ff5964;
			  width: 100%;
			}
		</style>
	</head>
	<body>
		<div id ="loading-btn">
			<button><span>回忆总想哭</span></button>
		</div>
	</body>
</html>

在这里插入图片描述

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Ch An CSDN认证博客专家 CSDN认证企业博客

码龄4年

127: 原创

6万+: 周排名

223万+: 总排名

13万+: 访问

: 等级

1221: 积分

154: 粉丝

79: 获赞

9: 评论

245: 收藏

私信

关注

热门文章

分类专栏

chaitin
HCIA 24篇
HCIP 26篇

最新评论

HCIA---静态综合实验
醉了: 内网汇总为192.168.1.0/24的然后进行空接口防患，为什么最后还会触环
HCIA-HCIP笔记整理
Ch An: 持续整理中
zabbix企业监控实战-1-zabbix部署
CSDN-Ada助手: 一定要坚持创作更多高质量博客哦, 小小红包, 以资鼓励, 更多创作活动请看: 新星计划2023: https://marketing.csdn.net/p/1738cda78d47b2ebb920916aab7c3584?utm_source=csdn_ai_ada_redpacket 新星计划2023: https://marketing.csdn.net/p/1738cda78d47b2ebb920916aab7c3584?utm_source=csdn_ai_ada_redpacket 上传ChatGPT/计算机论文等资源，瓜分￥5000元现金: https://blog.csdn.net/VIP_Assistant/article/details/130196121?utm_source=csdn_ai_ada_redpacket 新人首创任务挑战赛: https://marketing.csdn.net/p/90a06697f3eae83aabea1e150f5be8a5?utm_source=csdn_ai_ada_redpacket Microsoft Edge功能测评！: https://activity.csdn.net/creatActivity?id=10403?utm_source=csdn_ai_ada_redpacket 职场解惑讨论会: https://activity.csdn.net/creatActivity?id=10427?utm_source=csdn_ai_ada_redpacket 可持续能源技术真的能改变世界吗？: https://activity.csdn.net/creatActivity?id=10425?utm_source=csdn_ai_ada_redpacket 无效数据，你会怎么处理？: https://activity.csdn.net/creatActivity?id=10423?utm_source=csdn_ai_ada_redpacket 物联网技术正在如何影响我们的生活: https://activity.csdn.net/creatActivity?id=10421?utm_source=csdn_ai_ada_redpacket 生物识别技术能否成为应对安全挑战的绝佳选择？: https://activity.csdn.net/creatActivity?id=10411?utm_source=csdn_ai_ada_redpacket 应届生如何提高职场竞争力: https://activity.csdn.net/creatActivity?id=10409?utm_source=csdn_ai_ada_redpacket 讯飞星火大模型将超越chatgpt？: https://activity.csdn.net/creatActivity?id=10407?utm_source=csdn_ai_ada_redpacket 职场新人备忘录: https://activity.csdn.net/creatActivity?id=10405?utm_source=csdn_ai_ada_redpacket “裸奔”时代下该如何保护网络隐私: https://activity.csdn.net/creatActivity?id=10401?utm_source=csdn_ai_ada_redpacket VR vs AR：哪种技术更有潜力改变未来？: https://activity.csdn.net/creatActivity?id=10399?utm_source=csdn_ai_ada_redpacket 蓝桥杯备赛指南分享: https://activity.csdn.net/creatActivity?id=10317?utm_source=csdn_ai_ada_redpacket
docker安装与部署
马戏团小丑: ?午觉不睡，在这搞这些与学习无关的事
JAVA--面向对象编程题
大军696: 大善人

大家在看

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。