基础理解2:CSS3按钮动画
一个Css3按钮效果很好，仔细看了一下发现就是::after,::before然后加上transition，transform等效果实现，主要关注一下几点就能轻松实现：
1、伪类需要position定位，相对的button也需要定位一下
2、设置一下z-index属性,一般button设置为1， button::after或者button:before设置为-1即可
3、transition实现动画效果，如果需要transform旋转一下
效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style type="text/css">
button:hover:after {
width: 100%;
}
button:hover {
color: #000;
}
button:after {
content: '';
background-color: #fff;
transition: all .5s;
width: 0%;
position: absolute;
top: 3px;
left: 0px;
height: 34px;
z-index: -1;
}
button {
width: 100px;
height: 40px;
border: 0px;
color: white;
background-color: red;
font-size: 16px;
position: relative;
z-index: 1;
cursor: pointer;
font-family: 'Microsoft YaHei';
}
</style>
</head>
<body>
<button>
保存
</button>
</body>
</html>
基础理解2:CSS3按钮动画的更多相关文章
- 8款超酷而实用的CSS3按钮动画
1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...
- 魔幻般冒泡背景的CSS3按钮动画
这是一款非常有特点的CSS3按钮,按钮的背景不是北京图片,也不是单纯的颜色,而是一组魔幻般的冒泡背景动画.当我们将鼠标滑过按钮时,按钮的冒泡背景动画就可以展示出来.可以说这款CSS3按钮的设计风格相当 ...
- 纯CSS3冒泡动画按钮实现教程
这款CSS3动画按钮非常的有创意,鼠标在滑过按钮时并不像其他按钮那样仅仅改变按钮的背景颜色,而是出现很酷的冒泡动画.这么惊艳的CSS3动画按钮,这篇文章主要将按钮实现的过程和代码分享给大家,希望能给在 ...
- 5个基于css3超炫的鼠标滑动按钮动画
今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...
- 8套迷人精致的CSS3 3D按钮动画
1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...
- 6种炫酷的CSS3按钮边框动画特效
6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...
- 一款基于css3的动画按钮
之前为大家分享了 推荐10款纯css3实现的实用按钮.今天给大家带来一款基于css3的动画按钮.实现的效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=& ...
- 《零基础学HTML5+CSS3(全彩版)》读书笔记
2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...
- 使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
随机推荐
- 【WP8.1开发】用手机来控制电脑的多媒体播放
为了用电脑看电影时方便控制,我就突发其想,做一个手机app来通过无线网络远程调节电脑上的音量.后来进行尝试成功后,我就想,光是调音量似乎单调了些,就把播放/暂停,上一首,下一首,等多媒体控制功能也加上 ...
- windows自带记事本导致文本文件（UTF-8编码）开头三个字符乱码问题
在windows平台下,使用系统的记事本以UTF-8编码格式存储了一个文本文件,但是由于Microsoft开发记事本的团队使用了一个非常怪异的行为来保存UTF-8编码的文件,它们自作聪明地在每个文件开 ...
- EntityFramework之异步、事务及性能优化（九）
前言 本文开始前我将循序渐进先了解下实现EF中的异步,并将重点主要是放在EF中的事务以及性能优化上,希望通过此文能够帮助到你. 异步 既然是异步我们就得知道我们知道在什么情况下需要使用异步编程,当等待 ...
- T-SQL：毕业生出门需知系列（二）
第2课 检索数据 2.1 SELECT 语句 用途:从一个或多个表中检索数据信息 关键字:作为SQL组成部分的保留字.关键字不能用作表或列的名字. 为了使用SELECT检索表数据,必须至少给出两条信息 ...
- EF CodeFirst EntityTypeConfiguration 自关联映射配置
实体示例代码: public class Message { public Message() { } public int ID { get; private set; } public strin ...
- Repository 仓储，你的归宿究竟在哪？（一）－仓储的概念
写在前面 写这篇博文的灵感来自<如何开始DDD(完)>,很感谢young.han兄这几天的坚持,陆陆续续写了几篇有关于领域驱动设计的博文,让园中再次刮了一阵"DDD探讨风&quo ...
- Spark入门实战系列--10.分布式内存文件系统Tachyon介绍及安装部署
[注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .Tachyon介绍 1.1 Tachyon简介 随着实时计算的需求日益增多,分布式内存计算 ...
- ASP.NET通过递归添加树(Treeview)
先来看看效果,基本上就是这样的. 所谓树,无非就是2点,第一个:根节点,第二:叶子节点,其中叶子节点中还可能有叶子节点,但是根节点始终只有一个. 下面贴上 各部分的代码 1.PAGE_LOAD载入事件 ...
- MySQL4.0命令操作学习笔记
声明:下列内容并非原创,仅仅是最近学习笔记整理. -------------------------------------- 进入mysql安装路径bin目录下: 1.开启服务 winmysqlad ...
- jQuery实现checkbox的全选和反选
$(function () { if ($(".chk_all")) { $(".chk_all").click(function () { $("i ...