您现在的位置是：网站首页> 编程资料编程资料

纯CSS3发光分享按钮的实现教程css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

2023-10-25 237人已围观

简介 这篇文章主要为大家介绍了利用纯CSS3实现的点击发光按钮特效,供大家一起共同分享学习，本篇文章有完整的源代码分享给大家，需要的朋友可以参考下

今天我们要利用CSS3来完成一款很酷的发光分享按钮，并将整理的源代码分享给大家，如果需要，你也可以将此CSS3分享按钮应用到自己的项目中去，也欢迎将此文分享给你的好友。下面先来看一看效果图


下面我们来分析一下实现的过程以及核心的源码，代码主要由HTML和CSS组成，应该说比较简单。
HTML代码：

复制代码
代码如下:














以上的HTML结构利用了一个ul列表将5个分享按钮横向排列起来，结构非常清晰。
CSS代码：
首先我们需要将ul中的项横向排列，这就需要实现以下的CSS代码：

复制代码
代码如下:

ul {
list-style: none;
float: left;
}
ul li {
position: relative;
width: 100px; height: 100px;
float: left;
background: #474644;
border-radius: 15px;
border-bottom: 5px solid #33322f;
border-left: 3px solid #000000;
box-shadow: -3px 5px 10px 3px rgba(51, 50, 47, 0.5), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, 0px 2px 1px rgba(0, 0, 0, .7);
-webkit-transition: -webkit-box-shadow .15s ease-in-out;
}

然后是实现分享按钮中的图标，这里我们引用了一个外部的字体库font-awesome.css，这个CSS文件中定义了很多图标字体，所以我们只需在页面上引用这个文件就可以了。

在这个CSS文件中我们可以看出，如果要添加facebook的图标，只要这样写就可以了：

复制代码
代码如下:

.fa-facebook:before {
content: "\f09a";
}

最后我们要实现的是鼠标滑过的发光效果，其实说白了，就是改变文字的投影和内部图标颜色渐变动画，渐变动画如下代码所示：

复制代码
代码如下:

ul li:hover i{
-webkit-transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
ul li:active{
border-bottom: 1px solid #33322f;
top: 5px;
border-left: 1px solid #000000;
margin-right: 2px;
box-shadow: -2px 4px 7px 1px rgba(51, 50, 47, 0.7), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, -1px 2px 1px rgba(0, 0, 0, .7);
z-index: -1;
}

文字投影效果：

复制代码
代码如下:

.facebook:hover i{
text-shadow:
0px 0px #394C89, 0px 1px #32447A, -1px 2px #2C3B6A, -2px 3px #26335B, 0px 6px 5px rgba(51, 50, 47, 0.8),
0 0 1em #3f5598;
color: #3f5598;
}

以上就是用CSS3制作发光分享按钮的所有的实现过程，希望能帮到大家，谢谢

上一篇：css样式表中中文名字体乱码使用Unicode可解决WEB页面HTML分析工具 V1.1 绿色中文免费版 支持Unicode编码的各种html/有趣的Unicode CSS类命名方式-CSS教程-网页制作-网页教学网CSS 常用中文字体 Unicode 编码表

下一篇：css 串联选择器和后代选择器介绍及示例CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网