html5 点击目标,HTML5 瞄准射击小游戏/击中目标弹出提示框动效

最新推荐文章于 2022-05-13 09:38:44 发布

做生活的创作者

最新推荐文章于 2022-05-13 09:38:44 发布

阅读量140

点赞数

文章标签： html5 点击目标

CSS

语言：

CSSSCSS

确定

*:after,

*:before {

margin: 0;

padding: 0;

}

body {

overflow: hidden;

background: radial-gradient(#000 16%, transparent 17%), radial-gradient(#444 16%, transparent 17%) 0px 1px, radial-gradient(#000 16%, transparent 17%) 8px 8px, radial-gradient(#444 16%, transparent 17%) 8px 9px;

background-color: #282828;

background-size: 16px 16px;

}

h2 {

font-size: 24pt;

}

p {

font-size: 12pt;

margin-bottom: 12pt;

}

a {

-webkit-transition: color 0.25s ease-in-out;

transition: color 0.25s ease-in-out;

font-family: "Roboto Condensed", Helvetica, sans-serif;

text-transform: uppercase;

text-decoration: none;

color: #dff3fd;

}

a:visited {

color: #dff3fd;

}

li.active a,

a:hover,

a:active {

color: #e5e5e5;

}

.centered {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

}

.centered-y {

position: absolute;

width: 100%;

margin: 0 auto;

text-align: center;

top: 50%;

left: 50%;

-webkit-transform: translateY(-50%);

}

.map-box {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

overflow: hidden;

height: 400px;

width: 400px;

background-color: #222;

background: url(/assets/landing.jpg) 0 0 repeat-x;

backround-size: 1065px, 525px;

border: 1px solid #57c1e8;

box-sizing: border-box;

}

.map-box .map-point {

cursor: pointer;

outline: none;

z-index: 0;

position: absolute;

width: 40px;

height: 40px;

border-radius: 20px;

opacity: 0;

-webkit-transform: translate(-50%, -50%);

-webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;

-webkit-transition-delay: 2s;

background: rgba(26, 26, 26, 0.9);

border: 5px solid #57c1e8;

}

.map-point.active {

opacity: 1;

}

.map-box .map-point .content {

opacity: 0;

-webkit-transition: opacity 0.25s ease-in-out;

width: 100%;

height: 100%;

left: 50%;

-webkit-transform: translateX(-50%);

overflow: overlay;

}

.map-box .map-point:active,

.map-box .map-point:focus {

margin: -155px 0 0 -20px;

width: 300px;

height: 220px;

color: #e5e5e5;

z-index: 1;

-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;

}

.map-box .map-point:active .content,

.map-box .map-point:focus .content {

opacity: 1;

overflow: hidden;

-webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;

}

.map-box .map-point:active .content a:hover,

.map-box .map-point:active .content a:active,

.map-box .map-point:focus .content a:hover,

.map-box .map-point:focus .content a:active {

color: #afe1fa;

}

#cube {

position: absolute;

height: 55px;

width: 55px;

margin: -27.5px 0 0 0px;

top: 50%;

left: 50%;

z-index: 5;

overflow: visible;

-webkit-transition: height 1s ease, width 1s ease, margin 1s ease;

pointer-events: none;

}

#cube.animate {

height: 100px;

width: 100px;

margin: -50px 0 0 -23px;

-webkit-transition: height 1s ease, width 1s ease, margin 1s ease;

}

#cube.animate.shrink {

height: 75px;

width: 75px;

margin: -38.75px 0 0 -11.5px;

-webkit-transition: height 1s ease, width 1s ease, margin 1s ease;

}

.circle1.animate,

.circle2.animate,

.circle3.animate,

.circle4.animate {

height: 90px;

width: 90px;