闪亮玻璃图标悬浮效果

效果展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--利用<i>标签设计的图标需要引入csscss样式下载地址：https://www.thinkcmf.com/font_awesome.html将下载的包放入项目中，并引用其中的font-awesome.min.css
--><link rel="stylesheet"type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"><style>*{margin: 0;padding: 0;}section{position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background: linear-gradient(to bottom,#ff00ff,white);}section:before{content: "";position: absolute;bottom: 0;width: 100%;height: 50%;z-index: 1;border-top: 1px solid rgba(255,255,255,0.6);}.color{position: absolute;/*给图像设置高斯模糊,数值越大越模糊，实现毛玻璃*/filter: blur(150px);}.color:nth-child(1){background: #ff359b;width: 600px;height: 600px;top: -350px;}.color:nth-child(2){background: #00d2ff;width: 600px;height: 600px;bottom: -150px;left: 100px;}.color:nth-child(3){background: #fffd87;width: 600px;height: 600px;bottom: 50px;right: 0px;}ul{display: flex;z-index: 2;list-style: none;}ul li{margin: 10px;}.ico{width: 80px;height: 80px;display: block;border: 1px solid rgba(255,255,255,0.4);/*盒子阴影*/box-shadow:1px 5px 45px rgba(0,0,0,0.1);border-right: 1px solid rgba(255,255,255,0.2);border-bottom: 1px solid rgba(255,255,255,0.2);display: flex;justify-content: center;align-items: center;text-decoration: none;border-radius: 10px;/*    图标大小，颜色*//*    因为是用<i>标签设计的图标，而<i>是用来让字体变斜*/font-size: 2em;color: #fff;/*backdrop-filter：让背景模糊，图标底下的那一层（那根线）；filter: blur(150px)：是让本身模糊*/backdrop-filter: blur(2px);transition: 0.5s;/*当光闪背景，就是一个白色盒子背景，溢出图标外时隐藏*/overflow: hidden;}.ico:hover{/*    图标上移20px*/transform: translateY(-20px);}/*光闪背景，就是一个白色盒子背景，将白色盒子向右移出图标（图标右边）之外，当鼠标放上图标时，将白色盒子向左移出图标（图标）左边之外*/.ico::before{position: absolute;content: '';width: 50px;height: 100%;background: rgba(255,255,255,0.5);transform: skewX(45deg) translateX(150px);transition: 0.5s;}.ico:hover::before{transform: skewX(45deg) translateX(-150px);}</style>
</head>
<body>
<!--<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。-->
<section>
<!-- 让3个颜色盒子随意放置，再用filter: blur(150px)将盒子模糊处理，实现毛玻璃效果   模糊背景效果--><div class="color"></div><div class="color"></div><div class="color"></div>
<!--    5个图标--><ul><li><a href="#"class="ico"><i class="fa fa-facebook" aria-hidden="true"></i></a></li><li><a href="#"class="ico"><i class="fa fa-twitter" aria-hidden="true"></i></a></li><li><a href="#"class="ico"><i class="fa fa-instagram" aria-hidden="true"></i></a></li><li><a href="#"class="ico"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li><li><a href="#"class="ico"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li></ul>
</section>
</body>
</html>

毛玻璃实现原理：加上filter: blur(150px);让图片变模糊

光闪背景，就是一个白色盒子背景，将白色盒子向右移出图标（图标右边）之外，当鼠标放上图标时，将白色盒子向左移出图标（图标）左边之外

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

HTML5+CSS3小实例：闪亮的玻璃图标悬浮效果
HTML5+CSS3实现闪亮的玻璃图标悬浮效果,光与玻璃的碰撞,好有质感的玻璃图标. 先看效果: 源代码: <!DOCTYPE html> <html><head> ...
【闪亮的玻璃图标悬浮效果】
文章目录前言一.html代码二.css 总结前言闪亮的玻璃图标悬浮效果提示:以下是本篇文章的代码内容,供大家参考,相互学习一.html代码代码如下: <!DOCTYPE html ...
闪亮的玻璃图标悬浮导航栏效果
闪亮的玻璃图标悬浮导航栏效果 https://www.bilibili.com/video/BV1H44y157nr FROM :B站UP:艾恩小灰灰 <!DOCTYPE html> &l ...
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 ...

闪亮玻璃图标悬浮效果

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

最新文章

热门文章