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入门--线条动画特效实例的更多相关文章

  1. 6种炫酷的CSS3按钮边框动画特效

    6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...

  2. 纯CSS3文字Loading动画特效

    纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载

  3. jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下:     <div class="module">   <div cla ...

  4. 9款超绚丽的HTML5/CSS3应用和动画特效

    1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...

  5. 基于HTML5/CSS3图片网格动画特效

    现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱.今天要分享的这款HTML5图片网格动画特效就非常炫酷.图片缩略图按网格的布局一行行排列,你只需点击按钮即 ...

  6. css3鼠标悬停图片边框线条动画特效

    css3鼠标经过内容区时,边框线条特效效果制作.   html: <div class="strength grWidth hidden"> <div class ...

  7. CSS3实现边框线条动画特效

    <div class="box-line"></div> CSS代码 .box-line, .box-line::before, .box-line::af ...

  8. CSS3实现Loading动画特效

    查看效果:http://hovertree.com/texiao/css3/43/ 代码如下: <!DOCTYPE html> <html> <head> < ...

  9. CSS3 3D旋转动画代码实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. centos7 docker activemq

    / cd /home/activemq// wget http://apache.fayea.com/activemq/5.13.3/apache-activemq-5.13.3-bin.tar.gz ...

  2. json提交数据到服务端

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Courier New"; color: #393939; backgr ...

  3. HBase的Write Ahead Log (WAL) —— API与基本概念

    HBase的数据写入操作,会先记录到HLog中,再真正写入到MemStore中.前者是对写入友好的格式,后者是对查询友好的格式.所以前者吞吐量更高,写入成功率大,提高了系统的可靠性,“基本”可以实现宕 ...

  4. web.xml listener和event

    Listener接口 Event类 ServletContextListener ServletContextEvent ServletContextAttributeListener Servlet ...

  5. Python_Day4_函数

    本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 定义: 函数是指将一组语句的集合通过一个名字( ...

  6. Nginx的第一个模块-HelloWorld

    麻雀虽小,五脏俱全,小小的Hello World盛行于程序世界,就在于其代码虽短,但要真正运行起来,需要我们略通基本语法,稍懂编译运行环境,知晓操作过程,最后,还有一颗持之以恒,不怕折腾的心.前一阵子 ...

  7. Virtualbox安装USB2.0/3.0

    系统:Ubuntu16.04 软件:Virtualbox5.1 1.打开Virtualbox,不启动虚拟系统. 2.点击设置->USB->启动usb2.0. 3.若发现不能启用,则到官网下 ...

  8. express+gulp构建项目(四)env环境变量

    这里的文件的作用是负责设置env环境变量和日志. index.js try { require('dotenv').load({silent: true}); //dotenv从一个.env文件中读取 ...

  9. hg0088新2网址

    封装通俗的说,就是我有一些秘密不想让人知道,就通过私有化变量和私有化方法,这样外界就访问不到了.hg0088新2网址然后如果你有一些很想让大家知道的东西,你就可以通过this创建的属性看作是对象共有属 ...

  10. Hprose question

    1 在服务端 接口的开发中 如果定义了index()方法 中间不能够有参数,否则报错. 2 接口方法中的参数 最好使用单参数 如fun($uid ) 或者 如果需要多个参数 fun($param){$ ...