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

鼠标可触碰立体方块html

 <div class="subtitle">                <a href="#school_other"><span>生活碎片</span></a>                <a href="#lf_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-transi驴照片tion: 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:hov初中综合素质er{       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: 185镇魂街电视剧百度云px;    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 ea-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;}

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