Html新拟态网页图标(自学)
2020-07-18 05:08
344 查看
页面展示
目录结构
image文件夹中存放的是图标
Html代码
图标下载自阿里巴巴矢量图标库
链接: 阿里巴巴矢量图标库.
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css"> <title>Document</title> </head> <body> <!-- 整个大盒子--> <div class="container"> <!--每个图标的小盒子--> <div class="box"> <!-- 放图标的小盒子--> <div class="img"> <img src="./image/卫星发射.SVG.png" alt=""> </div> <!--图标名称--> <p>卫星发射</p> </div> <div class="box"> <div class="img"> <img src="./image/卫星探测.SVG.png" alt=""> </div> <p>卫星探测</p> </div> <div class="box"> <div class="img"> <img src="./image/天文台.SVG.png" alt=""> </div> <p>天文台</p> </div> <div class="box"> <div class="img"> <img src="./image/彗星.SVG.png" alt=""> </div> <p>彗星</p> </div> <div class="box"> <div class="img"> <img src="./image/探测器.SVG.png" alt=""> </div> <p>探测器</p> </div> <div class="box"> <div class="img"> <img src="./image/月球公转.SVG.png" alt=""> </div> <p>月球公转</p> </div> <div class="box"> <div class="img"> <img src="./image/月球自传.SVG.png" alt=""> </div> <p>月球自传</p> </div> <div class="box"> <div class="img"> <img src="./image/木星.SVG.png" alt=""> </div> <p>木星</p> </div> <div class="box"> <div class="img"> <img src="./image/流星.SVG.png" alt=""> </div> <p>流星</p> </div> <div class="box"> <div class="img"> <img src="./image/火箭发射.SVG.png" alt=""> </div> <p>火箭发射</p> </div> <div class="box"> <div class="img"> <img src="./image/登月.SVG.png" alt=""> </div> <p>登月</p> </div> <div class="box"> <div class="img"> <img src="./image/登月车.SVG.png" alt=""> </div> <p>登月车</p> </div> <div class="box"> <div class="img"> <img src="./image/空间站.SVG.png" alt=""> </div> <p>空间站</p> </div> <div class="box"> <div class="img"> <img src="./image/陨石.SVG.png" alt=""> </div> <p>陨石</p> </div> </div> </body> </html>
CSS代码
*{ margin: 0; padding: 0; } body{ width: 100%; height: 100vh; display: flex; justify-content: 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-in-out; } .container .box .img img{ width: 60px; transition: width .2s ease-out; } .container .box p{ color: slategray; } .container .box .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; } .container .box .img:hover img{ width: 58px; transition: width .2s ease-out; }
相关文章推荐
- 不同小图标的编码网页中的大于号,小于号,应该用编码来代替,HTML中特殊字符和与之对应的ASCII代码...
- html网页头图标代码
- 怎么在HTML网页的浏览器标题栏显示小图标
- HTML网页的浏览器标题栏显示小图标的方法
- html .net 网页,网站标题添图标
- HTML 网页图标 页头图标
- HTML网页的浏览器标题栏显示小图标的方法
- html网页小图标
- 初识HTML中的div块元素—零基础自学网页制作
- 改jsp、html、asp的网页图标
- HTML自定义网页头部小图标
- HTML 常用小技巧 【标题图标】【锚点】【插入音乐,视频】【滚动效果】【嵌入网页】
- html设置网页标题栏logo(图标)
- html基础 link 设置网页标题前面的小图标
- html网页中显示浏览器标题栏小图标
- html网页标题头图标
- HTML网页的浏览器标题栏显示小图标
- Html网页左上角标题图标
- html网页中自定义浏览器标题栏小图标
- 请用fontAwesome代替网页icon小图标