Html 新拟态网页图标超有立体感

怼烎@ 2022-12-30 14:55 181阅读 0赞

> 效果图：

![在这里插入图片描述][20201226144715809.gif]

> 主要代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .img{
                width: 100px;
                height: 100px;
                box-shadow: 18px 18px 30px rgba(0,0,0,0.1), -18px -18px 30px rgba(255,255,255,1);
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 20px;
                background-color: #efeeee;
                transition: box-shadow .2s ease-in-out;
                position: relative;
            }
            img{
                width: 60px;
                height: 60px;
                transition: width .2s ease-out;
            }
            .img:hover{
                box-shadow: 0px 0px 0px rgba(0,0,0,0.1) ,0px 0px 0px rgba(255,255,255,1),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;
            }
            .img:hover img{
                width: 58px;
                transition: width .2s ease-out;
            }
        </style>
    </head>
    <body>
        <div class="img"><img src="./search.png" alt=""></div>
    </body>
    </html>

> 原理：

通过hover来改变阴影的呈现方式，做一个过渡效果的显示

[20201226144715809.gif]: /images/20221120/5bb4fa2e03bf4fb49b3d4b7e5b201013.png

发表评论取消回复

表情：

评论列表（有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

相关新拟态 (Neumorphism / soft ui) UI CSS设计示例分享

在过去的几个月中，新拟态（Neomorphic）的UI设计风靡一时。它被誉为2020年最火的UI设计趋势之一，在互联网上广受欢迎。Neumorphism融合了Skeuomorp

朱雀/ 2023年07月08日 12:29/ 0 赞/ 146 阅读

相关好看样式网页图标的设计（html+css）

html: <!doctype html> <html> <head> <meta charset="utf-8">

港控/mmm°/ 2023年01月08日 02:21/ 0 赞/ 226 阅读

相关 Html 新拟态网页图标超有立体感

> 效果图： ![在这里插入图片描述][20201226144715809.gif] > 主要代码： <!DOCTYPE html> <html lang

怼烎@/ 2022年12月30日 14:55/ 0 赞/ 182 阅读

相关教你使用CSS3实现新拟态UI

教你使用CSS3实现新拟态UI 什么是新拟态？新拟态的英文名称是“Neumorphism”，是New+Skeuomorphism的组合词，同时也叫“Soft UI

深碍√TFBOYSˉ_/ 2022年12月04日 01:14/ 0 赞/ 283 阅读

相关 tomcat 修改网页图标

1.准备favicon.ico ![20200829102657231.png][] 2.修改tomcat中图标文件进入目录 cd tomca

心已赠人/ 2022年12月02日 01:19/ 0 赞/ 242 阅读

相关 html5添加的新属性,html5有新属性吗

html5有新属性，例contextmenu、contentEditable、hidden、draggable、“data-\”、placeholder、required、pa

怼烎@/ 2022年10月06日 09:47/ 0 赞/ 231 阅读

相关 CSS 实现新拟态(Neumorphism) UI 风格

![682fcedea0de1c236c5032378e6675b7.png][]来源 | http://www.fly63.com/article/detial/10541?

小咪咪/ 2022年09月12日 02:58/ 0 赞/ 119 阅读

相关网页使用SVG图标

<html> <style> .logo{ background-repeat:no-repeat; background-i

浅浅的花香味﹌/ 2022年05月28日 14:07/ 0 赞/ 242 阅读

相关设置title网页图标

设置网页title图标 1.准备.ico的图片如果没有下面网站可以在线制作 [http://www.faviconico.org/][http_www.faviconi

迷南。/ 2022年05月18日 09:38/ 0 赞/ 266 阅读

相关 HTML链接：带超链接的网页

HTML链接：带超链接的网页任务描述相关知识概念属性 href属性锚 URL实例：创建网页内导

傷城~/ 2021年05月16日 20:37/ 0 赞/ 749 阅读