-webkit-filter: blur() 对 vue js 不起作用
-webkit-filter: blur() doesn't work vue js
我正在尝试添加 -webkit-filter: blur (),但它根本不起作用。我刚试过“过滤器”,但它不管用。
我认为它在 html 中有效,但在 Vue 中无效,或者有任何替代方案吗?
<template>
<div class="comingsoon">
<span class="circle"></span>
<span class="msg">COMING SOON</span>
<span class="notifymsg">GET NOTIFIED WHEN IT'S READY</span>
<span class="field"></span>
</div>
</template>
CSS
.circle {
height: 400px;
width: 400px;
border-radius: 50%;
background: linear-gradient(#313247 0%, #19181D 30%);
position: absolute;
top: 20%;
left: 35%;
}
.circle:before,
.circle:after {
content: '';
height: 400px;
width: 400px;
background: linear-gradient(#FFD1DA 0%, #FF849D 5%, 2D2133 25%);
border-radius: 50%;
position: absolute;
top: 42%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-filter: blur(7px);
z-index: -1;
}
.circle:after {
width: 415px;
top:35%;
-webkit-filter: blur(14px);
opacity: .3;
}
简单添加这一行就可以了!
span.circle {
-webkit-filter: blur(14px);
}
我正在尝试添加 -webkit-filter: blur (),但它根本不起作用。我刚试过“过滤器”,但它不管用。 我认为它在 html 中有效,但在 Vue 中无效,或者有任何替代方案吗?
<template>
<div class="comingsoon">
<span class="circle"></span>
<span class="msg">COMING SOON</span>
<span class="notifymsg">GET NOTIFIED WHEN IT'S READY</span>
<span class="field"></span>
</div>
</template>
CSS
.circle {
height: 400px;
width: 400px;
border-radius: 50%;
background: linear-gradient(#313247 0%, #19181D 30%);
position: absolute;
top: 20%;
left: 35%;
}
.circle:before,
.circle:after {
content: '';
height: 400px;
width: 400px;
background: linear-gradient(#FFD1DA 0%, #FF849D 5%, 2D2133 25%);
border-radius: 50%;
position: absolute;
top: 42%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-filter: blur(7px);
z-index: -1;
}
.circle:after {
width: 415px;
top:35%;
-webkit-filter: blur(14px);
opacity: .3;
}
简单添加这一行就可以了!
span.circle {
-webkit-filter: blur(14px);
}