【CSS】模仿迅雷主页的按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div class="button-test">
<div>哈哈哈哈</div>
<div>这是一段描述</div>
<div>===</div>
<div>访问网站</div>
</div>
<div class="button-test">
<div>哈哈哈哈</div>
<div>这是一段描述</div>
<div>===</div>
<div>访问网站</div>
</div>
<div class="button-test">
<div>哈哈哈哈</div>
<div>这是一段描述</div>
<div>===</div>
<div>访问网站</div>
</div>
</div>
</body>
</html>
<style>
:root {
--box-width: 200px;
--box-button-width: 100px;
}
html,
body {
padding: 0;
margin: 0;
}
#app {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
background-image: radial-gradient( circle 732px at -23.9% -25.1%, rgba(30,39,107,1) 6.1%, rgba(188,104,142,1) 100.2% );
}
.button-test {
user-select: none;
display: flex;
flex-direction: column;
align-items: center;
transition: .3s ease-in-out;
width: var(--box-width);
height: var(--box-width);
margin: 10px;
border-radius: 10px;
color: #eee;
cursor: default;
background-color: rgba(255, 255, 255, .1);
}
.button-test:hover {
transition: .3s ease-in-out;
backdrop-filter: blur(5px);
background-color: rgba(255, 255, 255, .2);
}
.button-test div:nth-child(1) {
transition: .3s ease-in-out;
transform: translateY(100%);
font-size: 2rem;
}
.button-test div:nth-child(2) {
opacity: 1;
transition: .3s ease-in-out;
font-size: .9rem;
transform: translateY(300%);
}
.button-test div:nth-child(3) {
transition: .3s ease-in-out;
font-size: 3rem;
transform: translateY(80%);
}
.button-test div:nth-child(4) {
font-size: .7rem;
border: solid 2px #999;
padding: 8px 20px;
text-align: center;
border-radius: 20px;
width: var(--box-button-width);
opacity: 0;
transform: translateY(100%);
transition: .3s ease-in-out;
cursor: pointer;
}
.button-test:hover div:nth-child(1) {
transition: .2s ease-in-out;
transform: translateY(50%);
}
.button-test:hover div:nth-child(2) {
transition: .2s ease-in-out;
opacity: 0;
transform: translateY(150%);
}
.button-test:hover div:nth-child(3) {
transition: .4s ease-in-out;
opacity: 1;
transform: translateY(-5%);
}
.button-test:hover div:nth-child(4) {
transition: .5s ease-in-out;
opacity: 1;
transform: translateY(50%);
}
</style>
:root { --box-width: 200px; --box-button-width: 100px }
body { padding: 0; margin: 0 }
#app { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 100vh; background-image: radial-gradient(circle 732px at -23.9% -25.1%, rgba(30, 39, 107, 1) 6.1%, rgba(188, 104, 142, 1) 100.2%) }
.button-test { user-select: none; display: flex; flex-direction: column; align-items: center; transition: 0.3s ease-in-out; width: var(--box-width); height: var(--box-width); margin: 10px; border-radius: 10px; color: rgba(238, 238, 238, 1); cursor: default; background-color: rgba(255, 255, 255, 0.1) }
.button-test:hover { transition: 0.3s ease-in-out; backdrop-filter: blur(5px); background-color: rgba(255, 255, 255, 0.2) }
.button-test div:nth-child(0n+1) { transition: 0.3s ease-in-out; transform: translateY(100%); font-size: 2rem }
.button-test div:nth-child(0n+2) { opacity: 1; transition: 0.3s ease-in-out; font-size: 0.9rem; transform: translateY(300%) }
.button-test div:nth-child(0n+3) { transition: 0.3s ease-in-out; font-size: 3rem; transform: translateY(80%) }
.button-test div:nth-child(0n+4) { font-size: 0.7rem; border: 2px solid rgba(153, 153, 153, 1); padding: 8px 20px; text-align: center; border-radius: 20px; width: var(--box-button-width); opacity: 0; transform: translateY(100%); transition: 0.3s ease-in-out; cursor: pointer }
.button-test:hover div:nth-child(0n+1) { transition: 0.2s ease-in-out; transform: translateY(50%) }
.button-test:hover div:nth-child(0n+2) { transition: 0.2s ease-in-out; opacity: 0; transform: translateY(150%) }
.button-test:hover div:nth-child(0n+3) { transition: 0.4s ease-in-out; opacity: 1; transform: translateY(-5%) }
.button-test:hover div:nth-child(0n+4) { transition: 0.5s ease-in-out; opacity: 1; transform: translateY(50%) }
【CSS】模仿迅雷主页的按钮的更多相关文章
- [Windows Phone]模仿魔兽3技能按钮SkillButton
简介: 模仿魔兽3技能按钮,带CD效果.使用的时候可以当做普通按钮使用,同时也支持Binding. 音效紧耦合在控件内部,因为控件本身目的就是模拟魔兽3的技能按钮,所以不考虑音效的扩展. Demo结构 ...
- 纯css实现checkbox开关切换按钮
我们都知道 checkbox 标签默认样式 实在是太low了,故对CheckBox美化很有必要. 现提供两种方式对其进行美化. 方法一 <div class="switch-wrap ...
- css模仿微信弹出菜单
css模仿微信弹出菜单 效果图: html: <div class="action-sheet-backdrop"> <div class="act ...
- 用CSS制作带图标的按钮
先上一张效果图
- [CSS]Input标签与图片按钮对齐
页面直接摆放一个input文本框与ImageButton图片按钮,但是发现没有对齐: <input type="text" id="txtQty" /&g ...
- div+css模仿登录界面
我的代码,这种方式形成了遮罩层,遮罩层的"登录"按钮仍可被点击,非我想要的. <!DOCTYPE html> <html lang="en"& ...
- CSS自定义文件上传按钮
今天一同事问我文件上传按钮的问题,情况是这样的,他页面上有3个按钮,分为左中右三个,左边的位按钮甲,右边的位按钮乙,而中间的就是个文件选择按钮,情况大概是这个样子的: 两边的按钮都有了样式,但中间的选 ...
- css中文本框与按钮对不齐解决方案
我们先对对input标记设定样式,代码如下: html 代码 <form> <input type=”text” name=”text1” id=”text1” /> < ...
- CSS 文本框里添加按钮的实现
有很多人做界面会经常发现设计师设计出这样的界面: 咋一看是一个文本框里加了一个按钮,经过谷歌之后,未发现在文本框里可以添加按钮. 但可以通过div来实现它. 我的做法是先做一个大小的div,然后用带里 ...
随机推荐
- Python 数值中的下划线是怎么回事？
花下猫语:Python 中下划线的用法令人叹为观止,相信你已在各种文章或教程中见识过了.在 2016 年的 3.6 版本之后,Python 还引入了一种新的语法,使得下划线也可以出现在数值中.这篇翻译 ...
- springmvc学习指南 之---第25篇 Spring Bean有三种配置方式
writed by不要张艳涛, 从tomcat转到了springmvc 现在开始有点不知道该看什么书了,看完了springmvc 学习指南之后 又查了一些书,好多都是内容相近,在找书的过程之中,发现s ...
- react踩坑笔记
1.create-react-app中配置webpack // 方法一:将项目的配置文件抽取到项目中,即运行: npm run eject // 方法二:使用react-app-rewired 2.c ...
- jquery : 菜单根据url变颜色
//菜单根据url变颜色$(document).ready(function(){ $('#nav li a').each(function(){ if($($(this))[0].href==Str ...
- Webmin 远程命令执行漏洞（CVE-2019-15107）
影响版本 Webmin 1.920及以下版本 poc地址 https://github.com/Mr-xn/Penetration_Testing_POC/tree/master/CVE-2019-1 ...
- FastAPI：一个测试人员视角的教程
前言 教程肯定谈不上了,主要还是就自己的理解分享内容而已 内容是连官方文档的基础教程都没涵盖起的 建议直接看官方文档 以个人视角来分享,希望各位通过这个可以写接口了 需要自取 完整视频链接:https ...
- 论文笔记：（2017NIPS）DeepSets
目录 摘要 一.引言 二.置换不变性和等变性 2.1 问题定义 2.2 结构 2.3 相关结果 三.Deep Sets 3.1 架构 3.2 其他相关工作 四.应用和实验结果 4.1 设置输入标量响应 ...
- 声明提前(hoist)
程序执行前,都会先找到var声明的变量和function声明的函数. 一.var声明的变量 程序 结果 console.log(a); var a=10; console.log(a); //unde ...
- Java 使用 Apache commons-math3 线性拟合、非线性拟合实例（带效果图）
Java 使用 CommonsMath3 的线性和非线性拟合实例,带效果图 例子查看 GitHub Gitee 运行src/main/java/org/wfw/chart/Main.java 即可查看 ...
- SQL语句（一）基础查询与过滤数据
目录 一.数据库测试表 二.基础查询 1. 获得需要的记录的特定字段 2. 查询常量值 3. 查询表达式 4. 查询函数 5. 起别名 6. 去重 7. CONCAT函数的简单使用 三.过滤数据 大纲 ...