css实现鼠标移入渐变
效果图:
代码如下:
<style>
.nav{float:right;margin-top:50px;}
.nav li{float:left;position:relative;margin-left:40px;}
.nav li .up{position:absolute;top:0;left:0;color:black;width:0%;overflow:hidden;transition:.5s width;}
.nav li:hover .up {width:100%}
</style>
<ul class="nav">
<li>
<a href="javascript:;">
<div class="up"><img src="./img/home_gruen.png" alt="" /></div>
<div><img src="./img/home.png" alt="" /></div>
</a>
</li>
<li>
<a href="javascript:;">
<div class="up">Course</div>
<div>Course</div>
</a>
</li>
<li>
<a href="javascript:;">
<div class="up">Works</div>
<div>Works</div>
</a>
</li>
<li>
<a href="javascript:;">
<div class="up">About</div>
<div>About</div>
</a>
</li>
<li>
<a href="javascript:;">
<div class="up">Team</div>
<div>Team</div>
</a>
</li>
</ul>
vue实现图片切换
效果图:
代码如下:
<div class="main">
<!--大图-->
<div class="main_img">
<img :src="patents.patent_image" alt="" />
<img class="toimg_left" v-if="flag_" :src="patents.patent_certificate" alt="" />
</div>
<!--小图-->
<div class="main_imglist">
<img @click="img01()" :src="patents.patent_image" alt="" />
<img @click="img02()" :src="patents.patent_certificate" alt="" />
</div>
</div>
<script>
//在data数据中返回值 flag_: false
methods: {
img01() {
const self = this;
self.flag_ = false;
},
img02() {
const self = this;
self.flag_ = true;
}
}
</script>
<style>
.main {
position: relative;
display: flex;
height: 333px;
height: 333px;
margin-bottom: 19px;
/*background: pink;*/
}
.toimg_left {
position: absolute;
top: 0;
left: 0;
}
.main_img {
display: block;
width: 469px;
height: 333px;
}
.main_img img {
width: 469px;
height: 333px;
background: #eee;
}
.main_imglist {
overflow: hidden;
}
.main_imglist img {
float: left;
margin-right: 20px;
width: 48px;
height: 48px;
border: 1px solid #ddd;
background: #fff;
}
</style>
做个笔记,哈哈