前言

闪亮的玻璃图标悬浮效果

提示：以下是本篇文章的代码内容,供大家参考,相互学习

一、html代码

代码如下：

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>闪亮的玻璃图标悬浮效果</title><link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"><link rel="stylesheet" href="../css/5.css">
</head><body><div class="container"><div class="color"></div><div class="color"></div><div class="color"></div><ul><li><a href="#"><i class="fa fa-qq" aria-hidden="true"></i></a></li><li><a href="#"><i class="fa fa-weixin" aria-hidden="true"></i></a></li><li><a href="#"><i class="fa fa-weibo" aria-hidden="true"></i></a></li><li><a href="#"><i class="fa fa-tencent-weibo" aria-hidden="true"></i></a></li><li><a href="#"><i class="fa fa-telegram" aria-hidden="true"></i></a></li></ul></div>
</body></html>

二、css

代码如下：

*{margin:0;padding:0;/* 这个是告诉浏览器：你想要设置的边框和内边距的值是包含在总宽高内的 */box-sizing: border-box;
}
.container{position: absolute;width: 100%;/* 100%窗口高度 */height: 100vh;/* 弹性布局 水平垂直居中 */display: flex;justify-content: center;align-items: center;/* 渐变背景 自上而下 */background: linear-gradient(to bottom, #2193b0, #6dd5ed);
}
.container::before{content: "";position: absolute;bottom:0px;width: 100%;height: 50%;z-index: 1;border-top: 1px solid rgba(255,255,255,0.5);/* 背景模糊 */backdrop-filter: blur(5px);
}
.container .color{position: absolute;/* 模糊滤镜 数值越大越模糊 */filter: blur(200px);
}
.container .color:nth-child(1){background: #fd746c;width: 800px;height: 800px;top:-450px;
}
.container .color:nth-child(2){background: #cf8bf3;width: 600px;height: 600px;bottom: -150px;left: 100px;
}
.container .color:nth-child(3){background: #fdb99b;width: 400px;height: 400px;bottom: 50px;right: 100px;
}
ul{position: relative;display: flex;z-index: 2;
}
ul li{position: relative;list-style: none;margin: 10px;
}
ul li a{position: relative;width: 80px;height: 80px;display: inline-block;border-radius: 10px;display: flex;justify-content: center;align-items: center;text-decoration: none;color: #fff;font-size: 32px;border:1px solid rgba(255,255,255,0.4);border-right: 1px solid rgba(255,255,255,0.2);border-bottom: 1px solid rgba(255,255,255,0.2);/* 盒子阴影 */box-shadow: 0px 5px 45px rgba(0,0,0,0.1);/* 背景模糊 */backdrop-filter: blur(2px);/* 加个动画过渡，动画才不会太过生硬 */transition: all 0.5s;overflow: hidden;
}
ul li a:hover{/* 鼠标移入元素沿Y轴上移 */transform: translateY(-20px);
}
/* 加个扫光动画 */
ul li a::before{content: "";position: absolute;top:0px;left:0px;width: 50px;height: 100%;background-color: #fff;/* 元素沿X轴45横切，沿X轴右移150px */transform: skewX(45deg) translateX(150px);/* 动画过渡 */transition: all 0.5s;
}
ul li a:hover::before{/* 元素沿X轴45横切，沿X轴左移150px */transform: skewX(45deg) translateX(-150px);
}

总结

渐变背景自上而下: background: linear-gradient(to bottom, #2193b0, #6dd5ed);
背景模糊:backdrop-filter: blur(5px);
模糊滤镜: filter: blur(200px); //数值越大越模糊

【闪亮的玻璃图标悬浮效果】相关推荐

HTML5+CSS3小实例：闪亮的玻璃图标悬浮效果
HTML5+CSS3实现闪亮的玻璃图标悬浮效果,光与玻璃的碰撞,好有质感的玻璃图标. 先看效果: 源代码: <!DOCTYPE html> <html><head> ...
闪亮的玻璃图标悬浮导航栏效果
闪亮的玻璃图标悬浮导航栏效果 https://www.bilibili.com/video/BV1H44y157nr FROM :B站UP:艾恩小灰灰 <!DOCTYPE html> &l ...
闪亮玻璃图标悬浮效果
效果展示 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
React Native悬浮效果组件
由于其他的原因,对于React Native相关的内容最近没有投入太多的关注,从去年年底出版了<React Native移动开发实战>后,对于React Native的关注就比较少了.最近 ...
如果去掉UITableView上的section的headerView和footerView的悬浮效果
项目需要cell的间距,又不需要悬浮效果,百度之后找到这个方法,记录一下,备忘. 用UIScrollView的代理方法实现 - (void)scrollViewDidScroll:(UIScrollV ...
[译] CSS 变量实现炫酷鼠标悬浮效果
原文: Stunning hover effects with CSS variables 我的博客:[译] CSS 变量实现炫酷鼠标悬浮效果我最近从Grover网站上的有趣的悬停动画中获得灵感.将 ...
2011年最新使用CSS3实现各种独特悬浮效果的教程
日期:2011/11/03 来源:tympanus 编译:GBin1.com CSS3的功能非常强大,这个毋庸置疑.在这篇教程中我们将使用一些独特的方式来实现一些特效.我们使用CSS3的trans ...
html 悬浮阴影,css实现悬浮效果的阴影的方法示例
本文介绍了css实现悬浮效果的阴影的方法示例,分享给大家,具体如下: 要实现的效果图: 实现的代码: -webkit-box-shadow:0px 3px 3px #c8c8c8 ; -moz-box ...
Android之实现夸克浏览器书签和历史页面滑动时候右上角图标切换效果
1 需求实现夸克浏览器书签和历史页面滑动时候右上角图标切换效果,页面滑动的时候,图标也左右滑动,但是只是显示其中的一个 https://www.captainai.net/st/ 2 代码实现 xm ...

【闪亮的玻璃图标悬浮效果】

文章目录

前言

一、html代码

二、css

总结

【闪亮的玻璃图标悬浮效果】相关推荐

最新文章

热门文章