新拟态按钮风格

最新推荐文章于 2023-06-21 17:02:15 发布
最新推荐文章于 2023-06-21 17:02:15 发布
阅读量713 收藏 5
点赞数
分类专栏： 大前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hui987654/article/details/110404261
版权

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css层叠样式表/新拟态.css">
    <title>新拟态</title>
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="img">
                <img src="./icos/录制.png"/>
            </div>
            <p>录音机</p>
        </div>
        <div class="box">
            <div class="img">
                <img src="./icos/微信.png"/>
            </div>
            <p>微信</p>
        </div>
        <div class="box">
            <div class="img">
                <img src="./icos/日历.png"/>
            </div>
            <p>日历</p>
        </div>
        <div class="box">
            <div class="img">
                <img src="./icos/时钟.png"/>
            </div>
            <p>时钟</p>
        </div>
        <div class="box">
            <div class="img">
                <img src="./icos/浏览器.png"/>
            </div>
            <p>浏览器</p>
        </div>
        <div class="box">
            <div class="img">
                <img src="./icos/电话 (1).png"/>
            </div>
            <p>电话</p>
        </div>
        <div class="box">
            <div class="img">
                <img src="./icos/相册.png"/>
            </div>
            <p>相册</p>
        </div>
        <div class="box">
            <div class="img">
                <img src="./icos/相机.png"/>
            </div>
            <p>相机</p>
        </div>
        <div class="box">
            <div class="img">
                <img src="./icos/短信.png"/>
            </div>
            <p>短信</p>
        </div>
        <div class="box">
            <div class="img">
                <img src="./icos/通讯录.png"/>
            </div>
            <p>通讯录</p>
        </div>
        <div class="box">
            <div class="img">
                <img src="./icos/youtube.png"/>
            </div>
            <p>Youtube</p>
        </div>
        <div class="box">
            <div class="img">
                <img src="./icos/facebook.png"/>
            </div>
            <p>Facebook</p>
        </div>
        <div class="box">
            <div class="img">
                <img src="./icos/BILIBILI_LOGO (1).png"/>
            </div>
            <p>哔哩哔哩动画</p>
        </div>
        <div class="box">
            <div class="img">
                <img src="./icos/QQ (1).png"/>
            </div>
            <p>QQ</p>
        </div>
    </div>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
}
body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #efeeee;
}
.container{
    width: 700px;
    height: 600px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
}
.container .box{
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    align-content: center;
    width: 100px;
    height: 140px;
    margin: 20px;
}
.container .box .img{
    width: 100px;
    height: 100px;
    box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1),
    -18px -18px 30px rgba(255, 255, 255, 1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #efeeee;
    transition: box-shadow .2s ease-out;
    position: relative;
}

.container .box .img  img{
    width: 60px;
    transition: width 0.2s ease-out;
}
.container .box p{
    color: slategrey;
}
.container .box .img:hover{
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px rgba(255, 255, 255, 0.8),
    inset 18px 18px 30px rgba(0, 0, 0, 0.1),
    inset -18px -18px 30px rgba(255, 255, 255, 1);
    transition: box-shadow .2s ease-out;
}
.container .box .img:hover img{
    width: 58px;
    transition: width 0.2s ease-out;
}

效果

王绝天下-lnx
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
css实现 拟态按钮
织网的博客
05-06 1501
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>新拟态按钮</title> <body> <div> 拟态按钮 </div> </body> <style> body { display: grid; height: 100vh;
[前端] css的box-shadow简单实现新拟态
qq_45830308的博客
02-09 230
[前端] css的box-shadow简单实现新拟态
一个不错的CSS模拟的按钮效果
ξσ Dicky's Blog σξ
06-04 1875
代码如下： <!--.btnOFF{padding:3px;border:1px outset;cursor:pointer;background-color: green;width:100px;height:16px;text-align:center;}.btnON{padding:3px;border:1px inset;background-color: #CCCC33;wi
HTML+CSS鼠标拟态效果
this_is_Azou的博客
12-02 374
这里写自定义目录标题HTML+CSS鼠标拟态效果弹性布局弹性盒 `display:flex;`自适应布局单位vw/vh快捷编写方法HTMLCSS效果 HTML+CSS鼠标拟态效果 弹性布局 弹性盒 display:flex; flex-direction row,默认值，主轴为水平方向，起点在左端 roe-reverse，主轴为水平方向，起点在右端 column，主轴为垂直方向，起点在上沿 column-reverse，主轴为垂直方向，起点在下沿 flex-wrap nowrap,默认值，不换行
css拟态风格尝试以及css3新特性渐变使用
weixin_48727473的博客
06-21 558
拟态风格页面的实现，通过css3新特性阴影去现实立体效果的页面以及通过css3新特性渐变去使得页面更加丰富多彩
新拟态风格设计的网页
07-30
1. **按钮设计**：新拟态风格的按钮看起来像是微微凸起或凹陷，边缘采用柔和的圆角，高光和阴影效果使按钮具有立体感，增加了用户的点击欲望。 2. **卡片式布局**：卡片是网页设计中的常见元素，新拟态风格下的卡片...
CSS3新拟态图标悬停动画特效
07-24
在现代网页设计中，用户体验与视觉效果是至关重要的元素，而“新拟态”（Neumorphism）设计风格正是这两种需求的结合体。它融合了扁平化设计的简洁与实体设计的立体感，为用户界面带来了一种新颖、时尚的感觉。本篇...
新拟态个人引导页.zip
01-07
新拟态设计可以利用微妙的动画效果，如按钮按下时的微小变形或颜色变化，来增强用户与界面的互动感。 总的来说，"新拟态个人引导页.zip"提供了学习和实践新拟态设计的机会，无论是对于设计师还是对界面美学感兴趣的...
拟态风格登录界面.zip
最新发布
09-01
在拟态风格登录界面中，我们通常会看到这种设计原则的体现，它强调真实世界的视觉暗示，如光线、阴影、深度和触感反馈，使数字界面更加生动且易于理解。 首先，拟态设计的核心理念是“纸与墨”的概念，将界面元素...
简约时尚美新拟态风ppt模板
05-10
模板的设计特点是简约而不失时尚感，新拟态风格的运用体现在边框、按钮和其他元素的微阴影和高光处理上。这些细节使得模板中的图形看起来仿佛浮于表面之上，创造出一种半立体的效果，同时保持了扁平设计的简洁性。...
css3实现的拟态样式
github_34329638的博客
01-28 92
css3 实现的拟态样式
Neumorphism ： 集拟态美 ? 不不不，就是聊一聊CSS拟态而已啦。八千多字，我是扯了啥呀。
FOR 的博客
09-11 1391
最近有些忙，考驾照，上课，处理项目依赖。就没怎么学习新知识和发文章咯。 今天周六，聊一聊 拟态吧。英文怎么读我是不知道的。就顺便读吧。哈哈 Neumorphism——新拟态设计 什么是 Neumorphism Neumorphism - 新拟态UI风格是目前比较新颖的一种前端css设计风格. 它的格调简单，基本颜色比较浅，如米白，浅灰，浅蓝等。 再利用阴影呈现出凹凸效果。看起来和简单舒适，且有3D效果。因此我们可以通过拟态设计出很多优美的页面。 如下图 ： 什么是 Skeuomorphism Neum.
如何设计一枚「拟态」按钮
MayanDev
04-28 2592
如何设计一枚「拟态」按钮 最近在微博上看到一款很好看的键盘皮肤????。 这是一种被称作拟态化的设计，英文 Neumorphism /njʊ'mɔːfɪzəm/ 或者 Soft UI。 拟态化设计是最近兴起的设计风格，是继拟物化设计、扁平化设计，下一个界面设计的趋势。最初起源于Dribble 用户 alexplyuto 分享的设计稿，之后一度成设计师的参考，也引领了一波设计潮流。 可以看到，拟态设计...
前端新拟态UI风格按钮，button按钮点击凹陷效果
只会div的博客
01-28 1470
新拟态代码实现 复制以下代码运行查看效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> .button { display: flex; align-items: center; just
CSS拟物化图标
qq_36370910的博客
05-10 245
focus{} 点击后鼠标移开保持鼠标点击时的状态[获得焦点]（只有在时标签中有效）:visited{} 鼠标点击后的状态。:link{} 鼠标点击前显示的状态。:active{} 鼠标点击时的状态。:hover{} 鼠标悬停时的状态。/*鼠标接触之后两个按钮的效果*//*两个按钮的默认效果*/
WPF 实现拟态化按钮
JiesonLove的博客
05-28 525
用WPF实现拟态化按钮，主要得用颜色的渐变与阴影实现（效果如上图），喜欢的点个赞！ 实现代码如下： <Grid Background="#FFB1CFED"> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Ellipse Height="60" Width="60" HorizontalAlignment="Center" Vertic...
【前端实例代码】Html5+css3+JavaScript实现新拟态新拟物风格(Neumorphism)图标按钮动效网页效果~手把手教学~新手必会~超简单 ~
南北极之间
08-19 709
各位同学们：还有啥想看的功能或者特效不？欢迎在评论区留言哦！本人承接网网站开发，如有需要，欢迎私信咨询！如果您感觉文章对您有帮助~ 那就打赏一下，请笔者喝杯咖啡吧~对于每个学生来说，从高中到大学的过渡面孔有点棘手，因为他的生活正在发生不断的变化。他们应该在经济上和社会上独立，并在生活中做出非常关键的改变。他们的目标被赚更多钱的冲动所取代，因为他们对成功的定义发生了变化，职业建议不再意味着追随他们的梦想和快乐。大学不是一个教你如何在职业建议工作的地方;这是生命的一个阶段，给你关于生命的教训。你可能会看到一扇巨
表格中的一列是按钮，点击按钮弹出bootstarp拟态框，拟态框的标签获得按钮所在行的值
黄坤的博客
02-07 612
表格中的一列是按钮，点击按钮弹出bootstarp拟态框，拟态框的标签获得按钮所在行的值（包括格式） 1.看效果 点击上面的查看和发布，获得按钮所在行的标题，博客分类，博客标签 2.表格和拟态框 <table class="table table-striped table-bordered table-hover table-condensed" id="tb" border="1"...
新拟态图标样式
niew
12-16 1436
突然觉得新拟态的图标挺好看的，所以就写了几个样式 用uni-app写的，如果适应其他界面，请自行调整 <template> <view> <view class="row bg1"> <view class="cell"> <view class="btn1"> <image src="https://6e69-niew6-1302638010.tcb.qcloud.la/xinnitai/yinyue.p
写一个新拟态风格的css进度条
03-29
/* 新拟态风格进度条样式 */ .progress-bar { position: relative; height: 10px; background-color: #f2f2f2; border-radius: 5px; } .progress-bar::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; background-color: #ffa500; border-radius: 5px; animation: progress 2s ease-in-out; } @keyframes progress { 0% { width: 0; } 100% { width: 100%; } } .progress-bar::after { content: ""; position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px; background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); } /* 修改进度条颜色 */ .progress-bar.blue::before { background-color: #4a90e2; } .progress-bar.green::before { background-color: #27ae60; } .progress-bar.red::before { background-color: #c0392b; }

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值