[前端css-1] 拟物化图标

1.效果展示：

2.知识点：

 1.flex布局（css弹性盒子）2.box-shadow（盒子阴影）3.transition （动画）4.:active （伪元素）

3.源代码:

 <!--* @Description: 文件描述：* @Autor: hwf* @Date: 2021-03-29 17:36:36* @LastEditors: Seven* @LastEditTime: 2021-08-12 09:33:30
-->
<!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>拟物化图标</title><style>* {padding: 0;margin: 0;}body {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #efeeee;color: slategrey;}.container {width: 700px;height: 600px;display: flex;justify-content: space-around;align-items: center;flex-wrap: wrap;}.container .box {width: 100px;height: 140px;margin: 20px;display: flex;justify-content: space-around;align-items: center;flex-direction: column;cursor: pointer;}.container .box .img {display: flex;justify-content: center;align-items: center;width: 100px;height: 100px;border-radius: 20px;box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2),-18px -18px 30px rgba(255, 255, 255, 1);transition: all 0.2s ease-in-out;}.container .box .img img {width: 60px;transition: all 0.2s ease-out;/*  禁止ios上，长按拖拽  */user-select: none;-webkit-user-drag: none;}.container .box .img:active {box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 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);}.container .box .img:active img {width: 58px;}code {background-color: pink;color: red;border-radius: 8px;padding: 4px;font-size: 24px;}</style>
</head><body><div class="container"><div class="box"><div class="img"><img src="https://umapu.cn/imgs/20210328/cc45ce7f8bf87a8d012c4a7308f4261e.png" /></div><p>录音机</p></div><div class="box"><div class="img"><img src="https://umapu.cn/imgs/20210328/11aa9b770e1fed0bd34c5e708606e118.png" /></div><p>通讯录</p></div><div class="box"><div class="img"><img src="https://umapu.cn/imgs/20210328/e12f338f6eb78a87facb304ffb6cad78.png" /></div><p>电话</p></div><div class="box"><div class="img"><img src="https://umapu.cn/imgs/20210328/0b1de5a0bdc01a020ab70bc01600d4af.png" /></div><p>短信</p></div><div class="box"><div class="img"><img src="https://umapu.cn/imgs/20210328/267e0d6f0611c0048951aa569d2c0411.png" /></div><p>浏览器</p></div><div class="box"><div class="img"><img src="https://umapu.cn/imgs/20210328/361fe94d613de0a2a31ce56a956dedf2.png" /></div><p>相机</p></div><div class="box"><div class="img"><img src="https://umapu.cn/imgs/20210328/d67d25ebe775ea0e8e9e6e848816d59d.png" /></div><p>相册</p></div><div class="box"><div class="img"><img src="https://umapu.cn/imgs/20210328/b58954988f726286d62bc40a9bc2af69.png" /></div><p>哔哩哔哩</p></div><div class="box"><div class="img"><img src="https://umapu.cn/imgs/20210328/395b9da275ad27dae15574ffb28ea74c.png" /></div><p>日历</p></div><div class="box"><div class="img"><img src="https://umapu.cn/imgs/20210328/1ef9ca69cd834d58461898d7ced37e1b.png" /></div><p>时钟</p></div><div class="box"><div class="img"><img src="https://umapu.cn/imgs/20210328/920537c1df9b153392addcdda5e8ef35.png" /></div><p>Youtube</p></div><div class="box"><div class="img"><img src="https://umapu.cn/imgs/20210328/4ce21379a2d63284fe0618b36938828e.png" /></div><p>Facebook</p></div><div class="box"><div class="img"><img src="https://umapu.cn/imgs/20210328/f06499697fee2c65be252b796e385b1e.png" /></div><p>微信</p></div><div class="box"><div class="img"><img src="https://umapu.cn/imgs/20210328/2d7bd573f799997bea61233d1b83a947.png" /></div><p>QQ</p></div><div class="box"><div class="img"><img src="https://umapu.cn/imgs/20210328/d88ac7c07fa4a3f39c89d7fe9ce1e269.png" /></div><p>微博</p></div><div style="margin: 25px;">加我微信号：<code>hwf0926</code>，一起学习更多前端知识</div></div>
</body></html>

4.相关知识点学习资料：

freeCodeCamp 响应式网页设计（css弹性盒子课程）

Flex 布局教程：语法篇

[前端css-1] 拟物化图标相关推荐

教你用 css 写一个拟物化图标
拟物化(Skeuomorphism)风格的图标在iOS7发布之前广为流行.相当长一段时间,无论系统.网页还是第三方应用都争相使用拟物化的设计风格.那时候的dribbble网,各色优秀的拟物化设计作品也 ...
UI设计趋势中的新拟物化图标设计素材模板
什么是拟物化呢? 就是光影关系几乎完全模仿实物,图标与实物几近相似. 拟物化图标优点,是容易识别,缺点是设计耗时. 拟物化图标分为设计拟物和交互拟物. 设计拟物就是设计与实物贴近的图标,交互拟物如在手 ...
UI设计：使用PS绘制拟物化图标
UI设计:使用PS绘制拟物化图标 1.应用图标大小1024*1024px 2.拟物化图标讲究的是尽可能于实际物体相近 3.图标的光是从上往下照射的,所以会呈现一定的阴影 4.使用fx里的各种效果是图标 ...
鸿蒙系统拟物化图标,疑Flyme8 UI曝光：极致拟物化设计引领icon风
近日,国外著名爆料网站slashleaks曝光了疑似Flyme 8系统的新UI界面.从谍照上看,相比Flyme 7,全新Flyme 8的设计风格回归拟物化,导航条和状态栏也做了细节调整,视觉效果更棒. ...
鸿蒙系统拟物化图标,那些让人不得不吐槽的软件设计风格
[TechWeb报道]相信IT迷们都会发现无论是iOS 7还是最新的Android L,其设计风格都越来越类似,而著名科技外媒Arstechnica就集合了一些员工开了次吐槽大会,对当今软件设计中他们 ...
鸿蒙系统拟物化图标,iOS 15界面曝光，安卓12发布，手机系统高效功能体验才是关键...
近日,iOS 15的锁屏界面和桌面小组件设计被曝光.根据网友的曝光图来看,iOS 15和iPhone一样,开始了"返璞归真"的设计,重新采用了拟物化的图标,看起来舒适感极强.另外, ...
Css玻璃拟物化风格生成器
字面上由玻璃(glass)和拟物化(skeumorphism)组成,叫法颇多:玻璃拟态.玻璃拟物化设计.玻璃拟物风格,其实意思都对,它比新拟物风格更直观清晰. 玻璃拟物风格特征显著,用户也能快速确定界 ...
前端例程20210802：玻璃拟物化风格（Glassmorphism）设计与实现
文章目录目的风格特征代码实现辅助工具总结目的玻璃拟物化风格(Glassmorphism)是这两年有人提出来的一种风格,乍一看和以前的毛玻璃效果很像(至少再我看来是差不多啦~).玻璃拟物化 ...
PS制作红色拟物化时钟icon图标
开发工具与关键技术:图层样式效果图: 主要过程: 一:时钟外壳框处理新建一个尺寸800*600像素,分辨率72的画布. 用现状圆角矩形工具绘制一个380*380像素的圆角矩形,圆角参数值100,填 ...

[前端css-1] 拟物化图标

[前端css-1] 拟物化图标

1.效果展示：

2.知识点：

3.源代码:

4.相关知识点学习资料：

[前端css-1] 拟物化图标相关推荐

最新文章

热门文章