博客友链效果

ps酷教程
已于 2023-04-15 10:39:09 修改
阅读量479
点赞数
分类专栏：前端学习文章标签： css css3 javascript
于 2023-04-13 01:32:36 首次发布
本文链接：https://blog.csdn.net/qq_16992475/article/details/130120435
版权
前端学习专栏收录该内容
145 篇文章 7 订阅
订阅专栏
在这里插入图片描述
学习风`宇blog
flex布局使用百分比作2栏网格布局，内部也是使用flex布局做左图右文
使用IntersectionObserver这个浏览器提供的Api，配合vue指令，当元素出现在可视区时，添加上移的动画效果。注意：元素的初始状态，是visibility:hidden隐藏状态的，然后达到可视区时，通过添加类名的方式，来指定动画和让visibility:visible可见。
图片也是通过el.getBoundingClientRect()这个api，配合vue指令，在bind初始化时候，就把src给换成data-src，src使用默认图片，然后，在inserted时，作第一次图片加载（有可能图片在未滚动时就已经在可视区了），并且监听滚动事件，当图片出现在可视区时，再把data-src的值给src
向下加载更多效果
<style lang="scss">
/* 封面图下移效果 */
@keyframes slidedown {
    0% {
        opacity: 0.3;
        transform: translateY(-60px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.slidedown {
    animation: slidedown 1s;
}

/* 内容上移效果 */
@keyframes slideup {
    0% {
        opacity: 0.3;
        transform: translateY(60px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.slideup {
    animation: slideup 1s;
}

/* 旋转加载效果 */
@keyframes spinLoading {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spinLoading {
    animation: spinLoading 1s infinite;
}

.banner {
    height: 400px;
    background-image: url(@/assets/bg4.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    color: #eee;

    .banner-content {
        position: absolute;
        bottom: 25%;
        width: 100%;
        text-align: center;
        text-shadow: 0.05rem 0.05rem 0.1rem rgb(0 0 0 / 30%);

        height: 108px;
        font-size: 30px;
        letter-spacing: 0.3em;

    }
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
}

p {
    margin: 0;
}

@keyframes slideUpBigIn {
    0% {
        transform: translateY(40px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.aniSlideUpBigIn {
    animation: slideUpBigIn 1s;
    visibility: visible !important;
}


.friend-link-wrapper {
    display: flex;
    // border: 1px solid red;
    max-width: 1200px;
    margin: 40px auto;

    padding: 40px 30px;
    border-radius: 10px;

    .description {
        flex-grow: 1;
        line-height: 2em;

        h1 {
            margin: 0 20px;
            margin-left: 40px;
            font-weight: bold;
            font-size: 20px;
            position: relative;

            &::before {
                content: '\e888';
                font-family: "iconfont";
                font-weight: normal;
                color: #49b1f5;
                position: absolute;
                left: -1.5em;
            }
        }

        .welcome {
            margin: 0 60px;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                width: 5px;
                height: 5px;
                background-color: red;
                top: 1em;
                left: -0.7em;
                border-radius: 50%;
            }
        }

        blockquote {
            background-color: #daefff;
            border-left: 4px solid #3cc1ff;
            border-radius: 5px;
            padding: 5px 10px;
        }
    }

    .friends {
        display: flex;
        flex-wrap: wrap;
        padding: 20px 40px;

        .friend {
            width: calc(50% - 20px);
            display: flex;
            margin: 10px;
            border-radius: 10px;
            box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.08);

            visibility: hidden;

            .fl-avatar {
                width: 100px;
                height: 100px;
                border-radius: 5px;
                overflow: hidden;
                margin-right: 10px;
                padding: 10px;

                img {
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                    border-radius: 5px;
                    transition: all 0.3s;

                    &:hover {
                        transform: scale(1.2);
                    }
                }
            }

            .fl-info {
                flex: 1;
                padding-top: 8px;
                padding-right: 10px;

                // overflow: hidden;
                a {
                    display: block;
                    color: #5abdff;
                    font-weight: bold;
                    margin-bottom: 6px;
                }

                p {
                    font-size: 14px;
                    color: #3e3e3e;
                    line-height: 1.3;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    word-break: break-all;
                }
            }
        }
    }

    .load-more {
        text-align: center;
        color: #3e3e3e;

        .more-again {
            .loading-text {
                cursor: pointer;
                color: #5abdff;

                i {
                    font-size: 12px;
                }
            }

            .loading-ani {
                display: flex;
                color: #3e3e3e;
                align-items: center;
                justify-content: center;

                .loading-icon {
                    i {
                        display: block;
                        width: 2em;
                        height: 2em;
                        font-size: 1.6em;
                        // border: 1px solid red;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
        }

        .no-more {
            color: #ccc;
            user-select: none;
        }
    }
}
</style>

<template>
    <div>
        <navbar />
        <div class="banner slidedown">
            <div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;backdrop-filter: blur(5px);"></div>
            <div class="banner-content">
                <div>友情链接</div>
            </div>
        </div>

        <div class="friend-link-wrapper shadow slideup">

            <div class="description">

                <h1>本站信息</h1>
                <blockquote>
                    <p>名称: Halo world</p>
                    <p>简介: 热爱技术一点点的学习</p>
                    <p>头像: http://xxxx</p>
                </blockquote>
                <h1>申请方法</h1>
                <p class="welcome">需要交换友链的可在本页留言</p>
                <blockquote>
                    处于信息需要，大佬你的信息格式要包含：网站名称、网站链接、头像链接、网站介绍、名称颜色
                </blockquote>
                <h1>小伙伴们</h1>

                <div>
                    <div class="friends">
                        <div class="friend" v-slideUp>
                            <a href="#" class="fl-avatar">
                                <img v-lazy1 style="" src="@/assets/fl/fl1.png" alt="">
                            </a>
                            <div class="fl-info">
                                <a href="#" class="fl-link">冰箱主人のBlog</a>
                                <p>冰箱里什么都没有呢</p>
                            </div>
                        </div>
                        <div class="friend" v-slideUp>
                            <a href="#" class="fl-avatar">
                                <img v-lazy1 style="" src="@/assets/fl/fl2.png" alt="">
                            </a>
                            <div class="fl-info">
                                <a href="#" class="fl-link">優萌初華</a>
                                <p>琉璃的医学 & 编程笔记</p>
                            </div>
                        </div>
                        <div class="friend" v-slideUp>
                            <a href="#" class="fl-avatar">
                                <img v-lazy1 style="" src="@/assets/fl/fl3.png" alt="">
                            </a>
                            <div class="fl-info">
                                <a href="#" class="fl-link">Sady'Blog</a>
                                <p>永远年轻，永远热泪盈眶.</p>
                            </div>
                        </div>
                        <div class="friend" v-slideUp>
                            <a href="#" class="fl-avatar">
                                <img v-lazy1 style="" src="@/assets/fl/fl4.png" alt="">
                            </a>
                            <div class="fl-info">
                                <a href="#" class="fl-link">漫漫</a>
                                <p>漫漫即慢慢啊~</p>
                            </div>
                        </div>
                        <div class="friend" v-slideUp>
                            <a href="#" class="fl-avatar">
                                <img v-lazy1 style="" src="@/assets/fl/fl5.png" alt="">
                            </a>
                            <div class="fl-info">
                                <a href="#" class="fl-link">2T的固态</a>
                                <p>DaVan的个人博客</p>
                            </div>
                        </div>
                        <div class="friend" v-slideUp>
                            <a href="#" class="fl-avatar">
                                <img v-lazy1 style="" src="@/assets/fl/fl6.png" alt="">
                            </a>
                            <div class="fl-info">
                                <a href="#" class="fl-link">八尺妖剑</a>
                                <p>惟有热爱，可抵岁月漫长!</p>
                            </div>
                        </div>
                        <div class="friend" v-slideUp>
                            <a href="#" class="fl-avatar">
                                <img v-lazy1 style="" src="@/assets/fl/fl7.png" alt="">
                            </a>
                            <div class="fl-info">
                                <a href="#" class="fl-link">花未眠的个人博客</a>
                                <p>一个疯狂的coder</p>
                            </div>
                        </div>
                        <div class="friend" v-slideUp>
                            <a href="#" class="fl-avatar">
                                <img v-lazy1 style="" src="@/assets/fl/fl8.png" alt="">
                            </a>
                            <div class="fl-info">
                                <a href="#" class="fl-link">Big_fw</a>
                                <p>Try the best</p>
                            </div>
                        </div>
                        <div class="friend" v-slideUp>
                            <a href="#" class="fl-avatar">
                                <img v-lazy1 style="" src="@/assets/fl/fl9.png" alt="">
                            </a>
                            <div class="fl-info">
                                <a href="#" class="fl-link">皮皮龙</a>
                                <p>一位无所事事的大学码农</p>
                            </div>
                        </div>
                        <div class="friend" v-slideUp>
                            <a href="#" class="fl-avatar">
                                <img v-lazy1 style="" src="@/assets/fl/fl10.png" alt="">
                            </a>
                            <div class="fl-info">
                                <a href="#" class="fl-link">忻辰</a>
                                <p>忻辰</p>
                            </div>
                        </div>
                        <div class="friend" v-for="friend, idx in friendList" :key="idx" v-slideUp>
                            <a href="#" class="fl-avatar">
                                <img v-lazy1 style="" :src="friend.avatar" alt="">
                            </a>
                            <div class="fl-info">
                                <a href="#" class="fl-link">{{ friend.name }}</a>
                                <p>{{ friend.bio }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="load-more">
                        <div v-show="hasMore" class="more-again">
                            <div v-show="!isLoading" class="loading-text" @click="loadMore">
                                加载更多 <i class="iconfont icon-gengduo"></i>
                            </div>
                            <div v-show="isLoading" class="loading-ani">
                                <span class="loading-icon spinLoading">
                                    <i class="iconfont icon-jiazai"></i>
                                </span>
                            </div>
                        </div>
                        <div v-show="!hasMore" class="no-more">
                            已经到底了~
                        </div>
                    </div>
                </div>


            </div>

        </div>

        <Footer></Footer>

    </div>
</template>

<script>
import Navbar from '@/views/Navbar'
import Footer from '@/views/Footer'

let img1 = require('@/assets/fl/fl1.png')


export default {
    name: 'FriendLink',
    methods: {
        showInfo(e) {
            alert('同学你好！')
            // console.log(e.target)
        }, showMsg(msg) {
            console.log(msg)
        },
    },
    data() {
        return {
            hasMore: true,
            isLoading: false,
            loadingCount: 0,
            friendList: []
        }
    },
    methods: {
        loadMore() {
            this.isLoading = true
            if (this.loadingCount <= 2) {
                this.loadingCount++
                setTimeout(() => {
                    this.isLoading = false
                    this.friendList.push(
                        {
                            name: 'pscool',
                            bio: '热爱技术,一点点的学习1',
                            avatar: img1
                        },
                        {
                            name: 'pscool2',
                            bio: '热爱技术,一点点的学习2',
                            avatar: img1
                        },
                        {
                            name: 'pscool3',
                            bio: '热爱技术,一点点的学习3',
                            avatar: img1
                        },
                        {
                            name: 'pscool4',
                            bio: '热爱技术,一点点的学习4',
                            avatar: img1
                        }
                    )
                    if(this.loadingCount == 2) {
                        this.hasMore = false
                    }
                }, 1500)
                
            }
        }
    },
    directives: {
        slideUp: {
            inserted(el, binding) {
                let observer = new IntersectionObserver((entries) => {
                    for (let entry of entries) {
                        if (entry.isIntersecting) {
                            console.log('出现。。。');
                            el.classList.add('aniSlideUpBigIn');
                            observer.unobserve(el)
                        }
                    }
                }, { threshold: 0.5 })
                observer.observe(el)
            }
        }
    },
    components: {
        Navbar, Footer
    }
}
</script>