网页设计期末大作业小结

WY的网页设计第一次写网页设计作业

学校学的是基础的网页设计知识，对这次期末大作业作一个梳理用到html和css，涉及到少部分的js。

首页轮播图无箭头

/*图片轮播*/
*{
	margin:0; /*清除默认边距*/
	padding:0;
}
ul,li{
	list-style: none;/*无修饰*/
}
.banner-contaner{
	width:100%;
	position:relative;
	z-index:-10;/*置于下层*/
}
.banner-item + .banner-item{
	opacity:0;/*透明度为0*/
}
.banner-item{
	width:100%;
	position:absolute;
	animation-timing-function: linear;/* 规定动画的速度曲线，动画从头到尾的速度是相同的。*/
	animation-name:wuyue;/*为动画指定名字*/
	animation-iteration-count: infinite;/*设置动画播放无限次*/
	background-size:100%;
}
.focus-container{
	position:absolute;
	z-index:7;/*置于上层*/
	margin:0 auto;/*居中*/
	left:0;
	right:0;
}
.focus-container li{
	width:10px;
	height:10px;
	border-radius:50%;/*盒子里50%设置成圆形*/
	float:left;/*向左浮动*/
	margin-right:10px;/*右外边距*/
	background:#DC143C;/*背景色*/
}
.focus-item{
	width:100%;/*原样百分比*/
	height:100%;
	border-radius:inherit;/*外边框圆角*/
	animation-timing-function: linear;/* 规定动画的速度曲线，动画从头到尾的速度是相同的。*/
	animation-name:wuyue;/*设置动画的名字*/
	animation-iteration-count: infinite;/*设置动画播放无限次*/
}
.focus-item2,.focus-item3,.focus-item4,.focus-item5{
	opacity:0;/*设置透明度0*/
}
.focus-container ul{
	margin-left:46%;/*左边距*/
}
/*设置轮播焦点的位置*/
.focus-container{
	bottom:2%;/*放在下面*/
}
/*设置当前图片焦点的颜色*/
.focus-item{
	background:purple;
}
/*设置动画，修改秒数*/
.banner-item,.focus-item{
	animation-duration: 20s;/*完成一个周期所需要的时间*/
}
.banner-item1,.focus-item1{
	animation-delay: -1s;/*动画马上开始，但跳过1s进入动画。*/
}
.banner-item2,.focus-item2{
	animation-delay: 3s;/*定义动画开始时间3s*/
}
.banner-item3,.focus-item3{
	animation-delay: 7s;/*定义动画开始时间7s*/
}
.banner-item4,.focus-item4{
	animation-delay: 11s;/*定义动画开始时间11s*/
}
.banner-item5,.focus-item5{
	animation-delay: 15s;/*定义动画开始时间15s*/
}
@keyframes wuyue{ /*创建动画*/
0%{
	opacity:0;/*渐变从0开始*/
	z-index:2;/*置于上层*/
}
5%{
	opacity:1;/*透明度 */
	z-index: 1;
}
20%{
	opacity:1;
	z-index:1;
}
25%{
	opacity:0;
	z-index:0;
}
100%{
	opacity:0;/*渐变从100结束*/
	z-index:0;/*置于0*/
	}
}

花瓣向上漂浮特效

/*花瓣特效*/
.flower{
	position: absolute;
	bottom: -160px;
    width:100%;
    height:1000vh;
    z-index: -9;
    animation:wuyue_again 20s linear infinite;
    /*规定绑定选择器的名称：wuyue_again;
    完成动画花费的时间20s;
    动画从头到尾的速度相同;
    循环播放*/
    background-image:url(../imgs/悬浮花瓣1.png),url(../imgs/萤火虫.png),url(../imgs/孔明灯.png)/*花瓣图片路径*/
}
@keyframes wuyue_again{
    0%{ /*动画开始时*/opacity:0} /*背景透明度*/
    25%{opacity:1}
    50%{opacity:0.1}
    75%{opacity:1}
    100%{opacity:0}/*动画结束时*/
    /*动画开始时*/
    0%{background-position:0px 0px, 0px 0px, 0px 0px;}/*设置背景图像的起始位置*/
    50%{background-position:-100px -500px,-100px -200px,-100px -150px}/*设置背景图像的起始位置*/
    100%{background-position:0px -1000px,-200px -400px,-100px -300px}/*设置背景图像的起始位置*/
    /*动画结束时*/
}

鼠标触碰图片变亮

.year li{
    z-index:99999999999;/*置于上层*/
    opacity:0.7;/*透明度*/
    filter:alpha(opacity=70);/*标准透明度为70*/
}
.year li:hover{
    opacity:1;/*透明度*/
    filter:alpha(opacity=100);/*标准透明度为100*/
}

鼠标触碰文字向右移动

//
/*图上的文字*/
#set_word1{
	position: absolute;
	top: 25%;
	left: 6%;
	color: white;
	text-align: center;/*中心文本*/
	font-size: 18px;
	width:100px;
	height:100px;
	transition:width 2s;/*动画时间2s*/
	/*浏览器兼容*/
	-moz-transition:width 2s; /* Firefox 4 */
	-webkit-transition:width 2s; /* Safari and Chrome */
	-o-transition:width 2s; /* Opera */
}
#set_word1:hover{
	width: 300px;/*移动的宽度*/
}

鼠标触碰板块产生阴影

/*banner下面的图片设置*/
.banner_bottom{
	position: absolute;
	top:150%;
	width: 100%;
	height:600px;
	/*background-color: white;*/
}
.containpic1{
	width: 220px;
	height:260px;
	border:1px solid lightgray;/*边距大小样式颜色设置*/
	position: absolute;
	left:9%;
	top:0px;
	background-color: white;/*白色底色*/
}
.containpic1:hover{
	box-shadow: 4px 4px 3px #888888;/*阴影大小颜色的设置*/
}

本文地址：https://blog.csdn.net/weixin_45789334/article/details/111865125