<template>
<div>
<div id="shiny-shadow">
<button><span>Hover me</span></button>
</div>
</div>
</template>
<script>
export default {
name: "page",
props: {},
data() {
return {
name: "这是子组件的name",
};
},
created() {},
mounted() {},
destroyed() {},
methods: {},
};
</script>
<style lang="scss" scoped>
#shiny-shadow {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #1c2541;
}
button {
border: 2px solid white;
background: transparent;
text-transform: uppercase;
color: white;
padding: 15px 50px;
outline: none;
overflow: hidden;
position: relative;
}
span {
z-index: 20;
}
button:after {
content: "";
display: block;
position: absolute;
top: -36px;
left: -100px;
background: white;
width: 50px;
height: 125px;
opacit
css:hover用法(4) .闪亮效果
猜你喜欢
转载自blog.csdn.net/jieweiwujie/article/details/126648054
今日推荐
周排行