vue-haru-ripple
Version:
136 lines (123 loc) • 3.71 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<link rel="shortcut icon" href="/example/favicon.ico" type="image/x-icon">
<title>vue-haru-ripple example</title>
<style>
* { margin:0; padding:0; }
body {
background-color: #f9f9f9;
-webkit-tap-highlight: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
#container {
margin-top: 2rem;
margin-left: 2rem;
}
ul {
width: 300px;
}
li {
list-style: none;
width: 100%;
height: 50px;
}
.ripple {
width: 100%;
height: 100%;
}
.text {
height: 50px;
line-height: 50px;
padding: 0 20px;
color: #646464;
background-color: #fff;
}
.text1 {
color: orange;
}
.card {
width: 300px;
height: 200px;
margin-top: 200px;
margin-left: 200px;
background-color: #fff;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
}
.card.image {
background: url(./nature.jpeg) no-repeat;
}
</style>
</head>
<body>
<div class="container">
<div id="iloveyou">
<!--<ul>-->
<!--<li>-->
<!--<vue-haru-ripple class="ripple" color="skyblue" opacity="0.8">-->
<!--<div class="text">-->
<!--<span>真三国无双v3.9d 诸葛神装</span>-->
<!--</div>-->
<!--</vue-haru-ripple>-->
<!--</li>-->
<!--<li>-->
<!--<vue-haru-ripple class="ripple" opacity="0.5">-->
<!--<div class="text text1">-->
<!--<span>羊刀</span>-->
<!--</div>-->
<!--</vue-haru-ripple>-->
<!--</li>-->
<!--<li>-->
<!--<vue-haru-ripple class="ripple" color="yellow" opacity="0.7">-->
<!--<div class="text">-->
<!--<span>玄武</span>-->
<!--</div>-->
<!--</vue-haru-ripple>-->
<!--</li>-->
<!--<li>-->
<!--<vue-haru-ripple class="ripple" color="green" opacity="0.9">-->
<!--<div class="text">-->
<!--<span>孙子兵法</span>-->
<!--</div>-->
<!--</vue-haru-ripple>-->
<!--</li>-->
<!--<li>-->
<!--<vue-haru-ripple class="ripple" color="purple">-->
<!--<div class="text">-->
<!--<span>翔靴</span>-->
<!--</div>-->
<!--</vue-haru-ripple>-->
<!--</li>-->
<!--<li>-->
<!--<vue-haru-ripple class="ripple" color="gray">-->
<!--<div class="text">-->
<!--<span>大地斧</span>-->
<!--</div>-->
<!--</vue-haru-ripple>-->
<!--</li>-->
<!--<li>-->
<!--<vue-haru-ripple class="ripple" color="salmon">-->
<!--<div class="text">-->
<!--<span>铠甲</span>-->
<!--</div>-->
<!--</vue-haru-ripple>-->
<!--</li>-->
<!--</ul>-->
<!---->
<!--<div class="card image">-->
<!--<vue-haru-ripple class="ripple" :color="randomColor" opacity="0.3"> -->
<!--</vue-haru-ripple>-->
<!--</div>-->
</div>
</div>
<!--<script src="/example/vconsole.min.js"></script>-->
<script src="/example/index.js"></script>
</body>
</html>