css3-ghostButton

幽灵按钮：

完全用CSS3来实现这个效果，主要用的属性有 transition transform box-sizing 等。

大家参考看看，原理很简单。

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>ghost</title><link href="reset.css" rel="stylesheet"><link href="ghost.css" rel="stylesheet">
</head>
<body>
<div class="box"><div class="link link-mission"><span class="icon"></span><a href="#" class="button"><span class="line  line-top"></span><span class="line  line-right"></span><span class="line  line-bottom"></span><span class="line  line-left"></span>MISSION</a></div><div class="link link-play"><span class="icon"></span><a href="#" class="button"><span class="line  line-top"></span><span class="line  line-right"></span><span class="line  line-bottom"></span><span class="line  line-left"></span>PLAY</a></div><div class="link link-touch"><span class="icon"></span><a href="#" class="button"><span class="line  line-top"></span><span class="line  line-right"></span><span class="line  line-bottom"></span><span class="line  line-left"></span>TOUCH</a></div>
</div>
</body>
</html>

其中的rest.css是初始化一些样式的，大家可以用自己的重置样式。

ghost.css：

body {background-color: #333;
}.box {margin: 50px auto;width: 1000px;height: 280px;}.box .link {display: inline-block;margin: 0 20px;width: 205px;height: 280px;
}.box .link .icon {display: inline-block;width: 100%;height: 190px;transition: transform 0.5s;-webkit-transition: transform 0.5s;-moz-transition: transform 0.5s;-o-transition: transform 0.5s;
}.box .link .icon:hover {transform: rotate(360deg) scale(1.2);-ms-transform: rotate(360deg) scale(1.2);-webkit-transform: rotate(360deg) scale(1.2);
}.link-mission .icon {background: url("mission.png") no-repeat center;
}.link-play .icon {background: url("play.png") no-repeat center;
}.link-touch .icon {background: url("touch.png") no-repeat center;
}.button {display: block;position: relative;margin: 0 auto;padding-left: 20px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border: 2px solid rgba(255, 255, 255, 0.8);width: 180px;height: 50px;font-family: "微软雅黑", Arial, Verdana, sans-serif;font-size: 16px;font-weight: bold;line-height: 50px;background: url("allow.png") no-repeat 120px center;color: #2dcb70;transition: background 0.5s ease;-webkit-transition: background 0.5s ease;-moz-transition: background 0.5s ease;-o-transition: background 0.5s ease;
}.button:hover {border: 2px solid rgba(255, 255, 255, 1);background: url("allow.png") no-repeat 140px center;box-shadow: 0 0 5px rgb(255, 255, 255);
}/*线条共用属性*/
.button .line {position: absolute;transition: 0.3s ease;-webkit-transition: 0.3s ease;-moz-transition: 0.3s ease;-o-transition: 0.3s ease;
}/*从左飞入的线条*/.button:hover .line-top {top: -2px;left: -2px;width: 180px;height: 2px;background: #fff;
}.button .line-top {top: -2px;left: -100%;width: 0;height: 2px;background: #fff;
}/*从右飞入的线条*/
.button:hover .line-bottom {bottom: -2px;right: -2px;width: 180px;height: 2px;background: #fff;
}.button .line-bottom {bottom: -2px;right: -100%;width: 0;height: 2px;background: #fff;
}/*从下飞入*/
.button:hover .line-left {left: -2px;bottom: -2px;width: 2px;height: 50px;background: #fff;
}.button .line-left {left: -2px;bottom: -100%;width: 2px;height: 0;background: #fff;
}/*从上飞入的线条*/
.button:hover .line-right {right: -2px;top: -2px;width: 2px;height: 50px;background: #fff;
}.button .line-right {right: -2px;top: -100%;width: 2px;height: 0;background: #fff;
}

其中有四个素材图片，大家可以用自己的做一下尝试。

转载于:https://www.cnblogs.com/gavinzzh-firstday/p/5593586.html

css3-ghostButton相关推荐

HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
html滑动逐渐覆盖效果,创意jQuery和CSS3滑动覆盖响应式幻灯片特效
这是一款非常有创意的jQuery和CSS3滑动覆盖响应式幻灯片特效.该幻灯片特效采用响应式设计,在幻灯片切换时使用一个滑动块状区域来进行覆盖,显示新的幻灯片内容,整体效果非常不错. 使用方法 HTML ...
css3之transition、transform、animation比较
css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解. 其实, ...
了解CSS/CSS3原生变量var (转)
一.变量是个好东西在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,C ...
Notepad++支持jQuery、html5、css3
Notepad++里的代码提示文件是以XML文件存放于目录 ....\Notepad++\plugins\APIs\下的. 将这三个文件:html.xml, css.xml, javascript.x ...
纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
基于css3 transform实现散乱的照片排列
分享一款基于css3 transform实现散乱的照片排列.这是一款简单零散的css3相册排列特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <div class ...
CSS3无前缀脚本prefixfree.js与Animatable使用介绍
要求必备知识本文要求基本了解 JAVASCRIPT 和和 CSS3 基本知识. 运行环境桌面端:IE9 +,Opera 10+,火狐3.5 +,Safari 4+和Chrome浏览器;移动端: ...
php发光字体代码,CSS3怎么实现字体发光效果
这次给大家带来CSS3怎么实现字体发光效果,CSS3实现字体发光效果的注意事项有哪些,下面就是实战案例,一起来看一下. 博客页面左上角的"猿来是勇者"文字已制作发光效果,分享方法如 ...
html5类选择器选择权重,Python Html5和CSS3的新增功能：CSS权重与CSS3新增选择器
一.CSS权重概念 CSS权重概念:指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式. 二.权重的等级 2.1.权重的等级划分 ...

css3-ghostButton

css3-ghostButton相关推荐

最新文章

热门文章