@keyframes warn {
0% {
transform:scale(0.3);
-webkit-transform:scale(0.3);
opacity:0;
}
25% {
transform:scale(0.3);
-webkit-transform:scale(0.3);
opacity:0.1;
}
50% {
transform:scale(0.5);
-webkit-transform:scale(0.5);
opacity:0.3;
}
75% {
transform:scale(0.8);
-webkit-transform:scale(0.8);
opacity:0.5;
}
100% {
transform:scale(1);
-webkit-transform:scale(1);
opacity:0;
}
}@keyframes warn1 {
0% {
transform:scale(0.3);
-webkit-transform:scale(0.3);
opacity:0;
}
25% {
transform:scale(0.3);
-webkit-transform:scale(0.3);
opacity:0.1;
}
50% {
transform:scale(0.3);
-webkit-transform:scale(0.3);
opacity:0.3;
}
75% {
transform:scale(0.5);
-webkit-transform:scale(0.5);
opacity:0.5;
}
100% {
transform:scale(0.8);
-webkit-transform:scale(0.8);
opacity:0;
}
}* {
margin:0;
padding:0;
}
.w {
margin:0 auto;
max-width:1540px;
}
.wrap {
width:100%;
position:relative;
background-color:black;
}
.wrap img {
width:100%;
}
.wrap .foucs-group {
z-index:2;
background-color:red;
width:10px;
height:10px;
position:absolute;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
.wrap .foucs-group span:nth-child(2) {
cursor:pointer;
position:absolute;
width:35px;
height:35px;
left:-13px;
top:-13px;
border:1px solid yellow;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
z-index:1;
opacity:0;
-webkit-animation:warn1 2s ease-out;
-moz-animation:warn1 2s ease-out;
animation:warn1 2s ease-out;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-iteration-count:infinite;
box-shadow:1px 1px 30px yellow;
}
.wrap .foucs-group span {
cursor:pointer;
position:absolute;
width:35px;
height:35px;
left:-13px;
top:-13px;
border:1px solid yellow;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
z-index:1;
opacity:0;
-webkit-animation:warn 2s ease-out;
-moz-animation:warn 2s ease-out;
animation:warn 2s ease-out;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-iteration-count:infinite;
box-shadow:1px 1px 30px yellow;
}
.wrap .foucs-group .popUp {
display:none;
width:100px;
height:100px;
background-color:#ccc;
position:absolute;
top:-30px;
left:15px;
}
.wrap span:active + .popUp {
display:block;
}
更新时间:2023-08-27 23:13:45