那天浏览前端信息的时候看到汇智网的这个效果, 觉得很神奇, 于是照着它的代码仿照了一遍, 我们先看一下具体的效果, 如下:
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/CSS">
- @keyframes lineA{
- 0%,100%{clip:rect(0,340px,2px,0)}
- 25%{clip:rect(0,2px,340px,0)}
- 50%{clip:rect(338px,340px,340px,0)}
- 75%{clip:rect(0,340px,340px,338px)}
- }
- @keyframes lineB{
- 0%,100%{clip:rect(338px,340px,340px,0)}
- 25%{clip:rect(0,340px,340px,338px)}
- 50%{clip:rect(0,340px,2px,0)}
- 75%{clip:rect(0,2px,340px,0)}
- }
- .box{
- background-color: #f1f1f1;
- width: 300px;
- height: 300px;
- margin: 100px auto;
- position: relative;
- z-index: 3;
- }
- .box::before{
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- border: 2px solid red;
- margin: -20px;
- z-index: -1;
- -webkit-animation: lineA 8s linear infinite;
- -o-animation: lineA 8s linear infinite;
- animation: lineA 8s linear infinite;
- }
- .box::after{
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- border: 2px solid red;
- margin: -20px;
- z-index: -1;
- -webkit-animation: lineB 8s linear infinite;
- -o-animation: lineB 8s linear infinite;
- animation: lineB 8s linear infinite;
- }
- </style>
- </head>
- <body>
- <div class="box"></div>
- </body>
- </html>
一开始的时候觉得有点难以理解, 拆开来就很容易明白了
先通过 before 做一个和 div 一样大的盒子, 我们叫它 A, 并使用 margin 撑开, 并且给边框或者阴影 (就是移动的那两条线了), 效果如下:
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/css">
- .box{
- background-color: #f1f1f1;
- width: 300px;
- height: 300px;
- margin: 100px auto;
- position: relative;
- z-index: 3;
- }
- .box::before{
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- border: 2px solid red;
- margin: -20px;
- z-index: -1;
- }
- </style>
- </head>
- <body>
- <div class="box"></div>
- </body>
- </html>
这时候开始对他进行裁切, 为了方便理解, 我们先给盒子 A 一个背景颜色, 效果如下:
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/css">
- .box{
- background-color: #f1f1f1;
- width: 300px;
- height: 300px;
- margin: 100px auto;
- position: relative;
- z-index: 3;
- }
- .box::before{
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- border: 2px solid red;
- background: skyblue;
- margin: -20px;
- z-index: -1;
- clip:rect(0,100px,50px,10px);
- }
- </style>
- </head>
- <body>
- <div class="box"></div>
- </body>
- </html>
这时候, 我们需要了解一下裁切属性: clip:rect (top, right, bottom, left), 可以看到, 参数是按照上右下左的方向
clip:rect(0,100px,50px,20px):
上为 0, 下为 50px, 所以显示出来的盒子 A 的高度就是从 0 开始至 50px 的位置结束, 高度为 50px,
右为 100px, 左为 10px, 所以盒子的位置从左侧 10px 开始, 右至 100 结束, 宽度也就是 90px,
好了, 现在我们让他动起来, 加上 animation, 并在不同的节点添加裁切属性, 效果如下:
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/css">
- @keyframes lineA{
- 0%,100%{clip:rect(0,340px,2px,0)}
- 25%{clip:rect(0,2px,340px,0)}
- 50%{clip:rect(338px,340px,340px,0)}
- 75%{clip:rect(0,340px,340px,338px)}
- }
- .box{
- background-color: #f1f1f1;
- width: 300px;
- height: 300px;
- margin: 100px auto;
- position: relative;
- z-index: 3;
- }
- .box::before{
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- border: 2px solid red;
- background: skyblue;
- margin: -20px;
- z-index: -1;
- -webkit-animation: lineA 8s linear infinite;
- -o-animation: lineA 8s linear infinite;
- animation: lineA 8s linear infinite;
- }
- </style>
- </head>
- <body>
- <div class="box"></div>
- </body>
- </html>
通过背景颜色, 我们能够看出来裁切的运动轨迹, 这时, 这个效果已经大致出来了, 去掉背景颜色, 就是单边的移动线条了
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/css">
- @keyframes lineA{
- 0%,100%{clip:rect(0,340px,2px,0)}
- 25%{clip:rect(0,2px,340px,0)}
- 50%{clip:rect(338px,340px,340px,0)}
- 75%{clip:rect(0,340px,340px,338px)}
- }
- .box{
- background-color: #f1f1f1;
- width: 300px;
- height: 300px;
- margin: 100px auto;
- position: relative;
- z-index: 3;
- }
- .box::before{
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- border: 2px solid red;
- margin: -20px;
- z-index: -1;
- -webkit-animation: lineA 8s linear infinite;
- -o-animation: lineA 8s linear infinite;
- animation: lineA 8s linear infinite;
- }
- </style>
- </head>
- <body>
- <div class="box"></div>
- </body>
- </html>
第二条线条也是类似, 通过 after 来制作, 唯一不同的就是 clip 裁切的位置不一样, 多试验试验, 也就明白了
总的来说, 就是用 clip 属性对 before 和 after 编写的盒子进行裁切, 用通过 animation 动画来让他运动起来, 形成这种流动的效果不得不说, css 真是太神奇了
现在我也会制作看起来很炫酷的动态效果啦!
来源: http://www.qdfuns.com/article/25583/0275db020eef39e51278fa334b24543b.html