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

怼烎@ 2022-12-30 14:55 197阅读 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 条评论，197人围观）

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

相关阅读

相关 HTML5 有哪些新特性？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ HTML5 有哪些新特性？语义化标签：视频和音频支持表单增强

比眉伴天荒/ 2023年10月14日 11:45/ 0 赞/ 40 阅读

相关 HTML-如何在网页标题中显示 icon 图标

想要显示 icon 图标需要使用 link 标签，通过 link 标签的相关属性来显示图标 <link rel="shortcut icon" href="favic

红太狼/ 2023年06月07日 15:28/ 0 赞/ 38 阅读

相关 CSS实现新拟态效果

新拟态是一种图形样式，其原理是为界面的UI元素赋予真实感。原生名词有几个叫法，Neumorphism / soft ui，翻译过来是新拟态或者是软ui。国内的翻译叫，新拟物

川长思鸟来/ 2023年02月28日 15:26/ 0 赞/ 21 阅读

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

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

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

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

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

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

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

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

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

相关 tomcat 修改网页图标

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

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

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

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

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

相关网页使用SVG图标

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

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

相关设置title网页图标

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

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