网页设计期末大作业小结

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;/*阴影大小颜色的设置*/
}

网页设计期末大作业小结相关推荐

php网站开发期末大作业,网页设计期末大作业报告..doc
网页设计期末大作业报告. 南开大学滨海学院本科生论文(设计) 中文题目:外文题目:Website design and implementation based on Web develo ...
html网页设计期末大作业——化妆品html+div商城(19页)
html网页设计期末大作业--化妆品html+div商城(19页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星 ...
html网页设计期末大作业——生物科技化妆品网页(6页) HTML+CSS+JS网页设计期末课程大作业
html网页设计期末大作业--生物科技化妆品网页(6页) HTML+CSS+JS网页设计期末课程大作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. ...
html网页设计期末大作业——绿色化妆品网页设计(4页)
html网页设计期末大作业--绿色化妆品网页设计(4页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...
html网页设计期末大作业——酒庄网页设计实例(5页)
html网页设计期末大作业--酒庄网页设计实例(5页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...
HTML5期末大作业：三亚旅游网站设计——三亚旅游网页设计(6页) html网页设计期末大作业_网页设计平时作业
HTML5期末大作业:三亚旅游网站设计--三亚旅游网页设计(6页) html网页设计期末大作业_网页设计平时作业常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
HTML+CSS+JS`管理系统网站设计——学生信息管理系统模板 (13页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业
HTML5期末大作业:管理系统网站设计--学生信息管理系统模板 (13页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业常见网页设计作业题材有个人. 美食. ...
HTML5期末大作业：管理系统网站设计——学生信息管理系统模板 (13页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业
HTML5期末大作业:管理系统网站设计--学生信息管理系统模板 (13页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业常见网页设计作业题材有个人. 美食. ...
html网页设计期末大作业_HTML+CSS+JS网页设计期末课程大作业——橙色的素材火资源整站(25页)
html网页设计期末大作业_HTML+CSS+JS网页设计期末课程大作业--橙色的素材火资源整站(25页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...

网页设计期末大作业小结

首页轮播图无箭头

花瓣向上漂浮特效

鼠标触碰图片变亮

鼠标触碰文字向右移动

鼠标触碰板块产生阴影

网页设计期末大作业小结相关推荐

最新文章

热门文章