产品宣传页项目实战

最新推荐文章于 2024-07-11 17:14:12 发布

葡萄玛奇朵朵

最新推荐文章于 2024-07-11 17:14:12 发布

阅读量83

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/zhujianghan/article/details/118997250

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

产品宣传页项目实战

注意
代码
- html:
- css:
效果

注意

换行标签<br>
链接<link> <script src>
设置内部元素居中显示
display: flex;
justify-content: center;
align-items: center;
添加动画：animate /swiper animate
后者能做做延时效果：<script type=“text/javascript” src=“dist/js/swiper.animate1.0.3.min.js”></script>
把.css动画类写在swiper-animate-effect属性上 class类名加ani
有用法说明，在swipe初始化中还要添加代码

代码

html:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>产品宣传页</title>
		<link rel="stylesheet"  href="./dist/css/swiper.min.css" />
		<script type="text/javascript" src="./dist/js/swiper.min.js"></script>
		<link rel="stylesheet"  href="animate.css" />
		<link rel="stylesheet"  href="css/style.css" />
		<script src="dist/js/swiper.animate1.0.3.min.js"></script>
		<!--引入jquery.js文件-->
		<script src="js/jquery-1.11.2.min.js"></script>
	</head>

	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<div class="page-cover">
						<!--把.css动画类写在swiper-animate-effect属性上   class类名加ani-->
						<h1 class=" ani tittle-1" swiper-animate-effect=" animate__animated animate__backInDown">Web前端语言快速崛起 <br>行业应用不断扩张</h1>
						<img class="ani p1" 
							swiper-animate-effect="animate__animated animate__backInLeft" 
							swiper-animate-delay="0.5s"
							src="img/a_11.jpg" />
						<img class="ani p1" 
							swiper-animate-effect="animate__animated animate__backInRight" 
							swiper-animate-delay="0.5s"
							src="img/a_13.jpg" />
						<img class="ani p1" 
							swiper-animate-effect="animate__animated animate__backInLeft" 
							swiper-animate-delay="1s"
							src="img/a_16.jpg" />
						<img class="ani p1" 
							swiper-animate-effect="animate__animated animate__backInRight" 
							swiper-animate-delay="1s"
							src="img/a_18.jpg" />
						<img class="ani p1" 
							swiper-animate-effect="animate__animated animate__backInLeft" 
							swiper-animate-delay="1.5s"
							src="img/a_21.jpg" />
						<img class="ani p1" 
							swiper-animate-effect="animate__animated animate__backInRight" 
							swiper-animate-delay="1.5s"
							src="img/a_23.jpg" />
						<div class="ani button-1" 
							swiper-animate-effect="animate__animated animate__backInUp" 
							swiper-animate-delay="2s">了解web行业</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class="page-cover">
						2
					</div>
				</div>
				<div class="swiper-slide">
					<div class="page-cover">3</div>
				</div>
			</div>
		</div>
		<!--翻页提示箭头-->
		<div id="nextbtn">
			<img class="fadeInUp" src="img/arrow.png"/>
		</div>
		<!--音乐图标-->
		<img src="img/music-icon.png" class="music-icon" alt="" class="icon-ani icon-ani-pause"/>
		<!--音频-->
		<audio src="audio/music.mp3" id="audio"></audio>
		<!--音频的js文件必须在audio下面引用-->
		<script  src="js/playmusic.js"></script>
		<script type="text/javascript">
			var swiper = new Swiper('.swiper-container', {
				direction: 'vertical',
				on: {
					init: function() {
						swiperAnimateCache(this); //隐藏动画元素 
						swiperAnimate(this); //初始化完成开始动画
					},
					slideChangeTransitionEnd: function() {
						swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
						//this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
					}
				}
			})
		</script>
	</body>

</html>

css:

*{
	padding: 0;
	margin: 0;
}
html,body{
	height: 100%;
	width: 100%;
}
.swiper-container{
	height: 100%;
	width: 100%;
}
.swiper-slide{
	width: 100%;
	height: 100%;
	text-align: center;
	position: relative;
	/*设置内部元素居中显示*/
	display: flex;
	justify-content: center;
	align-items: center;
}
.button-1{
	background: #f4543c;
	padding: 10px;
	color: white;
	width: 600px;
	margin: 0 auto;
	border-radius: 100px;
}
/*第一页的样式*/
.p1{
	width: 400px;
}
.tittle-1{
	font-size: 70px;
	margin-bottom: 10px;
}
/*设置翻页箭头的样式*/
#nextbtn{
	position: absolute;
	width: 50px;
	bottom: 40px;
	/*border: solid 10px red;*/
	z-index: 10px;
	/*水平居中*/
	left: 50%;
	margin-left: -25px;
	/*使用定义的关键帧动画  时间 线性 无线播放*/
	animation: slideInUp 1s linear infinite;
}
#nextbtn img{
	width: 30px;
}
/*定义关键帧动画*/
@keyframes slideInUp{
	0%{
		transform: translateY(30px);
		opacity: 1;
	}
	100%{
		transform: translateY(0px);
		opacity: 0;
	}
}
/*音乐图表样式*/
.music-icon{
	width: 60px;
    position: absolute;
    top: 50px;
    right: 40px;
    z-index: 10;
}
.icon-ani {
    -webkit-animation: icon-rotate 3s linear infinite;
}
.icon-ani-pause {
    animation-play-state: paused;
}
@-webkit-keyframes  icon-rotate{
	0% {-webkit-transform: rotate(0deg);}
	25% {-webkit-transform: rotate(90deg);}
	50% {-webkit-transform: rotate(180deg);}
	75% {-webkit-transform: rotate(270deg);}
	100% {-webkit-transform: rotate(360deg);}
}