新拟态按钮风格

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

新拟态 设计 图标 CSS 交互效果
关键词由优快云通过智能技术生成

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;
}

效果

【前端实例代码】Html5+css3+JavaScript实现新拟态新拟物风格(Neumorphism)图标按钮动效网页效果~手把手教学~新手必会~超简单 ~
南北极之间
08-19 835
各位同学们：还有啥想看的功能或者特效不？欢迎在评论区留言哦！本人承接网网站开发，如有需要，欢迎私信咨询！如果您感觉文章对您有帮助~ 那就打赏一下，请笔者喝杯咖啡吧~对于每个学生来说，从高中到大学的过渡面孔有点棘手，因为他的生活正在发生不断的变化。他们应该在经济上和社会上独立，并在生活中做出非常关键的改变。他们的目标被赚更多钱的冲动所取代，因为他们对成功的定义发生了变化，职业建议不再意味着追随他们的梦想和快乐。大学不是一个教你如何在职业建议工作的地方;这是生命的一个阶段，给你关于生命的教训。你可能会看到一扇巨
css 仿真按钮
liuhao9999的博客
11-07 206
【代码】css 仿真按钮。
新拟态风格UI组件库
11-02
新拟物风格的数据呈现UI组件 Sketch源文件 人员信息/音视频/开关/卡片/进度条/数据表/多选框等等
css实现 拟态按钮
织网的博客
05-06 1682
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>新拟态按钮</title> <body> <div> 拟态按钮 </div> </body> <style> body { display: grid; height: 100vh;
有趣的CSS - 新拟态按钮
设计师工作日常
03-11 1343
用css写的一个好看的新拟态风格的按钮。
HTML5+CSS3小实例：新拟态按钮
亿点点的博客
03-06 539
HTML5+CSS3小实例：新拟态按钮
【UI设计】新拟态风格
学习 记录 总结 分享
07-05 958
那么，大家最关心的问题来了，新拟态到底是不是2020年即将要流行的设计风格？相信 大家最近这段时间多多少少也看过很多关于新拟态一些介绍，在趋势文章里面或者在其他文章里面看到。首先必须得中肯的说，像大多数设计趋势一样，新拟态是设计用户界面的一种看起来视觉比较新颖的表现手法，让产品界面看起来既柔软又方便，但是它也存在一些局限，前面我们也提到一些，比如它实现起来还是有一点难度，也不够灵活等等但是我说一点不同的是，这也是我一直认为的一点，就是UI设计运营化，运营设计游戏化，这是未来的趋势。
新拟态风格设计的网页
07-30
1. **按钮设计**：新拟态风格的按钮看起来像是微微凸起或凹陷，边缘采用柔和的圆角，高光和阴影效果使按钮具有立体感，增加了用户的点击欲望。 2. **卡片式布局**：卡片是网页设计中的常见元素，新拟态风格下的卡片...
前端新拟态UI风格按钮，button按钮点击凹陷效果
只会div的博客
01-28 1657
新拟态代码实现 复制以下代码运行查看效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> .button { display: flex; align-items: center; just
2024新拟态个人主页网站源码
06-20
【2024新拟态个人主页网站源码】是一个基于HTML、CSS和JavaScript的网页制作实例，展示了如何利用现代Web技术构建一个富有创新感和个人风格的个人主页。拟态设计（Neomorphism）是近年来在UI设计领域兴起的一种新...
如何设计一枚「拟态」按钮
MayanDev
04-28 2896
如何设计一枚「拟态」按钮 最近在微博上看到一款很好看的键盘皮肤????。 这是一种被称作拟态化的设计，英文 Neumorphism /njʊ'mɔːfɪzəm/ 或者 Soft UI。 拟态化设计是最近兴起的设计风格，是继拟物化设计、扁平化设计，下一个界面设计的趋势。最初起源于Dribble 用户 alexplyuto 分享的设计稿，之后一度成设计师的参考，也引领了一波设计潮流。 可以看到，拟态设计...
设计风格：新拟态，一文掌握特征、应用场景、运用方法
2401_82616673的博客
02-17 2733
新拟态风格（Neumorphism）是一种设计趋势，它结合了传统拟物风格和扁平设计风格的特点。它的特点是使用柔和的阴影和光线效果，使界面元素看起来具有立体感和触感，仿佛是由真实的材质构成的。新拟态风格的发展历程可以追溯到2019年左右。当时，设计师开始对传统的扁平设计风格有些审美疲劳，他们开始尝试在界面元素上添加一些阴影和光线效果，以增加立体感和触感。这种设计风格很快引起了关注，并在设计社区中迅速传播开来。新拟态风格的发展受到了科技的进步和图形处理技术的提升的推动。
新拟态按钮界面模仿B站——Index界面注释
qq_46987086的博客
11-26 413
jsp <%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="en" style="background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%)""> <head> .
你知道吗？国外火爆的新拟态风格，教你如何用PPT制作效果
高效办公达人的博客
04-02 1134
经常混设计圈的朋友们都发现了，最近在国外火爆的新拟态风格。 这名字听起来挺新颖的。那么到底什么才是新拟态的设计风格呢？ 我们先来通过几个作品，看下新拟态风的庐山真面目。 怎么样？这种设计风格你爱上了吗？其实这种新的设计风格，正在颠覆我们审美疲劳的扁平风格，能带给我们新的视觉体验。 01.新拟态风的起源 起因是源于2019年11月5日，来自乌克兰的设计师 Alex...
WPF 实现拟态化按钮
JiesonLove的博客
05-28 630
用WPF实现拟态化按钮，主要得用颜色的渐变与阴影实现（效果如上图），喜欢的点个赞！ 实现代码如下： <Grid Background="#FFB1CFED"> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Ellipse Height="60" Width="60" HorizontalAlignment="Center" Vertic...
css模拟真实的按钮
liuhao9999的博客
06-30 461
css模拟真实的按钮
CSS技巧专栏：一日一例 19 -纯CSS实现超酷的水晶按钮特效
最新发布
uu0216的博客
08-06 1449
我们观察一下按钮动作，鼠标移动到按钮上时，发生了两个变化： 1.按钮本体向下滑动了几个像素。但按钮的高光没有动。 2.按钮下面的深色投影，在按钮向下移动的时候，阴影没有了。我们可以把按钮本体那个投影层的透明度降低看看效果：
css 拟态键盘
织网的博客
05-06 1170
键盘效果: 点击键盘效果: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>新拟态按钮</title> <style> html, body { display: flex; justify-content: center; align-items: center; height: 100
css写一个拟物态的switch按钮
苏苏就是小苏苏的博客
10-23 492
1.实现效果 2.实现原理 transform: transition box-shadow cubic-bezier translate3d label+input[type=‘checkbox’] 3.完整实现代码 <body> <label class="label"> <div class="switch"> <input class="switch-state" type="checkbox" name="check" value="chec
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值