master

分支 (1)

管理

管理

master

cloud-music
/
index.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<title></title>
	<style>
		.out {
			width: 500px;
			height: 500px;
			border: 1px solid blue;
			margin: 100px auto;
			overflow: hidden;
		}

		.top {
			width: 0;
			height: 0;
			margin: 0 auto;
			border-top: 200px solid transparent;
			border-left: 200px solid transparent;
			border-right: 200px double black;
			border-bottom: 200px solid #9A6E3A;
			margin-top: -200px;
		}

		.body {
			width: 360px;
			height: 300px;
			margin: 0 auto;
			border: 3px solid #000000;
      position: relative;
		}

		.door {
			width: 200px;
			height: 200px;
			border: 1px solid #000000;
			float: left;
			margin-top: 100px;
			margin-left: 80px;
			/* background:url(2.png) no-repeat 100%; */
			position: relative;
			overflow: hidden;
		}
    .tip{
      display: none;
      position: absolute;
      z-index: 9;
      top: 0px;
      left: 50px;
      font-weight: 800;
      color: purple;
    }
    .door:hover .tip{
      display: block;
    }

		.door img {
			position: absolute;
			z-index: -1;
			height: 100%;
			/* margin: 0 45px; */
		}

		.left {
			float: left;
			width: 100px;
			height: 200px;
			background-color: #9A6E3A;
			border-right: 1px solid #000000;
			position: absolute;
			transition: 1s;
			font-size: 50px;
			line-height: 200px;
			transform-origin: left;
		}

		.right {
			float: left;
			width: 100px;
			height: 200px;
			background-color: #9A6E3A;
			position: absolute;
			border-left: 1px solid #000000;
			left: 100px;
			transition: 1s;
			font-size: 50px;
			transform-origin: right;
			line-height: 200px;
		}

		.door:hover .left {
			transform: rotateY(80deg);
		}

		.door:hover .right {
			transform: rotateY(-80deg);
		}
	</style>
</head>

<body>
	<div class="out">
    <h3>这是我的朋友-----佩奇!</h3>
		<div class="top"></div>
		<div class="body">
      <div class="door" @click="change1">
        <p class="tip">点击观看佩奇大变身</p>
				<img :src="imgUrl" alt="" >
				<div class="left">
					开门
				</div>
				<div class="right">
					见你
				</div>
			</div>

		</div>
	</div>
</body>

</html>
<script>
  var out = new Vue({
    el: '.out',
    data(){
      return{
        imgUrl: './assets/imgs/pic2.jpg'
      }
    },
    methods: {
      change1(){
        this.imgUrl = './assets/imgs/z1.jpg'
      }
    },
  })
</script>