一比一复刻ACFun视频网站页面

最新推荐文章于 2026-01-21 13:49:32 发布

原创最新推荐文章于 2026-01-21 13:49:32 发布 · 589 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了如何在网页中实现锚点返回时的平滑滚动效果，图片hover时的放大效果，以及使用iframe创建子窗口的技术。通过CSS和HTML代码展示了这些实用技巧的应用。

一、效果图

二、实用小样

1.让页面内的锚链接返回锚点时有滑动效果

body,

html {

scroll-behavior: smooth;

}

语法：scroll-behavior有两个属性值，默认auto，auto:滚动框立即滚动smooth:实现平稳的滚动

2.让图片hover时放大

.five-content img {

cursor: pointer;（光标变成手指）

/* 宽高会同时过渡 */

transition: all 0.6s;

}

.five-content img:hover {

/* 图片放大1.4倍 */

transform: scale(1.4);

}

3.在页面内开辟窗口

iframe属性

三、部分代码展示

 <header>
        <div class="top">
            <div class="top-left">
                <h1 id="fanhui"> <a href="https://www.acfun.cn/"> <img src="./img/AVFun logo.svg" alt="logo"></a></h1>
                <a href="https://shop213417608.taobao.com/" target="_blank">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daojushangcheng"></use>
                    </svg><span>周边商城</span>
                </a>
                <a href="https://www.acfun.cn/face-catcher" target="_blank">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangjix"></use>
                    </svg> <span> ACFun面捕助手</span>
                </a>
            </div>
            <form class="top-middle" action="#">
                <input type="text" name="search" maxlength="50" placeholder=" 全民狂欢直播节">
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                    </svg></a>
                <ul class="top-drop-down-box">
                    <p style="font-size: 12px; color:#999 ">今日热搜</p>
                    <li> <a href="#" style="color:#fd4c5d;font-weight: 600; font-size: 14px;">1.化物语</a> </li>
                    <li> <a href="#" style="color:#fd4c5d;font-weight: 600; font-size: 14px; ">2.三坪房间的侵略者</a> </li>
                    <li> <a href="#" style="color:#fd4c5d;font-weight: 600; font-size: 14px;">3.大贵族</a> </li>
                </ul>
            </form>
            <div class="top-right">
                <ul>
                    <li>
                        <a href="#"> <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shouji"></use>
                            </svg></a>
                    </li>
                    <li><a href="#">登录/注册</a></li>
                    <li>
                        <a href="#"> <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xiaoxi"></use>
                            </svg></a>
                    </li>
                    <li>
                        <a href="#"> <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-lishi"></use>
                            </svg></a>
                    </li>
                    <li>
                        <a href="#"> <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-wodedongtai"></use>
                            </svg></a>
                    </li>
                    <li>
                        <a href="#"> <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-chuangzuozhongxin"></use>
                            </svg>
                        </a>
                    </li>
                </ul>
                <form class="contribute" action="#">
                    <a href="#">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shangchuan"></use>
                        </svg>
                        <input type="buttom" name="contribute" value="投稿">
                    </a>
                </form>
            </div>
        </div>
        <img class="background" src="./img/background.png" title="AC在，爱一直在！">
        <nav>
            <ul>
                <li class="home-page"><a href="#">首页</a></li>
                <li><a href="#">AC正义</a></li>
                <li class="fanju"><a href="#">番剧</a>
                    <div class="drop-down-box">
                        <ul>
                            <li><a href="#">番剧列表</a></li>
                            <li><a href="#">TV动画</a></li>
                            <li><a href="#">剧场动画</a></li>
                            <li><a href="#">国产动画</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">动画</a></li>
                <li><a href="#">娱乐</a></li>
                <li><a href="#">生活</a></li>
                <li><a href="#">音乐</a></li>
                <li><a href="#">舞蹈.偶像</a></li>
                <li><a href="#">游戏</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">影视</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">鱼塘</a></li>
                <li><a href="#">文章</a></li>
                <li><a href="#">直播</a></li>
                <li><a href="#"> <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-daochu1024-02"></use>
                        </svg> <span>全站排行榜</span> </a></li>
            </ul>
        </nav>
    </header>

标签

#前端 #html #js