JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<!--感覺還不錯的凸顯效果-->
<div class="event">


<div class="event-awards-item event-awards-honor">
<div class="awards-img honor-img">
<div class="effect-wave">
<p style='width:80px;margin-left:-30px;margin-top:-3px;color:red;'>(已截止)</p>
</div>
<div class="effect-shiny">
<i class="crown"></i>
<i class="shine"></i>
<i class="cross"></i>
<i class="cross"></i>
<i class="shine"></i>
<i class="shine"></i>
</div>
</div>
<p>租金補貼</p>

</div>

</div>

CSS

.event {
padding: 50px 0 0 0;
background: #7080DD;
text-align: center;
overflow: hidden;
  width: 120px;
  margin:auto;
  font-family:微軟正黑體;
  font-weight:800;
}

@-webkit-keyframes shiny-gold {
0% {
box-shadow: 0px 0px 0px 0px #ffc761, 0px 0px 0px 0px #ffc761, 0px 0px 0px 30px rgba(255, 199, 97, 0.5);
}
33% {
box-shadow: 0px 0px 0px 0px #ffc761, 0px 0px 0px 30px rgba(255, 199, 97, 0.5), 0px 0px 0px 40px rgba(255, 199, 97, 0);
}
66% {
box-shadow: 0px 0px 0px 30px rgba(255, 199, 97, 0.5), 0px 0px 0px 40px rgba(255, 199, 97, 0), 0px 0px 0px 0px rgba(255, 199, 97, 0);
}
100% {
box-shadow: 0px 0px 0px 40px rgba(255, 199, 97, 0), 0px 0px 0px 40px rgba(255, 199, 97, 0), 0px 0px 0px 30px rgba(255, 199, 97, 0.5);
}
}

@keyframes shiny-gold {
0% {
box-shadow: 0px 0px 0px 0px #ffc761, 0px 0px 0px 0px #ffc761, 0px 0px 0px 30px rgba(255, 199, 97, 0.5);
}
33% {
box-shadow: 0px 0px 0px 0px #ffc761, 0px 0px 0px 30px rgba(255, 199, 97, 0.5), 0px 0px 0px 40px rgba(255, 199, 97, 0);
}
66% {
box-shadow: 0px 0px 0px 30px rgba(255, 199, 97, 0.5), 0px 0px 0px 40px rgba(255, 199, 97, 0), 0px 0px 0px 0px rgba(255, 199, 97, 0);
}
100% {
box-shadow: 0px 0px 0px 40px rgba(255, 199, 97, 0), 0px 0px 0px 40px rgba(255, 199, 97, 0), 0px 0px 0px 30px rgba(255, 199, 97, 0.5);
}
}

.effect-shiny {
position: absolute;
top: 50%;
left: 50%;
}

.effect-shiny i {
display: block;
position: absolute;
}

.effect-shiny i.shine {
border-radius: 50%;
width: 4px;
height: 4px;
}

.effect-shiny i.cross:before, .effect-shiny i.cross:after {
content: "";
position: absolute;
top: 0;
left: 0;
border-radius: 6px;
width: 12px;
height: 3px;
}

.effect-shiny i.cross:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

.honor-img {
position: relative;
}

.honor-img .effect-wave {
display: inline-block;
border-radius: 50%;
-webkit-animation: shiny-gold 3s linear infinite;
animation: shiny-gold 3s linear infinite;
width: 18px;
  height: 18px;
}
.honor-img .effect-wave img {
    position: relative;
   ...