1. David Wu首页
  2. web前端
  3. HTML

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

了解如何添加固定的顶部,底部,左、右边框框页面使用CSS定位和动画 1. Animated border frame The Anita site features fixed black or white borders throughout, elegantly framing the page cont WP网站建设

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

gudingkuang

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>

 

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/7188

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注