前端自学之页面效果集合

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>

做个笔记，哈哈