使用CSS和jQuery创建一个固定边界的动态框架

了解如何添加固定的顶部，底部，左、右边框框页面使用CSS定位和动画

1. Animated border frame

The Anita site features fixed black or white borders throughout, elegantly framing the page content as you scroll. This element isn’t merely decorative however, forming a home for navigation and indeed the fly-out Follow Us tab for social links. Essentially it achieves this with four <div> elements linked to one main CSS class, then four subclasses. Here we’ll examine this technique for adding a thick frame-like, responsive border that grows on page load.

2. HTML page structure

The example HTML structure starts with the four <div> elements forming the black strips for the top, bottom, left and right borders of our frame. Attach the parent ‘border’ CSS class then four subclasses that will not only define specific positioning but also dictate the horizontal and vertical pairs for animation. The sections of code included on FileSilo for this step are purely optional to provide test content when viewing the demo.

3. Basic border classes

A first border class crucially sets the fixed position, along with background colour (black) and indeed z-index (100) so the border stays on top. The height and width applies only to top and bottom borders, initially set to zero pixels height and zero per cent width. This is then switched to initialise the left/right borders to zero values, before each animation property calls our two @keyframes classes that we’ll define later.

4. Get into position

Three subclasses for the right, left and bottom borders are then used to cleverly position those elements, specifically for completing the frame. A combination of the auto command and zero (0) right and bottom positioning forces them to the correct edges and fixes them there when the viewport is resized. Notice how the Anita site raises the z-index of the right border for the top-right navigation menu.

.border.right {
left: auto;
right: 0;
/*  z-index: 102; */
}
.border.left {
top: auto;
bottom: 0;
}
.border.bottom {
top: auto;
bottom: 0;
left: auto;
right: 0;
}

5. Add the @keyframes classes

Next we’ll add the animation bit by defining the @keyframes classes referenced earlier in our border class animation properties. The first, growHori, increases the size of both horizontal (top and bottom) border strips from their initial height and width values to those required. The second, growVert, does the same for the vertical (left and right) border strips but flips the values.

@keyframes growHori {
from { height: 0px; width: 0%; }
to { height: 50px; width: 100%; }
}
@keyframes growVert {
from { width: 0px; height: 0%;}
to { width: 50px; height: 100%;}
}

6. Add classes on load

We want the border to ‘grow’ on page load – this is easily achieved by writing a <script> before our closing </body> tag. You can use jQuery with the latest library attached, or JavaScript (commented) with both versions shown. Both versions will dynamically add the @keyframes classes to the top/bottom and left/right borders.

<script>
//JQUERY:
$(".border").addClass("growHori");
$(".border.left, .border.right").addClass("growVert");
//PUREJS:
//document.getElementsByClassName("border").classList.add("growHori");
//document.getElementsByClassName("border left, border right").classList.add("growVert");
</script>