HTML+CSS完成的动画页面

已于 2022-04-26 14:52:13 修改
阅读量2.9k 收藏 34
点赞数 3
分类专栏： css学习 文章标签： css 动画 html
于 2021-10-19 00:18:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XXX51129/article/details/120835576
版权

本网页为html+css完成的页面，仅为学习交流之用。页面非常粗糙，有不足之处请谅解。

另：页面为一个，不可跳转。

目录

代码部分：

1、HTML页面

料理次元官网-伪.html

2、CSS页面布局部分

料理次元官网-伪.css

3、CSS动画效果部分

料理次元动画效果.css

页面展示：

网页效果静图：​

 页面效果视频：

网页制作借鉴&图片来源：

借鉴网页：

大部分图片来源：

小部分图片来源：

网页所用图片资源：

网页拿取步骤：

1、新建一个文件夹，名字随意，例如：料理次元官网-伪

2、在文件夹里新建一个HTML文档，名字随意。例如：料理次元官网-伪.html

将HTML代码复制这个HTML文档

3、在  料理次元官网-伪  这个文件夹里新建一个文件夹，命名为css(小写)。

在里面新建两个CSS文件，分别命名为

料理次元官网-伪.css  （这个里面复制第一个css代码）

料理次元动画效果.css （这个里面复制第二个css代码）

4、将网页所用图片资源下载到刚才新建的文件夹：料理次元官网-伪

鼠标点击选中，然后点击右键选择 解压到img\

 5、双击 料理次元官网-伪.html 即可运行网页。

代码部分：

1、HTML页面

料理次元官网-伪.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>料理次元官网-伪</title>
    <link rel="stylesheet" href="./css/料理次元官网-伪.css">
    <link rel="stylesheet" href="./css/料理次元动画效果.css">
</head>

<body>
    <!-- 左侧小人 -->
    <div class="side-character"></div>
    <!-- 第一部分 -->
    <div class="box-one">
        <!-- 1-5 -->
        <div class="character character1"></div>
        <div class="character character2"></div>
        <div class="character character3"></div>
        <div class="character character4"></div>
        <div class="character character5"></div>
        <!-- 6-10 -->
        <div class="character character6"></div>
        <div class="character character7"></div>
        <div class="character character8"></div>
        <div class="character character9"></div>
        <div class="character character10"></div>
        <!-- 11 -->
        <div class="character character11"></div>
        <header></header>
        <!-- 导航栏 -->
        <nav>
            <a href="" class="logo">料理次元官网</a>
            <div class="nav-list-wrap">
                <ul class="nav-list">
                    <li><a href="">首页</a></li>
                    <li><a href="">人设站</a></li>
                    <li><a href="">同人作品</a></li>
                    <li><a href="">世界观</a></li>
                </ul>
            </div>
        </nav>
        <!-- 一二部分分隔 -->
        <div class="divide">
            <div class="box-one-divide cloud1"></div>
            <div class="box-one-divide cloud2"></div>
            <div class="box-one-divide cloud3"></div>
        </div>
    </div>
    <!-- 第二部分 -->
    <div class="box-two">
        <div class="news-animation">
            <div class="animation animation1"></div>
            <div class="animation animation2"></div>
            <div class="animation animation3"></div>
            <div class="animation animation4"></div>
            <div class="pay">
                <div class="pay-picture"></div>
                <div class="pay-border"></div>
            </div>
        </div>
    </div>
    <!-- 第三部分 -->
    <div class="box-three">
        <div class="box-three-title"></div>
        <div class="characters-introduction-bg1"></div>
        <div class="characters-introduction-bg2"></div>
        <div class="characters-introduction-decorate"></div>
        <!-- 人物具体介绍 -->
        <div class="characters-introduction1">
            <div class="characters-introduction1-title"></div>
            <div class="characters-introduction1-contrnt">
                相当的笨手笨脚，性格也比较软弱给人一种软绵绵的感觉。兴趣是呆在花丛发呆，无论多平坦的地面都能施展特技平地摔。散发出一种“让人想保护（想欺负）”的气场，主要是焦急或者被欺负时候那种想哭的表情非常可爱。
            </div>
            <div class="characters-introduction1-picture"></div>
            <div class="characters-introduction1-button"></div>
        </div>
        <div class="characters-introduction2">
            <div class="characters-introduction2-title"></div>
            <div class="characters-introduction2-contrnt">
                相当的傲娇，高冷的时候和害羞的时候有很大的反差，一旦撒起娇格外的甜。最喜欢的事情是洗过澡之后香喷喷的躲在被窝里调戏头顶的小白鸭，也是她最好的朋友。
            </div>
            <div class="characters-introduction2-picture"></div>
            <div class="characters-introduction2-button"></div>
        </div>
        <div class="characters-introduction3">
            <div class="characters-introduction3-title"></div>
            <div class="characters-introduction3-contrnt">
                是个喜欢自由自在，不受约束的少女。一派江户人的气质，讲话有些江户腔。性格稍微有点狂妄，每天背着很多食材但是行动又很灵巧，出乎意料地容易上当。
            </div>
            <div class="characters-introduction3-picture"></div>
            <div class="characters-introduction3-button"></div>
        </div>
        <div class="characters-introduction4">
            <div class="characters-introduction4-title"></div>
            <div class="characters-introduction4-contrnt">
                起床的时候没什么精神。即使发困也会做好工作，但是在中途睡着也是经常的事。可一旦睡起觉，叫醒她是非常难的。最喜欢早上的光芒，感觉在清晨的太阳光下睡觉，是人生最大的幸福。
            </div>
            <div class="characters-introduction4-picture"></div>
            <div class="characters-introduction4-button"></div>
        </div>
        <div class="characters-introduction5">
            <div class="characters-introduction5-title"></div>
            <div class="characters-introduction5-contrnt">
                非常好的人，温柔、博爱、非常天然。在她不知道的地方，“简单教”正在建立起来，而白米饭被作为教祖供奉着。养活了几十亿的人的她，对于朴素的信徒来说，的确是神一般的存在。
            </div>
            <div class="characters-introduction5-picture"></div>
            <div class="characters-introduction5-button"></div>
        </div>
        <div class="characters-introduction6">
            <div class="characters-introduction6-title"></div>
            <div class="characters-introduction6-contrnt">
                沉默的小萝莉，胆子很小，说话经常犹豫，偶尔装大人神气。对味道很敏感，喜欢甜食，特别是五颜六色的食物。带着一只名为小绿的熊猫，语气意外的很凶，以保护香菜戚风蛋糕为己任。
            </div>
            <div class="characters-introduction6-picture"></div>
            <div class="characters-introduction6-button"></div>
        </div>
        <div class="characters-introduction-button">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <!-- 第四部分 -->
    <div class="box-four">
        <div class="box-four-title"></div>
        <div class="box-four-video"></div>
        <div class="box-four-cosplay"></div>
        <div class="box-four-ramification"></div>
        <div class="playgame-call"></div>
    </div>
    <!-- 第五部分 -->
    <div class="box-five">
        <div class="weibo">
            <div class="weibo-picture"></div>
            <div class="weibo-content">官方微博</div>
        </div>
        <div class="game-download">
            <div class="game-download-picture"></div>
            <div class="game-download-line"></div>
            <div class="game-download-content">扫码下载</div>
        </div>
        <div class="weixin">
            <div class="weixin-picture"></div>
            <div class="weixin-content">官方微信</div>
        </div>
    </div>
    <!-- 第六部分 -->
    <div class="box-six">
        <div class="company-logo">4</div>
        <ul class="box-six-content1">
            <li><a href="">zhaolugame@163.com</a></li>
            <li><a href="">754655350</a></li>
        </ul>
        <ul class="box-six-content2">
            <li>
                Copyright © 2013-2020 COCO ALL RIGHTS RESERVED.杭州朝露科技有限公司版权所有
            </li>
            <li>
                <a href=""></a>
                <a href="">浙公网安备33010802009275号</a>
            </li>
        </ul>
    </div>
    <!-- 旋转置顶六面体 -->
    <div class="box-seven">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

2、CSS页面布局部分

料理次元官网-伪.css

*{
    margin: 0;
    padding: 0;
}
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select, img {
    margin: 0;
    padding: 0;
}
a {
	text-decoration:none;
}
a:hover, a:visited {
    text-decoration: none;
}

/* 整体宽高 */
body{
    width: 1000px;
    height: auto;
    margin: 0px auto;
    background: url(../img/bg.png) no-repeat;
    background-repeat: round;
}

/* 第一部分 */
.box-one{
    width: 100%;
    height: 563px;
    background: url(../img/1602317806_3.jpg) no-repeat;
    background-repeat: round;
    position: relative;
}
.character1{
    width: 200px;
    height: 290px;
    background: url(../img/料理砵仔糕1.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 251px;
    margin-left: 817px;
    transform: scale(1);
    opacity: 0;
}
.character2{
    width: 251px;
    height: 301px;
    background: url(../img/料理玉子烧1.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 158px;
    margin-left: 632px;
    transform: scale(.8);
    opacity: 0;
}
.character3{
    width: 200px;
    height: 356px;
    background: url(../img/料理白米饭1.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 238px;
    margin-left: 717px;
    transform: scale(1.3);
    opacity: 0;
}
.character4{
    width: 200px;
    height: 259px;
    background: url(../img/料理西芹百合1a.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 211px;
    margin-left: 90px;
    transform: scale(1.45);
    opacity: 0;
}
.character5{
    width: 200px;
    height: 309px;
    background: url(../img/料理馄饨1.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 151px;
    margin-left: 449px;
    transform: scale(1.6);
    opacity: 0;
}
.character6{
    width: 270px;
    height: 327.5px;
    background: url(../img/料理小笼包1新.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 248px;
    margin-left: 589px;
    transform: scale(1);
    opacity: 0;
}
.character7{
    width: 200px;
    height: 236.4px;
    background: url(../img/料理可丽饼1.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 250px;
    margin-left: 498px;
    transform: scale(1.8);
    opacity: 0;
}
.character8{
    width: 159.25px;
    height: 227px;
    background: url(../img/料理艾果1.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 206px;
    margin-left: 382px;
    transform: scale(1.7);
    opacity: 0;
}
.character9{
    width: 302px;
    height: 302.7px;
    background: url(../img/料理马赛鱼汤1.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 225px;
    margin-left: 170px;
    transform: scale(1.1);
    opacity: 0;
}
.character10{
    width: 322px;
    height: 360.5px;
    background: url(../img/料理次元馒头1.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 219px;
    margin-left: -37px;
    transform: scale(.95);
    opacity: 0;
}
.character11{
    width: 848px;
    height: 530px;
    background: url(../img/料理叉烧1.png) no-repeat 0px -48px;
    background-repeat: repeat;
    position: absolute;
    margin-top: 165px;
    margin-left: -19px;
    transform: scale(.5);
    opacity: 0;
}
/* 导航栏 */
nav{  
    width: 1818px;
    height: 111px;
    background: url(../img/bg_nav.png) no-repeat 0px 0px;
    background-repeat: repeat;
    transform: scale(.55);
    margin-top: -30px;
    margin-left: -410px;
    z-index: 5;
    position: fixed;
}
.logo{
    width: 340px;
    height: 160px;
    background: url(../img/cd9faa3495cea0d0c97c63457f903f489dc5012c.png) no-repeat;
    background-repeat: repeat;
    transform: scale(.7);
    z-index: 6;
    position: absolute;
    margin: -13px 259px;
    text-indent: -999em;
}
.nav-list-wrap{
    width: 700px;
    height: 60px;
    z-index: 6;
    position: absolute;
    margin: 41px 624px;
}
.nav-list-wrap>ul{
    list-style: none;
}
.nav-list-wrap>ul>li{
    display: inline-block;
    padding: 0px 40px;
}
.nav-list-wrap>ul>li>a{
    font-size: 24px;
    color: rgb(119, 70, 22);
}
/* 第一部分 分隔 */
.cloud1{
    width: 800px;
    height: 120px;
    position: absolute;
    margin-top: 470px;
    margin-left: -92px;
    background: url(../img/header_cloud.png) no-repeat -1343px 0px;
    background-repeat: repeat;
    transform: scale(.77);
    opacity: .9;
}
.cloud2{
    width: 1300px;
    height: 120px;
    position: absolute;
    margin-top: 470px;
    margin-left: -150px;
    background: url(../img/header_cloud.png) no-repeat -1147px 0px;
    background-repeat: repeat;
    transform: scale(.77);
}

/* 第二部分 */
.news-animation{
    width: 600px;
    height: 400px;
    margin: 40px auto;
    /* background-color: rgb(228, 151, 151); */
    position: relative;
}
.animation1{
    width: 100%; 
    height: 368px;
    background: url(../img/料理次元登陆界面_切图.jpg) no-repeat 0px 0px;
    background-repeat: round;
    position: absolute;
    margin-top: 16px;
    opacity: 0;
}
.animation2{
    width: 100%; 
    height: 296px;
    background: url(../img/动画2.jpg) no-repeat 0px 0px;
    background-repeat: round;
    position: absolute;
    margin-top: 52px;
    opacity: 0;
}
.animation3{
    width: 100%; 
    height: 296px;
    background: url(../img/动画3.jpg) no-repeat 0px 0px;
    background-repeat: round;
    position: absolute;
    margin-top: 52px;
    opacity: 0;
}
.animation4{
    width: 100%; 
    height: 329px;
    background: url(../img/香槟写真图.png) no-repeat 0px 0px;
    background-repeat: round;
    position: absolute;
    margin-top: 35.5px;
    opacity: 0;
}
.pay-picture{
    width: 128px;
    height: 128px;
    background: url(../img/video_btn_bg.png) no-repeat 0px 0px;
    background-repeat: round;
    position: absolute;
    margin-top: -64px;
    margin-left: 236px;
    transform: scale(.8);
    z-index: 2;
}
.pay-border{
    width: 171px;
    height: 171px;
    background: url(../img/video_round_bg.png) no-repeat 0px 0px;
    background-repeat: round;
    position: absolute;
    margin-top: -85.5px;
    margin-left: 214.5px;
    transform: scale(.8);
    z-index: 2;
}
/* 侧边人 */
.side-character{
    width: 650px;
    height: 908px;
    z-index: 18;
    background: url(../img/料理马卡龙1.png) no-repeat;
    background-repeat: round;
    opacity: .85;
    position: fixed;
    margin-top: 50px;
    margin-left: -209px;
}
/* 第三部分 */
.box-three{
    width: 100%;
    height: 710px;
    background-color: #f0f1e02e;
    position: relative;
}
.box-three-title{
    width: 380px;
    height: 88px;
    background: url(../img/juese_title_bg.png) no-repeat;
    background-repeat: round;
    transform: scale(.6);
    position: absolute;
    margin-top: 0px;
    margin-left: 130px;
}
.characters-introduction-bg1{
    width: 658px;
    height: 469px;
    background: url(../img/juese_bg.png) no-repeat;
    background-repeat: round;
    transform: scale(1.25);
    position: absolute;
    margin-top: 120px;
    margin-left: 185px;
}
.characters-introduction-bg2{
    width: 467px;
    height: 630px;
    background: url(../img/juese_page_bg.png) no-repeat;
    background-repeat: round;
    transform: scale(.8);
    position: absolute;
    margin-top: 60px;
    margin-left: 75px;
}
.characters-introduction-decorate{
    width: 339px;
    height: 215px;
    background: url(../img/chazi_bg.png) no-repeat;
    background-repeat: round;
    transform: scale(.8);
    position: absolute;
    margin-top: 49px;
    margin-left: -5px;
    z-index: 1;
}
/* 玉子烧 */
.characters-introduction1{
    opacity: 0;
}
.characters-introduction1-title{
    width: 365px;
    height: 142px;
    background: url(../img/yzs_title.png) no-repeat;
    background-repeat: round;
    transform: scale(.8);
    position: absolute;
    margin-top: 178px;
    margin-left: 130px;
}
.characters-introduction1-contrnt{
    width: 298px;
    height: auto;
    margin-left: 170px;
    font-size: 12px;
    color: #676767;
    position: absolute;
    line-height: 34px;
    margin-top: 320px;
}
.characters-introduction1-picture{
    width: 638px;
    height: 750px;
    background: url(../img/p8.png) no-repeat;
    background-repeat: round;
    transform: scale(.7);
    position: absolute;
    margin-top: -40px;
    margin-left: 390px;
}
.characters-introduction1-button{
    width: 65px;
    height: 65px;
    background: url(../img/b8.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 630px;
    margin-left: 792px;
    z-index: 1;
}
/* 北京烤鸭 */
.characters-introduction2{
    opacity: 0;
}
.characters-introduction2-title{
    width: 365px;
    height: 142px;
    background: url(../img/bjky_title.png) no-repeat;
    background-repeat: round;
    transform: scale(.8);
    position: absolute;
    margin-top: 178px;
    margin-left: 130px;
}
.characters-introduction2-contrnt{
    width: 298px;
    height: auto;
    margin-left: 170px;
    font-size: 12px;
    color: #676767;
    position: absolute;
    line-height: 34px;
    margin-top: 320px;
}
.characters-introduction2-picture{
    width: 614px;
    height: 828px;
    background: url(../img/p7.png) no-repeat;
    background-repeat: round;
    transform: scale(.7);
    position: absolute;
    margin-top: -80px;
    margin-left: 390px;
}
.characters-introduction2-button{
    width: 65px;
    height: 65px;
    background: url(../img/b7.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 630px;
    margin-left: 747px;
    z-index: 1;
}
/* 关东煮 */
.characters-introduction3{
    opacity: 0;
}
.characters-introduction3-title{
    width: 365px;
    height: 142px;
    background: url(../img/gdz_title.png) no-repeat;
    background-repeat: round;
    transform: scale(.8);
    position: absolute;
    margin-top: 178px;
    margin-left: 130px;
}
.characters-introduction3-contrnt{
    width: 298px;
    height: auto;
    margin-left: 170px;
    font-size: 12px;
    color: #676767;
    position: absolute;
    line-height: 34px;
    margin-top: 320px;
}
.characters-introduction3-picture{
    width: 506px;
    height: 734px;
    background: url(../img/p6.png) no-repeat;
    background-repeat: round;
    transform: scale(.7);
    position: absolute;
    margin-top: -22px;
    margin-left: 436px;
}
.characters-introduction3-button{
    width: 65px;
    height: 65px;
    background: url(../img/b6.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 630px;
    margin-left: 701px;
    z-index: 1;
}
/* 龙虾意面 */
.characters-introduction4{
    opacity: 0;
}
.characters-introduction4-title{
    width: 365px;
    height: 142px;
    background: url(../img/lxym_title.png) no-repeat;
    background-repeat: round;
    transform: scale(.8);
    position: absolute;
    margin-top: 178px;
    margin-left: 130px;
}
.characters-introduction4-contrnt{
    width: 298px;
    height: auto;
    margin-left: 170px;
    font-size: 12px;
    color: #676767;
    position: absolute;
    line-height: 34px;
    margin-top: 320px;
}
.characters-introduction4-picture{
    width: 706px;
    height: 689px;
    background: url(../img/p5.png) no-repeat;
    background-repeat: round;
    transform: scale(.7);
    position: absolute;
    margin-top: 1px;
    margin-left: 375px;
}
.characters-introduction4-button{
    width: 65px;
    height: 65px;
    background: url(../img/b5.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 630px;
    margin-left: 657px;
    z-index: 1;
}
/* 白米饭 */
.characters-introduction5{
    opacity: 0;
}
.characters-introduction5-title{
    width: 365px;
    height: 142px;
    background: url(../img/bmf_title.png) no-repeat;
    background-repeat: round;
    transform: scale(.8);
    position: absolute;
    margin-top: 178px;
    margin-left: 130px;
}
.characters-introduction5-contrnt{
    width: 298px;
    height: auto;
    margin-left: 170px;
    font-size: 12px;
    color: #676767;
    position: absolute;
    line-height: 34px;
    margin-top: 320px;
}
.characters-introduction5-picture{
    width: 521px;
    height: 743px;
    background: url(../img/p3.png) no-repeat;
    background-repeat: round;
    transform: scale(.7);
    position: absolute;
    margin-top: -27px;
    margin-left: 427px;
}
.characters-introduction5-button{
    width: 65px;
    height: 65px;
    background: url(../img/b3.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 630px;
    margin-left: 613px;
    z-index: 1;
}
/* 香菜蛋糕 */
.characters-introduction6{
    opacity: 0;
}
.characters-introduction6-title{
    width: 365px;
    height: 142px;
    background: url(../img/xcdg_title.png) no-repeat;
    background-repeat: round;
    transform: scale(.8);
    position: absolute;
    margin-top: 178px;
    margin-left: 130px;
}
.characters-introduction6-contrnt{
    width: 298px;
    height: auto;
    margin-left: 170px;
    font-size: 12px;
    color: #676767;
    position: absolute;
    line-height: 34px;
    margin-top: 320px;
}
.characters-introduction6-picture{
    width: 617px;
    height: 705px;
    background: url(../img/p2.png) no-repeat;
    background-repeat: round;
    transform: scale(.7);
    position: absolute;
    margin-top: -2px;
    margin-left: 400px;
}
.characters-introduction6-button{
    width: 65px;
    height: 65px;
    background: url(../img/b2.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 630px;
    margin-left: 567px;
    z-index: 1;
}
/* 原始按钮 */
.characters-introduction-button>ul{
    list-style: none;
    position: absolute;
    margin-top: 650px;
    margin-left: 570px;
}
.characters-introduction-button>ul>li{
    display: inline-block;
    list-style: none;
    width: 18px;
    height: 17px;
    background: url(../img/li_bg.png) no-repeat;
    background-repeat: round;
    box-sizing: border-box;
    margin-left: 20px;
    padding: 10px;
}

/* 第四部分 */
.box-four{
    width: 100%;
    height: 530px;
    background-color: rgba(252, 230, 172, 0.116);
    position: relative;
}
.box-four-title{
    width: 380px;
    height: 88px;
    background: url(../img/tongren_title_bg.png) no-repeat;
    background-repeat: round;
    transform: scale(.6);
    position: absolute;
    margin-top: 0px;
    margin-left: 130px;
}
.box-four-video{
    width: 641px;
    height: 547px;
    background: url(../img/tongren_girl_1.png) no-repeat;
    background-repeat: round;
    transform: scale(.6);
    position: absolute;
    margin-top: 0px;
    margin-left: -110px;
}
.box-four-cosplay{
    width: 413px;
    height: 540px;
    background: url(../img/tongren_girl_2.png) no-repeat;
    background-repeat: round;
    transform: scale(.6);
    position: absolute;
    margin-top: 0px;
    margin-left: 330px;
}
.box-four-ramification{
    width: 533px;
    height: 558px;
    background: url(../img/tongren_girl_3.png) no-repeat;
    background-repeat: round;
    transform: scale(.6);
    position: absolute;
    margin-top: -2px;
    margin-left: 570px;
}
.playgame-call{
    width: 660px;
    height: 23px;
    background: url(../img/t3.png) no-repeat;
    background-repeat: round;
    transform: scale(.7);
    position: absolute;
    margin-top: 500px;
    margin-left: 176px;
}

/* 第五部分 */
.box-five{
    width: 100%;
    height: 300px;
    background-color: rgba(165, 244, 247, .05);
    position: relative;
}
.weibo-picture{
    width: 150px;
    height: 150px;
    background: url(../img/e2.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 50px;
    margin-left: 200px;
}
.weibo-content{
    width: 150px;
    height: 150px;
    font-size: 18px;
    position: absolute;
    margin-top: 210px;
    margin-left: 238px;
}
.game-download-picture{
    width: 150px;
    height: 150px;
    background: url(../img/e.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 50px;
    margin-left: 450px;
}
.game-download-content{
    width: 150px;
    height: 150px;
    font-size: 18px;
    position: absolute;
    margin-top: 210px;
    margin-left: 488px;
}
.game-download-line{
    width: 150px;
    height: 10px;
    background: url(../img/line.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 50px;
    margin-left: 450px;
}
.weixin-picture{
    width: 150px;
    height: 150px;
    background: url(../img/e3.png) no-repeat;
    background-repeat: round;
    position: absolute;
    margin-top: 50px;
    margin-left: 700px;
}
.weixin-content{
    width: 150px;
    height: 150px;
    font-size: 18px;
    position: absolute;
    margin-top: 210px;
    margin-left: 738px;
}
/* 第六部分 */
.box-six{
    width: 100%;
    height: 150px;
    background: url(../img/footerbg.jpg) no-repeat;
    position: relative;
}
.company-logo{
    width: 200px;
    height: 118px;
    background: url(../img/footerlogo.png) no-repeat;
    background-repeat: round;
    position: absolute;
    transform: scale(.6);
    margin-top: 3px;
    margin-left: 125px;
}
.box-six-content1{
    list-style: none;
    width: 200px;
    height: 100px;
    position: absolute;
    margin-top: 24px;
    margin-left: 600px;
}
.box-six-content1 li:nth-of-type(2){
    margin-top: 9px;
}
.box-six-content1 a{
    font-size: 14px;
    color: #828287;
}
.box-six-content2{
    list-style: none;
    width: 600px;
    height: 100px;
    position: absolute;
    margin-top: 105px;
    margin-left: 385px;
}
.box-six-content2 li:nth-of-type(2){
    margin-top: 5px;
}
.box-six-content2 li,.box-six-content2 a{
    font-size: 12px;
    color: #8b8b8b;
}
.box-six-content2 li:nth-of-type(2) a:nth-of-type(1){
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../img/sp_003.png) no-repeat;
    background-repeat: round;
}
/* 旋转置顶立方体 */
.box-seven{
    perspective: 1000px;
    position: fixed;
    margin-top: -2250px;
    margin-left: 900px;
    z-index: 8;
}
.box-seven>ul{
    width: 100px;
    height: 100px;
    line-height: 100px;
    position: relative;
    list-style: none;
    text-align: center;
    transform-style: preserve-3d;
}
.box-seven>ul>li{
    width: 100%;
    height: 100%;
    position: absolute;
    border: 1px solid rgb(151, 151, 151, .2);
}
.box-seven>ul>li:nth-of-type(1){
    background: url(../img/香槟食物图.png);
    background-repeat: round;
    transform: rotateY(180deg) translateZ(50px);
}
.box-seven>ul>li:nth-of-type(6){
    background: url(../img/四喜丸子食物图.png);
    background-repeat: round;
    transform: translateZ(50px);
}
.box-seven>ul>li:nth-of-type(2){
    background: url(../img/汤圆食物图.png);
    background-repeat: round;
    transform: rotateX(90deg) translateZ(50px);
}
.box-seven>ul>li:nth-of-type(4){
    background: url(../img/马卡龙食物图.png);
    background-repeat: round;
    transform: rotateX(-90deg) translateZ(50px);
}
.box-seven>ul>li:nth-of-type(3){
    background: url(../img/焦糖布丁食物图.png);
    background-repeat: round;
    transform: rotateY(90deg) translateZ(50px);
}
.box-seven>ul>li:nth-of-type(5){
    background: url(../img/烟熏三文鱼食物图.png);
    background-repeat: round;
    transform: rotateY(-90deg) translateZ(50px);
}

3、CSS动画效果部分

料理次元动画效果.css

/* 左侧小人 */
.side-character{
    animation: side-character 20s linear infinite alternate forwards;
}
.side-character:hover{
    animation-play-state: paused;
    opacity: 1;
}
@keyframes side-character{
    0%{
        transform: translate(0px, 0px) scale(.4);
    }
    12.5%{
        transform: translate(0px, -5px) scale(.4);
    }
    25%{
        transform: translate(0px, 0px) scale(.4);
    }
    37.5%{
        transform: translate(5px, 0px) scale(.4);
    }
    50%{
        transform: translate(0px, 0px) scale(.4);
    }
    62.5%{
        transform: translate(0px, 5px) scale(.4);
    }
    75%{
        transform: translate(0px, 0px) scale(.4);
    }
    87.5%{
        transform: translate(-5px, 0px) scale(.4);
    }
    100%{
        transform: translate(0px, 0px) scale(.4);
    }
}
/* 第一部分 */
.character1{
     animation: character 2s linear forwards;
 }
 .character4{
    animation: character 2s linear 1s forwards;
}
.character3{
    animation: character 2s linear 2s forwards;
}
.character10{
    animation: character 2s linear 3s forwards;
}
.character6{
    animation: character 2s linear 4s forwards;
}
.character9{
    animation: character 2s linear 5s forwards;
}
.character8{
    animation: character 2s linear 6s forwards;
}
.character5{
    animation: character 2s linear 7s forwards;
}
.character7{
    animation: character 2s linear 8s forwards;
}
.character11{
    animation: character 2s linear 9s forwards;
}
.character2{
    animation: character 2s linear 10s forwards;
}
 @keyframes character{
     0%{
         opacity: 0;
     }
     100%{
        opacity: 1;
    }
 }
/* 一二部分分隔 */
.cloud1{
    animation: cloud1 10s linear infinite alternate forwards;
}
@keyframes cloud1{
    0%{
        transform: translate(0px, 0px) scale(.77);
    }
    25%{
        transform: translate(25px, 0px) scale(.77);
    }
    50%{
        transform: translate(50px, 0px) scale(.77);
    }
    75%{
        transform: translate(75px, 0px) scale(.77);
    }
    100%{
        transform: translate(100px, 0px) scale(.77);
    }
}
/* 第二部分 */
.pay-border{
    animation: pay-border 4s linear infinite;
}
@keyframes pay-border{
    0%{
        transform: rotateZ(0deg) scale(.8);
    }
    25%{
        transform: rotateZ(90deg) scale(.8);
    }
    50%{
        transform: rotateZ(180deg) scale(.8);
    }
    75%{
        transform: rotateZ(270deg) scale(.8);
    }
    100%{
        transform: rotateZ(360deg) scale(.8);
    }
}
.animation1{
    animation: animation1 30s linear infinite;
}
.animation2{
    animation: animation2 30s linear infinite;
}
.animation3{
    animation: animation3 30s linear infinite;
}
.animation4{
    animation: animation4 30s linear infinite;
}
@keyframes animation1{
    0%{
        z-index: 0;
        opacity: 0;
    }
    0.5%{
        z-index: 1;
        opacity: 1;
    }
    24.5%{
        z-index: 2;
        opacity: 1;
    }
    25%{
        z-index: 0;
        opacity: 0;
    }
    100%{
        z-index: 0;
        opacity: 0;
    }
}
@keyframes animation2{
    0%{
        z-index: 0;
        opacity: 0;
    }
    25%{
        z-index: 0;
        opacity: 0;
    }
    25.5%{
        z-index: 2;
        opacity: 1;
    }
    49.5%{
        z-index: 2;
        opacity: 1;
    }
    50%{
        z-index: 0;
        opacity: 0;
    }
    100%{
        z-index: 0;
        opacity: 0;
    }
}
@keyframes animation3{
    0%{
        z-index: 0;
        opacity: 0;
    }
    50%{
        z-index: 0;
        opacity: 0;
    }
    50.5%{
        z-index: 2;
        opacity: 1;
    }
    74.5%{
        z-index: 2;
        opacity: 1;
    }
    75%{
        z-index: 0;
        opacity: 0;
    }
    100%{
        z-index: 0;
        opacity: 0;
    }
}
@keyframes animation4{
    0%{
        z-index: 0;
        opacity: 0;
    }
    75%{
        z-index: 0;
        opacity: 0;
    }
    75.5%{
        z-index: 2;
        opacity: 1;
    }
    99.5%{
        z-index: 2;
        opacity: 1;
    }
    100%{
        z-index: 0;
        opacity: 0;
    }
}

/* 第三部分 */
/* 第三部分 主体内容 */
.characters-introduction1{
    animation: characters-introduction1 50s linear infinite;
}
.characters-introduction2{
    animation: characters-introduction2 50s linear infinite;
}
.characters-introduction3{
    animation: characters-introduction3 50s linear infinite;
}
.characters-introduction4{
    animation: characters-introduction4 50s linear infinite;
}
.characters-introduction5{
    animation: characters-introduction5 50s linear infinite;
}
.characters-introduction6{
    animation: characters-introduction6 50s linear infinite;
}
@keyframes characters-introduction1{
    0%{
        z-index: 0;
        opacity: 0;
    }
    1%{
        z-index: 4;
        opacity: 1;
    }
    16%{
        z-index: 4;
        opacity: 1;
    }
    16.7%{
        z-index: 0;
        opacity: 0;
    }
    100%{
        z-index: 0;
        opacity: 0;
    }
}
@keyframes characters-introduction2{
    0%{
        z-index: 0;
        opacity: 0;
    }
    16.7%{
        z-index: 0;
        opacity: 0;
    }
    17%{
        z-index: 4;
        opacity: 1;
    }
    32.5%{
        z-index: 4;
        opacity: 1;
    }
    33.3%{
        z-index: 0;
        opacity: 0;
    }
    100%{
        z-index: 0;
        opacity: 0;
    }
}
@keyframes characters-introduction3{
    0%{
        z-index: 0;
        opacity: 0;
    }
    33.3%{
        z-index: 0;
        opacity: 0;
    }
    34%{
        z-index: 4;
        opacity: 1;
    }
    45.5%{
        z-index: 4;
        opacity: 1;
    }
    50%{
        z-index: 0;
        opacity: 0;
    }
    100%{
        z-index: 0;
        opacity: 0;
    }
}
@keyframes characters-introduction4{
    0%{
        z-index: 0;
        opacity: 0;
    }
    50%{
        z-index: 0;
        opacity: 0;
    }
    50.5%{
        z-index: 4;
        opacity: 1;
    }
    66.5%{
        z-index: 4;
        opacity: 1;
    }
    66.8%{
        z-index: 0;
        opacity: 0;
    }
    100%{
        z-index: 0;
        opacity: 0;
    }
}
@keyframes characters-introduction5{
    0%{
        z-index: 0;
        opacity: 0;
    }
    66.8%{
        z-index: 0;
        opacity: 0;
    }
    67.1%{
        z-index: 4;
        opacity: 1;
    }
    83%{
        z-index: 4;
        opacity: 1;
    }
    83.5%{
        z-index: 0;
        opacity: 0;
    }
    100%{
        z-index: 0;
        opacity: 0;
    }
}
@keyframes characters-introduction6{
    0%{
        z-index: 0;
        opacity: 0;
    }
    83.5%{
        z-index: 0;
        opacity: 0;
    }
    84%{
        z-index: 4;
        opacity: 1;
    }
    99%{
        z-index: 4;
        opacity: 1;
    }
    99.5%{
        z-index: 0;
        opacity: 0;
    }
    100%{
        z-index: 0;
        opacity: 0;
    }
}
/* 第三部分 人物图片 */
.characters-introduction1-picture{
    animation: characters-introduction1-picture 50s linear infinite;
}
.characters-introduction2-picture{
    animation: characters-introduction2-picture 50s linear infinite;
}
.characters-introduction3-picture{
    animation: characters-introduction3-picture 50s linear infinite;
}
.characters-introduction4-picture{
    animation: characters-introduction4-picture 50s linear infinite;
}
.characters-introduction5-picture{
    animation: characters-introduction5-picture 50s linear infinite;
}
.characters-introduction6-picture{
    animation: characters-introduction6-picture 50s linear infinite;
}
@keyframes characters-introduction1-picture{
    0%{
        transform: translateX(50px) scale(.7);
    }
    1%{
        transform: translateX(0px) scale(.7);
    }
    16%{
        transform: translateX(0) scale(.7);
    }
    16.7%{
        transform: translateX(50px) scale(.7);
    }
    100%{
        transform: translateX(50px) scale(.7);
    }
}
@keyframes characters-introduction2-picture{
    0%{
        transform: translateX(50px) scale(.7);
    }
    16.7%{
        transform: translateX(50px) scale(.7);
    }
    17%{
        transform: translateX(0) scale(.7);
    }
    32.5%{
        transform: translateX(0) scale(.7);
    }
    33.3%{
        transform: translateX(50px) scale(.7);
    }
    100%{
        transform: translateX(50px) scale(.7);
    }
}
@keyframes characters-introduction3-picture{
    0%{
        transform: translateX(50px) scale(.7);
    }
    33.3%{
        transform: translateX(50px) scale(.7);
    }
    34%{
        transform: translateX(0) scale(.7);
    }
    45.5%{
        transform: translateX(0) scale(.7);
    }
    50%{
        transform: translateX(50px) scale(.7);
    }
    100%{
        transform: translateX(50px) scale(.7);
    }
}
@keyframes characters-introduction4-picture{
    0%{
        transform: translateX(50px) scale(.7);
    }
    50%{
        transform: translateX(50px) scale(.7);
    }
    50.5%{
        transform: translateX(0) scale(.7);
    }
    66.5%{
        transform: translateX(0) scale(.7);
    }
    66.8%{
        transform: translateX(50px) scale(.7);
    }
    100%{
        transform: translateX(50px) scale(.7);
    }
}
@keyframes characters-introduction5-picture{
    0%{
        transform: translateX(50px) scale(.7);
    }
    66.8%{
        transform: translateX(50px) scale(.7);
    }
    67.1%{
        transform: translateX(0px) scale(.7);
    }
    83%{
        transform: translateX(0px) scale(.7);
    }
    83.5%{
        transform: translateX(50px) scale(.7);
    }
    100%{
        transform: translateX(50px) scale(.7);
    }
}
@keyframes characters-introduction6-picture{
    0%{
        transform: translateX(50px) scale(.7);
    }
    83.5%{
        transform: translateX(50px) scale(.7);
    }
    84%{
        transform: translateX(00px) scale(.7);
    }
    99%{
        transform: translateX(00px) scale(.7);
    }
    99.5%{
        transform: translateX(50px) scale(.7);
    }
    100%{
        transform: translateX(50px) scale(.7);
    }
}
/* 第三部分 按钮 */
.characters-introduction-button li:nth-of-type(6){
    animation: characters-introduction-button1 50s linear infinite;
}
.characters-introduction-button li:nth-of-type(5){
    animation: characters-introduction-button2 50s linear infinite;
}
.characters-introduction-button li:nth-of-type(4){
    animation: characters-introduction-button3 50s linear infinite;
}
.characters-introduction-button li:nth-of-type(3){
    animation: characters-introduction-button4 50s linear infinite;
}
.characters-introduction-button li:nth-of-type(2){
    animation: characters-introduction-button5 50s linear infinite;
}
.characters-introduction-button li:nth-of-type(1){
    animation: characters-introduction-button6 50s linear infinite;
}
@keyframes characters-introduction-button1{
    0%{
        opacity: 1;
    }
    1%{
        opacity: 0;
    }
    16%{
        opacity: 0;
    }
    16.7%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}
@keyframes characters-introduction-button2{
    0%{
        opacity: 1;
    }
    16.7%{
        opacity: 1;
    }
    17%{
        opacity: 0;
    }
    32.5%{
        opacity: 0;
    }
    33.3%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}
@keyframes characters-introduction-button3{
    0%{
        opacity: 1;
    }
    33.3%{
        opacity: 1;
    }
    34%{
        opacity: 0;
    }
    45.5%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}
@keyframes characters-introduction-button4{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 1;
    }
    50.5%{
        opacity: 0;
    }
    66.5%{
        opacity: 0;
    }
    66.8%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}
@keyframes characters-introduction-button5{
    0%{
        opacity: 1;
    }
    66.8%{
        opacity: 1;
    }
    67.1%{
        opacity: 0;
    }
    83%{
        opacity: 0;
    }
    83.5%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}
@keyframes characters-introduction-button6{
    0%{
        opacity: 1;
    }
    83.5%{
        opacity: 1;
    }
    84%{
        opacity: 0;
    }
    99%{
        opacity: 0;
    }
    99.5%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}

/* 第四部分 */
.box-four-video,
.box-four-cosplay,
.box-four-ramification{
    transition: all 1s;
}
.box-four-video:hover,
.box-four-cosplay:hover,
.box-four-ramification:hover{
    transform: scale(.7);
}
/* 第五部分 */
.game-download-line{
    animation: game-download-line 3s linear infinite alternate forwards;
}
@keyframes game-download-line{
    0%{
        transform: translateY(0px);
    }
    100%{
        transform: translateY(140px);
    }
}
/* 旋转置顶六面体 */
.box-seven>ul{
    animation: show 12s linear infinite;
}
.box-seven>ul:hover{
    animation-play-state: paused;
}
@keyframes show{
    25%{
        transform: rotate3d(0, 1, 0, 180deg);
    }
    50%{
        transform: rotate3d(0, 1, 0, 360deg);
    }
    75%{
        transform: rotate3d(1, 0, 0, 180deg);
    }
    100%{
        transform: rotate3d(1, 0, 0, 0deg);
    }
}

页面展示：

网页效果静图：

 页面效果视频：

伪——料理次元官网页面演示_哔哩哔哩_bilibili

网页制作借鉴&图片来源：

借鉴网页：

料理次元官网-百万主厨福利祭

食物语官方网站-腾讯游戏

大部分图片来源：

料理次元官网-百万主厨福利祭

料理次元 - 萌娘百科 万物皆可萌的百科全书

小部分图片来源：

食物语官方网站-腾讯游戏

网页所用图片资源：

img.7z伪——料理次元官网所用图片-网页制作文档类资源-CSDN下载

网页拿取步骤：

如需拿取网页自己演示请按以下步骤进行：

1、新建一个文件夹，名字随意，例如：料理次元官网-伪

2、在文件夹里新建一个HTML文档，名字随意。例如：料理次元官网-伪.html

将HTML代码复制这个HTML文档

如不会创建HTML文档，可以先创建一个文本文档，即后缀名为.txt的文档；

名字随意，例如：料理次元官网-伪.txt

查看文件后缀名的方法：https://jingyan.baidu.com/article/5bbb5a1b2f390652eba179bb.html

然后将HTML代码复制进这个文本文档，然后更改后缀名为.html

跳出的提示框不用管，直接点是即可

3、在  料理次元官网-伪  这个文件夹里新建一个文件夹，命名为css(小写)。

在里面新建两个CSS文件，分别命名为

料理次元官网-伪.css  （这个里面复制第一个css代码）

料理次元动画效果.css （这个里面复制第二个css代码）

如不会创建CSS文档，可以先创建一个文本文档，即后缀名为.txt的文档；

然后将CSS代码复制进这个文本文档，然后更改后缀名为.css

4、将网页所用图片资源下载到刚才新建的文件夹：料理次元官网-伪

鼠标点击选中，然后点击右键选择 解压到img\

 5、双击 料理次元官网-伪.html 即可运行网页。

夜箜泠
关注
  • 3
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html旅游网页设计代码_11个Html和CSS 动态网页背景免费代码案例
weixin_39743622的博客
12-01 8604
作者：Vaibhav Arora使用技术：HTML (Haml) / CSS依赖库：-浏览器兼容：Chrome, Edge, Firefox, Opera, Safari源码链接：https://codepen.io/vaibhavarora/pen/xmpxjp作者：Rob DiMarzo使用技术：HTML (Pug) / CSS (SCSS)依赖库：-浏览器兼容：Chrome, Firefox...
HTML+CSS太阳系旋转页面
09-28
使用了HTML+CSS的相关知识实现了太阳系中九大行星的旋转，适合初学者实现的动画效果旋转的学习，欢迎大家的评论
HTML5+CSS3实现动态网页
励志小妹的小窝
08-15 6174
<a href="javascript:;" class="header_nav"> 其中javascript: 是一个伪协议。它可以让我们通过一个链接来调用javascript函数。但是由于这个函数为空，所以我们调用的就是一个空函数，并不会发生任何实质性的改变。同时可以实现a标签的点击运行。如果当页面里面的内容很多的时候，有了上下滚动条，使用href=“#"会发生跳转到页面顶部的问题...
HTML5与CSS3实现动态网页（笔记）
jjsnc
04-13 6174
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
【实战】如何通过html+css+mysql+php来快速的制作动态网页（以制作一个博客网站为列）
热门推荐
Mind_programmonkey的博客
08-14 4万+
在暑假的这几天时间里，制作了一个简单的博客网站。下面我将这几天的操作流程来说一下，在原文末会贴上代码，也会给出下载链接。（闲复制代码麻烦的可以到下载地址这里直接下载点击打开链接） 刚刚更新源码到github上点击打开链接一、开发环境的搭建 （1）apache+php+mysql环境搭建 因为要用apache来做服务器，mysql作为数据库来存储数据，php来写代码以此实现网页与数据...
动态网页设计与制作(HTML5+CSS3+JavaScript)源代码和素材.zip
05-25
HTML5+CSS3+JavaScript动态网页设计与制作超全案例演示源代码及开发素材，案例都是分开的单独的html文件，方便查看及了解
纯HTML+CSS实现动画
cnds123的专栏
06-11 2010
这是从网上收集来的纯HTML+CSS实现的几个网页动画，生动形象，比较有参考价值。
阴阳师项目网站首页(动态网页）原生HTML+CSS+Javascript
Zhang_wang_yun的博客
04-04 4810
阴阳师项目网站首页（动态网页）原生HTML、CSS、JavaScript
html多个好看的背景动态效果（附源码）
xcLeigh
12-09 3万+
html多个好看的背景动态效果，html背景动态效果，里面带有五种好看的，酷炫的动态背景效果，图片轮动动态背景效果，星空流星动态背景效果，动态美女背景效果，动态屋雨背景效果，动态街道背景效果，动态夜幕背景效果，可以直接嵌套在在自己的代码里。
HTML+CSS实现动画效果
weixin_46058007的博客
03-01 527
前端html+css渲染的页面，有动画效果，三行情诗列表，回旋镖，旋转太极，背景颜色的动画
html+css翻页动画效果
01-27
【html+css】翻页动画效果，64行代码实现翻页动画效果
html+css+js带粒子背景动画的登录页面模板
最新发布
04-10
html5+css3+js动态气泡背景用户登录页面模板，适用于个性化的网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，...
使用Javascript + html + css实现点击页面出现小星星的动画效果
04-05
使用Javascript + html + css实现点击页面出现小星星的动画效果，资源内包含完整代码
使用Javascript + html + css实现页面随机出现小星星的动画效果
04-05
使用Javascript + html + css实现页面随机出现小星星的动画效果，资源内包含完整代码
HTML5与CSS3实现动态网页（上）
delishcomcn的博客
09-06 512
通过把任务的表情动作变化等分级后画成许多 瞬间的画幅，利用视觉暂留的原理。多媒体标签意义：多媒体标签的出现亦为之富媒体的发展以及支持不适用插件的抢矿下即可操作媒体文件，极大的提升了用户体验。行内样式（1000）> ID选择器 >类属性选择器和伪类选择器（10）> 元素和伪元素( 1 ) > * （0）使用CSS3 属性选择器，你可以指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。父元素：not(子元素/子选择器) （Father:not(Children/selector)）
HTML实现动态效果的技术和工具
yexuejianghan的博客
02-25 2394
HTML实现动态效果的技术和工具
网页制作基础学习——HTML+CSS常用代码
北辰的博客
02-01 3万+
HTML（HyperText Markup Language）,即超文本标记语言，是用于描述网页文档的一种描述标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
html+css网站设计，比较简单,附代码
XG_17_38241417116的博客
04-18 2605
【代码】html+css网站设计，比较简单,附代码。 茅台酒文化网页说明书 设计目的： 掌握小型网站设计的常用方法和技术。 设计内容： 设计一个茅台酒文化展示网站，该设计基于html、css以及javascript技术的前端网站。包括css和js的运用。内容包括我国的首页、茅台酒发展、茅台酒知识、登录/注册、找回密码、用户协议及隐私服务、联系我们等几个页面。首页的名称index.html，内容包含网站的logo，导航栏，页脚，轮播图等内容。茅台酒发展的名称为mtjfz.html，内容包含网站的设计，布局等等
如何使用HTML的多媒体元素来创建动态效果
2301_77795034的博客
05-02 802
在 0% 和 100% 的关键帧中，我们将元素的位置设置为 translateX(0)，表示元素的位置不变。在 100% 的关键帧中，我们将元素的位置设置为 translateX(-500px)，表示元素的位置向左移动了 500px。最后，我们使用 setTimeout 函数逐帧修改样式状态，以便使颜色从透明度改为黑白交替，并使用 setInterval 函数每隔一秒钟更新一次动画。首先，让我们来了解一下什么是动态效果。需要注意的是，在实际应用中，我们需要对动画进行优化和调整，以适应不同的需求和场景。
新浪微博js动效代码
05-25
以下是一个简单的 New Sina Weibo 风格的 JS 动效代码: ```html <!DOCTYPE html> <html> <head> <title>New Sina Weibo</title> <style> body { background-color: #f4f4f4; font-family: Arial, sans-serif; text-align: center; } .box { display: inline-block; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.2); transition: box-shadow 0.3s ease-in-out; cursor: pointer; } .box:hover { box-shadow: 0 0 20px rgba(0,0,0,0.4); } </style> </head> <body> <div class="box">Hello World!</div> <script> document.querySelector('.box').addEventListener('click', function() { alert('你点击了 Hello World!'); }); </script> </body> </html> ``` 这段代码定义了一个包含“Hello World!”文本的盒子，并为其添加了一个简单的 hover 效果和一个 click 事件监听器。当你点击 Hello World 的盒子时，会弹出一个对话框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值