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/ ...
随机推荐
- centos7 docker activemq
/ cd /home/activemq// wget http://apache.fayea.com/activemq/5.13.3/apache-activemq-5.13.3-bin.tar.gz ...
- json提交数据到服务端
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Courier New"; color: #393939; backgr ...
- HBase的Write Ahead Log (WAL) —— API与基本概念
HBase的数据写入操作,会先记录到HLog中,再真正写入到MemStore中.前者是对写入友好的格式,后者是对查询友好的格式.所以前者吞吐量更高,写入成功率大,提高了系统的可靠性,“基本”可以实现宕 ...
- web.xml listener和event
Listener接口 Event类 ServletContextListener ServletContextEvent ServletContextAttributeListener Servlet ...
- Python_Day4_函数
本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 定义: 函数是指将一组语句的集合通过一个名字( ...
- Nginx的第一个模块-HelloWorld
麻雀虽小,五脏俱全,小小的Hello World盛行于程序世界,就在于其代码虽短,但要真正运行起来,需要我们略通基本语法,稍懂编译运行环境,知晓操作过程,最后,还有一颗持之以恒,不怕折腾的心.前一阵子 ...
- Virtualbox安装USB2.0/3.0
系统:Ubuntu16.04 软件:Virtualbox5.1 1.打开Virtualbox,不启动虚拟系统. 2.点击设置->USB->启动usb2.0. 3.若发现不能启用,则到官网下 ...
- express+gulp构建项目(四)env环境变量
这里的文件的作用是负责设置env环境变量和日志. index.js try { require('dotenv').load({silent: true}); //dotenv从一个.env文件中读取 ...
- hg0088新2网址
封装通俗的说,就是我有一些秘密不想让人知道,就通过私有化变量和私有化方法,这样外界就访问不到了.hg0088新2网址然后如果你有一些很想让大家知道的东西,你就可以通过this创建的属性看作是对象共有属 ...
- Hprose question
1 在服务端 接口的开发中 如果定义了index()方法 中间不能够有参数,否则报错. 2 接口方法中的参数 最好使用单参数 如fun($uid ) 或者 如果需要多个参数 fun($param){$ ...