【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,然后用带里 ...

随机推荐

微软内推常见问题 Q&A
很高兴,已经成功内推 59 人拿到了微软 offer! 两年前,我就已经写过一篇微软面经,帮助到了不少人: 微软面经分享:如何更好地做好面试准备在这两年的内推过程中,往往会有不少候选人来问我有关微软 ...
centos安装ansible
此次测试总共有三台机,分别如下: ansible服务器:10.0.0.20 client01:10.0.0.21 client02:10.0.0.22 一.安装ansible 方法一. yum ins ...
XMAPP搭建DVWA靶机
1 环境搭建 XMAPP+DVWA (我在win10下搭的环境) 更改了xmapp中Apache的两个端口号: dvwa/config中密钥和端口号按自己情况填好: dvwa/config中文件改为 ...
【前端 · 面试】HTTP 总结（十）—— HTTP 缓存应用
最近我在做前端面试题总结系列,感兴趣的朋友可以添加关注,欢迎指正.交流. 争取每个知识点能够多总结一些,至少要做到在面试时,针对每个知识点都可以侃起来,不至于哑火. 前言通过前面几篇内容的学习,我们 ...
攻防世界pwn高手区——pwn1
攻防世界 -- pwn1 攻防世界的一道pwn题,也有一段时间没有做pwn了,找了一道栈题热身,发现还是有些生疏了. 题目流程拖入IDA中,题目流程如图所示,当v0为1时,存在栈溢出漏洞.在gdb中 ...
ms17-010
永恒之蓝和ms17-010简介: 永恒之蓝(EternalBLUE)"是Shadow Brokers(影子经纪人)黑客组织公布的一款黑客工具,该工具利用的漏洞也被称为MS17-010漏洞,M ...
ElasticSearch版本控制--java实现
一.前言最近工作中有这样一个ElasticSearch(以下简称ES)写入的场景,Flink处理完数据实时写入ES.现在需要将一批历史数据通过Flink加载到到ES,有两个点需要保证: 对于历史数据 ...
计算机课程设计-校园二手书交易系统java二手交易平台代码ssm二手商城购物平台跳蚤市场
计算机课程设计-校园二手书交易系统java二手交易平台代码ssm二手商城购物平台跳蚤市场注意:该项目只展示部分功能,如需了解,评论区咨询即可. 1.开发环境开发语言:Java 后台框架:SSM(S ...
脚本小子学习--vulnhub靶机DC8
@ 目录前言一.环境搭建二.目标和思路三.实际操作 1.信息收集 2.getshell 总结前言通过一些靶机实战练习,学习使用现有的工具来成为脚本小子. 一.环境搭建靶机:Linux虚拟 ...
minio设置永久访问链接
1.通过minio分享的链接只能支持7天. 解决方案是设置对应的bucket 可通过路径直接访问.(必须通过minio client才能设置下载策略) wget https://dl.min.io/c ...

【CSS】模仿迅雷主页的按钮

【CSS】模仿迅雷主页的按钮的更多相关文章

随机推荐

热门专题