CSS动画中的线条过渡动画 – 爱CSS - 每多学一点知识就少写一行代码

关闭边栏(ESC)打开边栏(ESC)

如本站首页与文章页中四个边框的线条动画，这里下面是实行思路，如果想要似矩形变化，修改线条的top、left、right、bottom的值就行

/*设定元素的伪元素*/
div::before, div::after {
	position: absolute;
	content: '';
	opacity: 0;
	transition: opacity 0.4s, transform .4s
}
/*分别通过before、after来设定动画*/
div::before {
	top: 14%;
	right: 5%;
	bottom: 14%;
	left: 5%;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	transform: scale(0, 1);
	transform-origin: 0 0  /*设定动画从哪个坐标点开始，默认是从中心开始*/
}
div::after {
	top: 8%;
	right: 10%;
	bottom: 8%;
	left: 10%;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;	
	transform: scale(1, 0);
	transform-origin: 100% 0
}
/*鼠标经过父元素时候调用转变，如果想一直都变化，可以用一个动画来设置to属性就行*/
div-parent:hover div::before, div-parent:hover div::after {
	opacity: 1;
	transform: scale(1)
}

/*设定元素的伪元素*/

div::before, div::after {

position: absolute;

content: '';

opacity: 0;

transition: opacity 0.4s, transform .4s

}

/*分别通过before、after来设定动画*/

div::before {

top: 14%;

right: 5%;

bottom: 14%;

left: 5%;

border-top: 1px solid #fff;

border-bottom: 1px solid #fff;

transform: scale(0, 1);

transform-origin: 0 0 /*设定动画从哪个坐标点开始，默认是从中心开始*/

}

div::after {

top: 8%;

right: 10%;

bottom: 8%;

left: 10%;

border-right: 1px solid #fff;

border-left: 1px solid #fff;

transform: scale(1, 0);

transform-origin: 100% 0

}

/*鼠标经过父元素时候调用转变，如果想一直都变化，可以用一个动画来设置to属性就行*/

div-parent:hover div::before, div-parent:hover div::after {

opacity: 1;

transform: scale(1)

}

黑糖主题V1.52来一场DIY风暴

CSS 2017-01-06 19

以下的一些DIY都是基于黑糖主题V1.52进行修改的。在更改前请务必要先备份一下，以备往后恢复回…

文章按日期归档有伸缩效果

CSS 2017-01-16 1

本站的文章归档参考了511yj.com中的一篇文章修改而来。以下是实施的步骤：一、把以下代码保…

文章归档之时光轴样式风格

CSS 2017-01-16 2

博客首页文章列表过渡效果

CSS 2017-01-21 3

关于用视频作背景时要铺满DIV的问题

CSS 2019-01-10 3

苹果手机IOS设备对meta定义的私有属性

CSS 2017-02-12 1

博客首页文章列表过渡效果

文章归档之时光轴样式风格

黑糖主题V1.52来一场DIY风暴

文章按日期归档有伸缩效果

文章归档之时光轴样式风格

博客首页文章列表过渡效果

关于用视频作背景时要铺满DIV的问题

苹果手机IOS设备对meta定义的私有属性

向Zay进行回复取消回复

SQL Server 常用近百条SQL语句（收藏版）

SQL高效查询两个表不同的数据

五岁生日 | 这一年跟表姐一块庆祝生日，可心的一天了

跨域 | 百度联想词二种方式来实现

$.ajax({})方法success，error，complete，beforeSend

博客首页文章列表过渡效果

文章归档之时光轴样式风格

向Zay进行回复 取消回复

向Zay进行回复取消回复