Html
    Css
    Js

    
                        
@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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

锚点图(原创)

更新时间:2023-08-27 23:13:45

0