HTML+CSS期末网页课设——游戏宣传网页（全部源码）

移动开发 2023-04-10 06:44:15 阅读次数: 0

我们网页课是选修课来的，小白小写了一个简单的游戏广告宣传网页。然后里面有一些用到的功能也是在网络上学的。

设置了蓝色特效的导航栏和流星特效，音乐也是按照小森的主题曲来的

  • 首页（上面是视频来的，打开自动播放，设置无声播放因为页面添加了音乐）

  • 简介实现轮播+图片蒙版文字+视频
  •  日记实现图片重叠+图文对称

图片素材均来源于网络 ，侵权请联系我删除。

 首页的一些代码

index.html

<!DOCTYPE html>
<head>
    <title>小森生活</title>
    <embed src="yingyue\xiashan.mp3" hidden="true" autostart="true" loop="true">
    <link rel="stylesheet" href="css/index.css">
    <!--轮播图样式-->
    <style>
	    #pp2{
            
		width:9999px;
		height:9999px;
		animation:switch 15s infinite;
        
		}
		#pp2>img{
		float:left;
		}
		#pp1{
        margin-top: 250px;   
		width:2000px;
		height:620px;
		overflow:hidden;
        
		}
		@keyframes switch{
		0%{};
		20%{transform:translateX(0px);}
		40%{transform:translateX(-820px);}
		60%{transform:translateX(-1640px);}
		80%{transform:translateX(-2460px);}
		100%{transform:translateX(-3280px);}
		}
		
	</style>
 <!--轮播图样式-->
</head>
<body>
    <div class="home">
        <div class="content">
            <!--流星特效-->
            <div class="star"></div>
            <div class="star pink"></div>
            <div class="star blue"></div>
             <!--流星特效结束-->      
            <div class="nav">
                <div class='ribbon'>
                <li><a href='./index.html'><span>首页</span></a></li>
                <li><a href='./jianjie.html'><span>小森简介</span></a></li>
                <li> <a href='./note.html'><span>小森日记</span></a></li>
                </div>
            </div>
        <video src="video/1651334596.mp4" type="video/mp4" autoplay="autoplay" loop="loop" muted="muted" height="100%" width="100%"></video>
        </div>

        <div class="intro">
            <div class="intro_item1">
                <img class="intro_item_img1" src="img/datu1.JPG" alt="">
                <img class="intro_item_img2" src="img/tuoshu.JPG" alt="">
                <span class="intro_item_title">
                    森林从来不贪恋时光，伴随着日升月落，四季轮换，浅浅的水洼立起了石座，石座上的小小神龛，藏在树下，听着时而叮咚的水滴声，懒懒地睡在那里。<br><br>
                    它身上落了灰，座下的青苔和小草并生，就算草木褪去了鲜绿，变得枯黄，落上了寒冬腊月的雪，它经历着年复一年的等待，直至少女将它唤醒。
                </span>
            </div>
        <!--人物图片-->
        <div id="pp1">
		    <div id="pp2" >
			     <img src="img/lunbo1.jpg"/>
			     <img src="img/lunbo2.jpg"/>
			     <img src="img/lunbo4.jpg"/>
			     <img src="img/lunbo3.jpg"/>
			     <img src="img/lunbo2.jpg"/>
			</div>
	    </div>
        <!--底部图片-->
<div class="icons">
            <div class="icons_items">
                <img class="icons_items_imgs" src="img/xiaotu1.png" alt="">
                <span>联系我们</span>
            </div>
            <div class="icons_items">
                <img class="icons_items_imgs" src="img/xiaotu2.png" alt="">
                <span>微博</span>
            </div>
            <div class="icons_items">
                <img class="icons_items_imgs" src="img/xiaotu3.png" alt="">
                <span>哔哩哔哩</span>
            </div>
            <div class="icons_items">
                <img  class="icons_items_imgs" src="img/xiaotu4.png" alt="">
                <span>小红书</span>
            </div>
        </div>
        </div>
        
    </div>

    
</body>


</html>

index.css 

* {
    margin: 0;
    padding: 0
}

.home {
    height: 100%;
    overflow: hidden;
}

.content {
    perspective: 340px;
    width: 100%;
    position: relative;
}

h1 {
    color: white;
    text-align: center;
}
/*流星样式*/
span {
    display: block;
    text-align: center;
}

.star {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FFF;
    top: 100px;
    left: 1200px;
    position: relative;
    transform-origin: 100% 0;
    animation: star-ani 4s linear infinite;
    -webkit-animation:star-ani 5s linear infinite;
    box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
    opacity: 0;
    z-index: 2;
}
.star:after {
    content: '';
    display: block;
    top: 0px;
    left: 4px;
    border: 0px solid #fff;
    border-width: 0px 90px 2px 90px;
    border-color: transparent transparent transparent rgba(255, 255, 255, .3);
    transform: rotate(-45deg) translate3d(1px, 3px, 0);
    box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
    transform-origin: 0% 100%;
}
.pink {
    top: 100px;
    left: 800px;
    background: #fff;
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
}
.pink:after {
    border-color: transparent transparent transparent #fff;
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
}
.blue {
    top: 120px;
    left: 1200px;
    background: fff;
    animation-delay: 7s;
    -webkit-animation-delay: 7s;
    -moz-animation-delay: 7s;
}
.blue:after {
     border-color: transparent transparent transparent fff;
    -webkit-animation-delay: 7s;
    -moz-animation-delay: 7s;
    animation-delay: 7s;
}
/*关键帧*/
  @keyframes star-ani {
    0% {
        opacity: 0;
        transform: scale(0) translate3d(0, 0, 0);
    }
    20%{
        opacity: 0.8;
        transform: scale(0.2) translate3d(-100px, 100px, 0);
    }
    40% {
        opacity: 0.8;
        transform: scale(0.4) translate3d(-200px, 200px, 0);
    }
    60% {
        opacity: 0.8;
        transform: scale(0.6) translate3d(-300px, 300px, 0);
    }
    80% {
        opacity: 1;
        transform: scale(1) translate3d(-350px, 350px, 0);
    }
    100% {
        opacity: 1;
        transform: scale(1.2) translate3d(-400px, 380px, 0);
    }
}
/*流星样式结束*/

/*欢迎来到小森生活样式*/
.title {
    position: absolute;
    display: flex;
    justify-content: center;
    left: 0;
    right: 0;
    top: 300px;
    margin: auto;
    bottom: 0;
    color: rgb(255, 255, 255);
    font-size: 24px;
    font-weight: 500;
}
/*你好样式*/
.titles {
    position: absolute;
    display: flex;
    justify-content: center;
    left: 0;
    right: 0;
    top: 350px;
    margin: auto;
    bottom: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
}

/*导航栏*/
/*导航文字样式*/
.nav{
	width: 100%;
	height: 35px;
	background-color: #ffffff;
    
}
.ribbon {
    position: fixed;/*固定在页面顶部*/
	top:1px;
	right:100px;
	margin: 0;
	padding: 0;
	display: flex;/*弹性布局，使li排成一行*/
}

.ribbon li{
    list-style: none;
}
/*导航文字样式*/
.ribbon li a{
    position: relative;
	display: block;
	padding: 10px 20px;
	margin: 3px 0;
	text-decoration: none;
	text-transform: uppercase;/*将字符转为大写*/
	color: #262626;
	font-weight: bold;
}

.ribbon li a:hover{
	color:#fff;
}
.ribbon li a:before{
	/*a:before，在a链接之前添加新内容，这里添加上下边框*/
	content:'';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	transform: scaleY(2);/*拉长边框两倍*/
	opacity: 0;/*边距不显示*/
	transition: 0.5s;
	z-index: -1;
}
.ribbon li a:hover:before{
	transform: scaleY(1);/*拉长边框两倍*/
	opacity:1;
}
.ribbon li a:after{
	content:'';
	position: absolute;
	top: 1px;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(11, 161, 230);
	transform: scale(0);
	transition: 0.5s;
	z-index: -1;
}
.ribbon li a:hover:after{
	transform: scale(1);
}
/*导航栏结束*/
/*图片栏*/
.intro {
    display: flex;
    flex-direction: column;
    
}

.intro_item1 {
    display: flex;
    justify-content: start;
    margin-top:200px;
}
/*图片重叠效果*/
.intro_item_img2 {
    position:absolute;
    width: 400px;
    height: 300px;
    right: 100px;
    top: 1250px;
    z-index: 2;
}
.intro_item_img1 {
    position:absolute;
    width: 800px;
    height: 500px;
    border-left: 100px;
    z-index: 1;
    right: 250px;
}

.intro_item_title {
    color: rgb(5, 39, 20);
    width: 450px;
    font-size: 18px;
    line-height: 40px;
    align-self: center;
    padding-left: 150px;
    padding-top: 100px;
}

.intro_item_titles {
    width: 400px;
    font-size: 18px;
    line-height: 36px;
    align-self: center;
    padding-right: 100px;
}

.icons {
    display: flex;
    justify-content:space-around;
    padding: 200px 150px;
    box-sizing: border-box;
    overflow: hidden;
}

.icons_items {
    display: flex;
    flex-direction: column;
    font-size: 20px;
    margin-bottom: 0px;
    margin-left: 5px;
    margin-right: 5px;
    width: 200px;
    height: 20px;
    
}

.icons_items_imgs {
    border-radius: 40%;
    width: 200px;
    height: 160px;
    margin-bottom: 5px;
    
}

jianjie.html

<!DOCTYPE html>
<head>
    <title>小森生活简介</title>
    <link rel="stylesheet" href="css/jianjie.css">
     <!--轮播图样式-->
     <style>
	    #pp2{
            
		width:9999px;
		height:9999px;
		animation:switch 40s infinite;
        
		}
		#pp2>img{
		float:left;
		}
		#pp1{
        margin-top: 1px;   
		width:2000px;
		height:900px;
		overflow:hidden;
        
		}
		@keyframes switch{
		0%{};
		20%{transform:translateX(0px);}
		40%{transform:translateX(-820px);}
		60%{transform:translateX(-1640px);}
		80%{transform:translateX(-2460px);}
		100%{transform:translateX(-3280px);}
		}
		
	</style>
     <!--轮播图样式-->
</head>
<body>

    <div class="about">
         <!--流星特效-->
         <div class="star"></div>
         <div class="star pink"></div>
         <div class="star blue"></div>
          <!--流星特效结束-->

       
        <div class="nav">
            <div class='ribbon'>
            <li><a href='./index.html'><span>首页</span></a></li>
            <li><a href='./jianjie.html'><span>小森简介</span></a></li>
            <li> <a href='./note.html'><span>小森日记</span></a></li>
            </div>
        </div>
        <div id="pp1">
		    <div id="pp2" >
			     <img src="img/bo1.jpg"/>
			     <img src="img/bo2.jpg"/>
			     <img src="img/bo4.jpg"/>
			     <img src="img/bo3.jpg"/>
			     <img src="img/bo5.jpg"/>
			</div>
	    </div>
        
        <!--图片蒙版实现-->
        <div id="app">
            <!-- 直接显示遮罩效果实现原理解析：
                1.在图片和遮罩区域的父级div  设置为相对定位  position: relative;   并且设置宽高;
                2.图片与遮罩区都在同一级别，且遮罩区设置为绝对定位  position: absolute; top: 0;left: 0; 使得遮罩区完全覆盖图片；
                3.遮罩区使用弹性布局全局居中展示： display: flex;justify-content: center;align-items: center;text-align: center;
                4.遮罩层设置display:none;当触碰到父级div时 遮罩区display: flex; 展示出来
            -->
            
            <h2>人物角色介绍</h2>
            <div class="section-one">
                <div class="list-one-box">
                    <img src="img/chang6.jpg" alt="">
                    <div class="div-mask">
                        <div>
                            <p>木匠</p><br>
                            <p>源造</p>
                        </div>
                    </div>
                </div>
                <div class="list-one-box">
                    <img src="img/chang2.jpg" alt="">
                    <div class="div-mask">
                        <div>
                            <p>小女孩</p><br>
                            <p>花音</p>
                        </div>
                    </div>
                </div>
                <div class="list-one-box">
                    <img src="img/chang3.jpg" alt="">
                    <div class="div-mask">
                        <div>
                            <p>猎户</p><br>
                            <p>啊海</p>
                        </div>
                    </div>
                </div>
                <div class="list-one-box">
                    <img src="img/chang4.jpg" alt="">
                    <div class="div-mask">
                        <div>
                            <p>裁缝</p><br>
                            <p>慎吾</p>
                        </div>
                    </div>
                </div>
                <div class="list-one-box">
                    <img src="img/chang5.jpg" alt="">
                    <div class="div-mask">
                        <div>
                            <p>村长</p><br>
                            <p>正雄</p>
                        </div>
                    </div>
                </div>
                <div class="list-one-box">
                    <img src="img/chang1.jpg" alt="">
                    <div class="div-mask">
                        <div>
                            <p>祭司</p><br>
                            <p>霜月</p>
                        </div>
                    </div>
                      <!--图片蒙版结束-->
                </div>
            </div>
        </div>
       
        <div class="videos">
            <span>
                在得知要离开城市再次回到小时候和祖母生活的小山村时，我心里突然没来由的轻松起来。电车远去，我靠在窗户旁看着窗外渐远的高楼、房屋、交通信号灯，还有一路延伸到我看不见的轨道。我从没好好看过这座城市像现在安静得在晨光里生长的样子，这时候看着，好像跟平时不一样了。褪去了锋芒影子，在我远行的时候，它也变得可爱温柔。

这是我生活了十多年的城市啊。<br><br>

窗外渐渐换了颜色，电车穿过山，另一边是海，山和海连着天，海水蔚蓝得不可思议，海面掠过的海鸥，在海水与阳光中若隐若现。幽幽蝉鸣，潺潺溪水。阳光穿过树林，却没有带来灼人的炎热，连吹过我裙摆的热风，似乎也是要为我卷走身上的汗水。山林的气息，夹杂着海风送来的味道，一切都属于这个将不同以往的夏天。

脑海里的画面一点点与儿时记忆重叠，期待、憧憬，一切美好的词汇，让我的脚步禁不住也跟着欢欣雀跃起来。<br><br>

接下来，我又会遇到谁？又将会有怎样不可思议的生活呢？
            </span>
            <div class="video2">
             <video width="800" controls id="video" preload="auto" height="100%" autoplay="autoplay" loop="loop" type="video/mp4" src="./video/1651334596.mp4"></video>
            </div>
        </div>
    </div>


</body>

jianjie.css

* {
    margin: 0;
    padding: 0;
}

.about {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    perspective: 340px;
}

.about_bgc {
    height: 800px;
    width: 100%;
}
/*流星样式*/
span {
    display: block;
    text-align: center;
}

.star {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FFF;
    top: 100px;
    left: 1200px;
    position: relative;
    transform-origin: 100% 0;
    animation: star-ani 4s linear infinite;
    -webkit-animation:star-ani 5s linear infinite;
    box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
    opacity: 0;
    z-index: 2;
}
.star:after {
    content: '';
    display: block;
    top: 0px;
    left: 4px;
    border: 0px solid #fff;
    border-width: 0px 90px 2px 90px;
    border-color: transparent transparent transparent rgba(255, 255, 255, .3);
    transform: rotate(-45deg) translate3d(1px, 3px, 0);
    box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
    transform-origin: 0% 100%;
}
.pink {
    top: 100px;
    left: 800px;
    background: #fff;
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
}
.pink:after {
    border-color: transparent transparent transparent #fff;
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
}
.blue {
    top: 120px;
    left: 1200px;
    background: fff;
    animation-delay: 7s;
    -webkit-animation-delay: 7s;
    -moz-animation-delay: 7s;
}
.blue:after {
     border-color: transparent transparent transparent fff;
    -webkit-animation-delay: 7s;
    -moz-animation-delay: 7s;
    animation-delay: 7s;
}
/*关键帧*/
  @keyframes star-ani {
    0% {
        opacity: 0;
        transform: scale(0) translate3d(0, 0, 0);
    }
    20%{
        opacity: 0.8;
        transform: scale(0.2) translate3d(-100px, 100px, 0);
    }
    40% {
        opacity: 0.8;
        transform: scale(0.4) translate3d(-200px, 200px, 0);
    }
    60% {
        opacity: 0.8;
        transform: scale(0.6) translate3d(-300px, 300px, 0);
    }
    80% {
        opacity: 1;
        transform: scale(1) translate3d(-350px, 350px, 0);
    }
    100% {
        opacity: 1;
        transform: scale(1.2) translate3d(-400px, 380px, 0);
    }
}
/*流星样式结束*/

.about_tit {
    position: absolute;
    color:white;
    top: 280px;
    left: 0;
    right: 0;
    font-size: 28px;
    font-weight: 550;
    bottom: 0;
    width: 800px;
    margin: auto;
    text-align: center;
}

/*导航栏*/
.nav{
	width: 100%;
	height: 50px;
	background-color: #ffffff;
    
}
.ribbon {
    position: fixed;/*固定在页面顶部*/
	top:1px;
	right:100px;
	margin: 0;
	padding: 0;
	display: flex;/*弹性布局，使li排成一行*/
}

.ribbon li{
    list-style: none;
}
.ribbon li a{
    position: relative;
	display: block;
	padding: 10px 20px;
	margin: 20px 0;
	text-decoration: none;
	text-transform: uppercase;/*将字符转为大写*/
	color: #262626;
	font-weight: bold;
}

.ribbon li a:hover{
	color:#fff;
}
.ribbon li a:before{
	/*a:before，在a链接之前添加新内容，这里添加上下边框*/
	content:'';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	transform: scaleY(2);/*拉长边框两倍*/
	opacity: 0;/*边距不显示*/
	transition: 0.5s;
	z-index: -1;
}
.ribbon li a:hover:before{
	transform: scaleY(1);/*拉长边框两倍*/
	opacity:1;
}
.ribbon li a:after{
	content:'';
	position: absolute;
	top: 1px;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(11, 161, 230);
	transform: scale(0);
	transition: 0.5s;
	z-index: -1;
}
.ribbon li a:hover:after{
	transform: scale(1);
}
/*导航栏结束*/

/*视频播放*/
.videos {
    display: flex;
    margin-top: 200px;
    padding-bottom: 150px;
    border: 0px solid;
}

.videos span {
    /* width: 400px; */
    margin-top: 1px;
    margin-right: 100px; 
    margin-left: 200px;
    /* color: #5c1d06 */
    /* padding-left: 20px; */
    width: 600px;
    font-size: 16px;
    color: #5c1d06;
    line-height: 30px;
}
.video2 {
    margin-bottom: 62px;
    margin-left: 40px;
}
/*视频播放*/
/*图片蒙版效果*/
h2 {
    text-align: center;
    margin-top:200px;
}
/*图片间距padding填充*/
.section-one {
    display: flex;
    justify-content:space-around;
    padding: 50px 10px;
    box-sizing: border-box;
    overflow: hidden;
   
    /* border: 1px solid red; */
}

.section-one>* {
    border: 1px solid red;
}

.list-one-box {
    position: relative;
    display: inline-block;
    width: 450px;
    height: 600px;
    /*取消边框线*/
    border: 0px solid;
    margin: 10px 10px;
}

.list-one-box img {
    width: 100%;
    height: 100%;
}

.div-mask {
    /* 通过绝对定位 覆盖原图 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    font-size: 16px;
    color: #ffffff;
    /* 垂直居中 */
    display: flex;
    justify-content: center;
    /* 弹性布局的左右居中对齐 */
    align-items: center;
    /*弹性布局的垂直居中对齐*/
    text-align: center;
    /*文本居中*/
    display: none;
}

.list-one-box:hover .div-mask {
    display: flex;
}
/*图片蒙版效果结束*/

note.html

<!DOCTYPE html>
<head>
    <title>小森生活日记</title>
    <link rel="stylesheet" href="css/note.css">
    <embed src="yingyue\xiashan.mp3" hidden="true" autostart="true" loop="true">
</head>
<body>
    <div class="home">
        <div class="content">
              <!--流星特效-->
              <div class="star"></div>
              <div class="star pink"></div>
              <div class="star blue"></div>
               <!--流星特效结束-->
            
            
           
            <div class="nav">
                <div class='ribbon'>
                <li><a href='./index.html'><span>首页</span></a></li>
                <li><a href='./jianjie.html'><span>小森简介</span></a></li>
                <li> <a href='./note.html'><span>小森日记</span></a></li>
                </div>
            </div>
            <img class="bgc" src="img/santu.jpg"  alt="">
        <div>
        <img class="bgc2" src="img/santu.jpg"  alt="">
            <h3 class="titles">欢迎来到小森生活</h3>
    </div>
        </div>
        
        <div class="intro">
            <div class="intro_item">
                <img class="intro_item_img" src="img/santu1.jpg" alt="">
                <span class="intro_item_title">
                    快来拥有属于你的小森世界吧。<br><br>
                    远离城市的喧嚣，回归生活的初心，享受那一抹宁静的闲适。 厌倦大城市的生活的玩家，在收到一封来自奶奶的神秘信件后，回到了小时候生活过的家乡。在这里，耕种、收割、砍柴、做饭、吃饭⋯⋯接受大自然的馈赠，同时，亲手建起属于自己的家园，体验这田园生活和趣味横生的冒险与探索，更在与村里人的相处中，逐渐找回过去的记忆，治愈自己，温暖大家。还在等什么呢？
                </span>

            </div>
            <div class="intro_item">

                <span class="intro_item_titles">这个村子，终日风清云淡。
                    <br><br>阳光下的蝉鸣绕着树，风里有青草的香气，云被拉扯得千丝万缕，树变得又高又远，在山风拂过的时候，叶子交错漏下的阳光映在树荫一隅的水洼上，晨间白露的霜还凝在叶面，蜻蜓就抖落了翅膀上的雾，漾起一圈圈的纹，石缝里挣扎生长的草，仰望着遮挡了天空的树。
                </span>
                <img class="intro_item_img" src="img/santu2.jpg" alt="">
            </div>
     


</body>


</html>

note.css

* {
    margin: 0;
    padding: 0
}

.home {
    height: 100%;
    overflow: hidden;
}

.content {
    perspective: 340px;
    width: 100%;
    position: relative;
}
.bgc{
    width: 2000px;
    height: 700px;
}
.bgc2 {
    position: absolute;
    width: 1300px;
    height: 500px;
    bottom: 100px;
    right: 300px;
    
}
h1 {
    color: white;
    text-align: center;
   
}

span {
    display: block;
    text-align: center;
}

/*流星样式*/
span {
    display: block;
    text-align: center;
}

.star {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FFF;
    top: 100px;
    left: 1200px;
    position: relative;
    transform-origin: 100% 0;
    animation: star-ani 4s linear infinite;
    -webkit-animation:star-ani 5s linear infinite;
    box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
    opacity: 0;
    z-index: 2;
}
.star:after {
    content: '';
    display: block;
    top: 0px;
    left: 4px;
    border: 0px solid #fff;
    border-width: 0px 90px 2px 90px;
    border-color: transparent transparent transparent rgba(255, 255, 255, .3);
    transform: rotate(-45deg) translate3d(1px, 3px, 0);
    box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
    transform-origin: 0% 100%;
}
.pink {
    top: 100px;
    left: 800px;
    background: #fff;
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
}
.pink:after {
    border-color: transparent transparent transparent #fff;
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
}
.blue {
    top: 120px;
    left: 1200px;
    background: fff;
    animation-delay: 7s;
    -webkit-animation-delay: 7s;
    -moz-animation-delay: 7s;
}
.blue:after {
     border-color: transparent transparent transparent fff;
    -webkit-animation-delay: 7s;
    -moz-animation-delay: 7s;
    animation-delay: 7s;
}
/*关键帧*/
  @keyframes star-ani {
    0% {
        opacity: 0;
        transform: scale(0) translate3d(0, 0, 0);
    }
    20%{
        opacity: 0.8;
        transform: scale(0.2) translate3d(-100px, 100px, 0);
    }
    40% {
        opacity: 0.8;
        transform: scale(0.4) translate3d(-200px, 200px, 0);
    }
    60% {
        opacity: 0.8;
        transform: scale(0.6) translate3d(-300px, 300px, 0);
    }
    80% {
        opacity: 1;
        transform: scale(1) translate3d(-350px, 350px, 0);
    }
    100% {
        opacity: 1;
        transform: scale(1.2) translate3d(-400px, 380px, 0);
    }
}
/*流星样式结束*/
/*导航栏*/
.nav{
	width: 100%;
	height: 35px;
	background-color: #ffffff;
    
}
.ribbon {
    position: fixed;/*固定在页面顶部*/
	top:1px;
	right:100px;
	margin: 0;
	padding: 0;
	display: flex;/*弹性布局，使li排成一行*/
}

.ribbon li{
    list-style: none;
}
.ribbon li a{
    position: relative;
	display: block;
	padding: 10px 20px;
	margin: 4px 0;
	text-decoration: none;
	text-transform: uppercase;/*将字符转为大写*/
	color: #262626;
	font-weight: bold;
}

.ribbon li a:hover{
	color:#fff;
}
.ribbon li a:before{
	/*a:before，在a链接之前添加新内容，这里添加上下边框*/
	content:'';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	transform: scaleY(2);/*拉长边框两倍*/
	opacity: 0;/*边距不显示*/
	transition: 0.5s;
	z-index: -1;
}
.ribbon li a:hover:before{
	transform: scaleY(1);/*拉长边框两倍*/
	opacity:1;
}
.ribbon li a:after{
	content:'';
	position: absolute;
	top: 1px;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(11, 161, 230);
	transform: scale(0);
	transition: 0.5s;
	z-index: -1;
}
.ribbon li a:hover:after{
	transform: scale(1);
}
/*导航栏结束*/

.title {
    position: absolute;
    display: flex;
    justify-content: center;
    left: 0;
    right: 0;
    top: 300px;
    margin: auto;
    bottom: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
}

.titles {
    position: absolute;
    display: flex;
    justify-content: center;
    left: 0;
    right: 0;
    top: 350px;
    margin: auto;
    bottom: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
}

.icon {
    width: 15px;
    height: 15px;
    padding: 5px;
    border: 2px solid #fff;
    border-radius: 100%;
    position: absolute;
    bottom: 50px;
    animation: downs 2s linear infinite;
}

.intro {
    display: flex;
    flex-direction: column;
}

.intro_item {
    display: flex;
    justify-content: center;
    margin-top: 200px;
    margin-bottom: 130px;
}

.intro_item_img {
    width: 500px;
    height: 700px;
    border-radius: 10px;

}

.intro_item_title {
    width: 450px;
    font-size: 18px;
    line-height: 36px;
    align-self: center;
    padding-left: 100px;
    color: rgb(5, 39, 20);
}

.intro_item_titles {
    width: 400px;
    font-size: 18px;
    line-height: 36px;
    align-self: center;
    padding-right: 100px;
}

反正自己的代码还是要有所改进的，想用一点高级的实现效果但是发现自己有点难做到现在，还在努力。

猜你喜欢

转载自blog.csdn.net/weixin_54624138/article/details/125469307
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022