关闭边栏(ESC)打开边栏(ESC)
如本站首页与文章页中四个边框的线条动画，这里下面是实行思路，如果想要似矩形变化，修改线条的top、left、right、bottom的值就行
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/*设定元素的伪元素*/ 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) } |
很棒，取经了~
感谢来访
过渡动画是个好东西，能让视觉上不会产生那么生硬的感觉，会有一丝丝滑过的享受