html边框四周闪光的效果,纯css边框闪烁效果

2024年2月8日发(作者：)

html边框四周闪光的效果,纯css边框闪烁效果代码如下：#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% {

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边框闪烁