按钮自动发光用html怎么弄,纯CSS3发光分享按钮的实现教程

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

061456129115.jpg

下面我们来分析一下实现的过程以及核心的源码,代码主要由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制作发光分享按钮的所有的实现过程,希望能帮到大家,谢谢

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用CSS3中的伪类和过渡属性来实现滑动按钮的效果。以下是一个简单的实现示例: HTML代码: ```html <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> ``` CSS代码: ```css .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input[type="checkbox"] { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } ``` 解释: - `.switch`类设置了开关按钮的基本样式,包括宽高、定位等。 - `input[type="checkbox"]`选择器隐藏了原生的复选框。 - `.slider`类设置了按钮的背景色、过渡效果等。 - `.slider:before`伪类设置了按钮内部的小圆点,以及其过渡效果。 - `input:checked + .slider`选择器设置了按钮选中时的背景色。 - `input:focus + .slider`选择器设置了按钮获取焦点时的阴影效果。 - `input:checked + .slider:before`选择器设置了按钮选中时,内部小圆点的位移效果。 - `.slider.round`和`.slider.round:before`类用于设置圆形按钮的样式,可根据需要选择使用。 这样就可以实现一个简单的滑动按钮效果了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值