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

更新时间:2023-07-28 04:23:47 阅读: 评论:0

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 ea-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边框闪烁
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 ea infinite; animation:div 1.5s ea infinite;
-webkit-animation-fill-mode:both; animation-fill-mode:both;
z-index: -99;
}
@-webkit-keyframes div{
-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边框闪烁

本文发布于:2023-07-28 04:23:47,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/89/1099487.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:边框   效果   闪烁   参数   个别
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图