网页设计期末大作业小结2

鼠标可触碰立体方块html

 <div class="subtitle">
                <a href="#school_other"><span>生活碎片</span></a>
                <a href="#self_introduce"><span>简介</span></a>
                <a href="#school_lifes"><span>学校生活</span></a>
                <!-- 锚点链接 -->
            </div>

css

.subtitle{
    display: flex;/*弹性布局*/
    justify-content: center;/*弹性布局内容对齐*/
    position: absolute;/*相对定位*/
    left: 39%;
    top: 5%;
    margin: auto;
}

.subtitle:after,
.subtitle:before {
    margin-top: 0.5em;/*上外边距*/
    /*content: "";*/
    display: flex;/*弹性布局*/
    border: 1.5em solid #fff;/*边距设置*/
}

.subtitle:after {
    border-right-color: transparent;
    /*设置右边框颜色，默认值，边框颜色为透明*/
}

.subtitle:before {
    border-left-color: transparent;
    /*设置左边框颜色，默认值，边框颜色为透明*/
}

.subtitle a:link,/*未访问的链接*/
.subtitle a:visited { /*已经访问的链接*/
    color: #000;
    text-decoration: none;/*设置清除超链接的默认下划线*/
    height: 3.5em;
    overflow: hidden;/*溢出隐藏，清除浮动，解决外边距塌陷*/
}

.subtitle span {
    background: #fff;
    display: inline-block;/*块级元素能够在同一行显示*/
    line-height: 3em;/*设置行高*/
    padding: 0 1.5em;/*内边距*/
    margin-top: 0.5em;/*上外边距*/
    position: relative;/*相对定位*/
    -webkit-transition: background-color 0.2s, margin-top 0.2s;
    /*渐变属性，这里设置了背景颜色变化，边距的变化*/
    /*外层套内层、过渡*/
    /*兼容Safari浏览器*/
    -moz-transition: background-color 0.2s, margin-top 0.2s;/*兼容火狐浏览器*/
    -ms-transition: background-color 0.2s, margin-top 0.2s;
    -o-transition: background-color 0.2s, margin-top 0.2s;
    /*兼容Opera浏览器*/
    transition: background-color 0.2s, margin-top 0.2s;
}

.subtitle a:hover span { /*鼠标经过a标签时，a下面的span样式发生改变*/
    background: #FFD204;
    margin-top: 0;
}

.subtitle span:before {/*伪类，前面*/
    position: absolute;/*定位*/
    top: 3em;
    left: 0;
    border-right: 0.5em solid #9B8651;/*右边距*/
    border-bottom: 0.5em solid #fff;/*下边距*/
}

.subtitle span:after { /*伪类，后面*/
    content: "";/*插入生成内容*/
    position: absolute;/*定位*/
    top: 3em;
    right: 0;
    border-left: 0.5em solid #9B8651;/*右边距*/
    border-bottom: 0.5em solid #fff;/*下边距*/
}

鼠标触碰图片放大

.school_life{  
    position: absolute;
    top: 0;
    width: 300px;  
    height: 300px;  
    margin: 50px auto;  
    overflow: hidden; /*清除溢出、解决塌陷*/
}  
.school_life img{  
    cursor: pointer;  /*显示的光标的类型：一只手*/
    transition: all 0.7s;  /*动画持续0.7s*/ /*all：所有属性改变*/
}  
.school_life img:hover{  
    transform: scale(1.4); /*对元素进行缩放，只在x轴缩放*/
}

图片缓慢放大变透明消失css设置大小

/*左边三张图片*/
/*三张图片整体middle*/
#left1{
	position: absolute;
	left: 10%;
	top:20%;
	z-index: 2;/*置于上层*/
}
#left2{
	position: absolute;
	left: 10%;
	top:40%;
	z-index: 2;/*置于上层*/
}
#left3{
	position: absolute;
	left: 10%;
	top:60%;
	z-index: 2;/*置于上层*/
}

图片缓慢放大变透明消失css设置动画

.middle{
    width: 185px;
    height: 185px;
    background: url('img/html5icon.png')  center no-repeat;
    /*图片路径，居中，不重复*/
    margin: 100px auto 0 auto;/*设置上下左右，100px/居中*/
}
.middle img {
    cursor: pointer;/*显示的光标的类型：一只手*/
    animation: wuyue_move 3.3s infinite ease-in-out;
    /*绑定选择器的名字，
    完成动画所用的时间，
    动画从头到尾的速度相同，
    开始结束的过度：慢*/
}
    
@keyframes wuyue_move { /*动画设置*/
    0% {
        transform: scale(1.0);/*在x轴进行缩放*/
    }
    100% {
        transform: scale(1.1);/*在x轴进行缩放*/
        opacity: 0;/*透明度为0*/
    }
}

鼠标触碰图片可暂停

#event_roll1{ /*图片整体的宽高*/
	width: 100%;
	height: 200px;
	overflow: hidden;
	position:absolute;
	top: 0px;
	left: 0px;
	/*background:purple;*/
}
#event_roll1 ul{
    position: absolute;
	left: 30px;
	right: 0px;
}
#event_roll1 ul li{
	float: left; /*向左浮动*/
	list-style:none;
	width:278px; 
	height:128px;
	margin-right: 5px;
}