<!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 >
<div >
<div>哈哈哈哈</div>
<div>这是一段描述</div>
<div>===</div>
<div>访问网站</div>
</div>
<div >
<div>哈哈哈哈</div>
<div>这是一段描述</div>
<div>===</div>
<div>访问网站</div>
</div>
<div >
<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>
【CSS】模仿迅雷主页的按钮
转载哈哈哈哈
这是一段描述
===
访问网站
哈哈哈哈
这是一段描述
===
访问网站
哈哈哈哈
这是一段描述
===
访问网站
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:【CSS】计数器
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
有趣的CSS - 汉堡菜单按钮
用 css 实现汉堡菜单图标与关闭图标过渡动画交互效果。
css 汉堡图标 动画 ux 交互体验 -
有趣的CSS - 新拟态按钮
用css写的一个好看的新拟态风格的按钮。
css 新拟态 按钮 动效设计 ux/ui -
有趣的CSS - 多彩变化的按钮
用css实现一个五彩斑斓的变化按钮。
css html 按钮 动画 动效 -
css按钮固定其他
-
模仿“百度”及 改变按钮、文本框样式(CSS)
模仿“百度”及 改变按钮、文本框样式(CSS)
职场 百度 CSS 休闲 -
SpintNBA项目模仿笔记(二) 主页的一些设置
Toolbar设置图标自从用了Too
源码 ide sed 侧滑菜单 -
CSS 3模仿android 中的toast效果
在android中,可以使用toast搞出一个信息提示的效果,在CSS 3中,其实也可以模仿一
css toast chrome html ide -
WPF 模仿IconPacks库写图标按钮
先上原链接,一个很不错的wpf图标库 : https://github.com/MahApps/MahApp
ico xml git 微信 microsoft