代碼如下：

#ho-shan{

width: 100%;

height: 100%;

position: relative;

outline: none;

background-color: #dd524d;

border-radius: 5px;

transform-origin: 0 0;

opacity: .7;

border: none;

}

#ho-shan::after {

content: "";

-webkit-border-radius: 100%;

border-radius: 5px;

height: 100%;

width: 90%;

position: absolute;

box-shadow: 0 0 5px 6px #dd524d; //帶陰影的邊框，可以換成背景

animation: pulsate 1s ease-out;

animation-iteration-count: infinite;

animation-delay: 1.1s;

top: 0;

left: 5%;

}

@keyframes pulsate {

0% {

transform: scale(0.1, 0.1);

opacity: 0;

filter: alpha(opacity=0);

}

50% {

opacity: 1;

filter: none;

}

100% {

transform: scale(1.2, 1.2);

opacity: 0;

filter: alpha(opacity=0);

}

}

已測無誤。css根據自己的項目設置的，個別參數自己調整。

效果如下(在線咨詢)：

再來個html新的：

CSS邊框閃爍

div{

position: absolute;

}

span{

display:block;

width: 6.25rem;

height: 6.25rem;

cursor: pointer;

padding: 1rem;

text-align: center;

background: #eb9b41;

color: #fff;

border-radius: 100%;

z-index: 999;

-webkit-animation-fill-mode:both;

animation-fill-mode:both;

line-height: 6.25rem;

}

div:after{

border-radius:100%;

background:#fcc79d;

content:"";

bottom:0;

left:0;

right:0;

top:0;

position:absolute;

-webkit-animation:div 1.5s ease infinite;

animation:div 1.5s ease infinite;

-webkit-animation-fill-mode:both;

animation-fill-mode:both;

z-index: -99;

}

@-webkit-keyframes div{

0%{

-webkit-transform:scale(1.2);

transform:scale(1.2);

opacity:1

}

50%{

-webkit-transform:scale(1.4);

transform:scale(1.4);

opacity:.5

}

to{

-webkit-transform:scale(1.1);

transform:scale(1.1);

opacity:1

}

}

@keyframes div{

0%{

-webkit-transform:scale(1.2);

transform:scale(1.2);

opacity:1

}

50%{

-webkit-transform:scale(1.4);

transform:scale(1.4);

opacity:.5

}

to{

-webkit-transform:scale(1.2);

transform:scale(1.2);

opacity:1

}

}

CSS邊框閃爍

總結

以上是生活随笔為你收集整理的html 边框四周闪光的效果,纯css 边框闪烁效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。