CSS3入门--线条动画特效实例
HTML:
<div></div>
CSS:
div{ width: 200px; height: 200px; margin: 200px auto; background: #000;
position: relative;-webkit-backface-visibility: hidden;
backface-visibility: hidden;}
div::after{
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1,0);
transform: scale(1,0);
}
div::before{
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0,1);
transform: scale(0,1); }
div::before,div::after{
position:absolute;
top:30px;
right:30px;
bottom:30px;
left:30px;
content:'';
opacity:0;
-webkit-transition:opacity .35s,-webkit-transform .35s;
transition:opacity .35s,transform .35s
pointer-events: none;
} div:hover::after,div:hover::before {
opacity:1;
-webkit-transform:scale(1);
transform:scale(1)
} body{background: yellowgreen;}
*, :after, :before, input[type=search] {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
text-align: center;
}
demo:http://paul-xiao.github.io/demo/
CSS3入门--线条动画特效实例的更多相关文章
- 6种炫酷的CSS3按钮边框动画特效
6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...
- 纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载
- jQuery动画特效实例教程
本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下: <div class="module"> <div cla ...
- 9款超绚丽的HTML5/CSS3应用和动画特效
1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...
- 基于HTML5/CSS3图片网格动画特效
现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱.今天要分享的这款HTML5图片网格动画特效就非常炫酷.图片缩略图按网格的布局一行行排列,你只需点击按钮即 ...
- css3鼠标悬停图片边框线条动画特效
css3鼠标经过内容区时,边框线条特效效果制作. html: <div class="strength grWidth hidden"> <div class ...
- CSS3实现边框线条动画特效
<div class="box-line"></div> CSS代码 .box-line, .box-line::before, .box-line::af ...
- CSS3实现Loading动画特效
查看效果:http://hovertree.com/texiao/css3/43/ 代码如下: <!DOCTYPE html> <html> <head> < ...
- CSS3 3D旋转动画代码实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 在 ASP.NET MVC 中使用 HTML Helpers 的那些事
在 ASP.NET MVC 中使用 HTML Helpers 方法,可以返回得到标准的 HTML 标签,就像 <input>.<button> 或者 <img> 等 ...
- ElasticSearch与Spring Boot集成问题
1.None of the configured nodes are available 或者 org.elasticsearch.transport.RemoteTransportException ...
- 下载安装JDK,配置环境变量
Hello,JDK; 在开始学习JAVA之前,第一件事情肯定是被告知:先下载JDK.就像我的一个朋友问我的一样"JDK是个什么鬼?我学的不是JAVA么,为什么要下载JDK?". J ...
- Javascript是单线程的深入分析
本来想总结一下的,网上却发现有人已经解释的很清楚了,特转过来. 这也解释了为什么在用自动化测试工具来运行dumrendtree时设定的超时和测试case设定的超时的关联性. 面试的时候发现99%的童鞋 ...
- web开发必备插件
文本编辑器百度ueditor:http://ueditor.baidu.com/website/
- CentOS 安装 lamp(转)
一般情况下,安装的都是最新的正式版,除非你有特殊需求,要安装指定的版本,本文暂不讨论.从最基础的开始,一点点完成一个可用的 Linux 主机.这里就开始介绍如何在 CentOS 6.0 上安装 LAM ...
- 高并发下MySQL出现checking permissions
在某些数据访问层框架中,会使用show full tables from test like 'demo',来检查数据库的状态.当数据库中表的数量较少时,并没有出现严重的问题.但是当数据库中的表数量多 ...
- SQL与Mongodb聚合的对应关系(举例说明)
SQL中的聚合函数和Mongodb中的管道相互对应的关系: WHERE $match GROUP BY $group HAVING $match SELECT $project ORDER BY $s ...
- ThinkPHP3.2.3使用cli命令行模式
使用tp3.2.3的cli模式时,报错.加上绝对路径还是报错.所以采用普通模式 if(version_compare(PHP_VERSION,'5.3.0','<')) die('require ...
- Oracle笔记二
一.数据库语言分类 二.DML之数据插入 把一个表中的数据查询出来插入另外一个表中. create table student(id number,name varchar2(20),age num ...