html css3 向上气泡,CSS3 点击膨胀的气泡（带音效）

CSS

语言：

CSSSCSS

确定

html,

body {

background: #2d3047;

overflow: hidden;

margin: 0;

font-family: 'Open Sans', Sans-Serif;

}

.container {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

height: 100vh;

width: 20vw;

}

.container .touchMe:nth-of-type(1) {

margin: 55vh 30vw;

position: absolute;

cursor: pointer;

/*#E83F6F*/

background: #e51c19;

border-radius: 100%;

padding: 30px;

width: 20px;

height: 20px;

-webkit-transition: all 1000ms, 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: all 1000ms, 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.container .touchMe:nth-of-type(2) {

margin: 68.5vh 54.5vw;

position: absolute;

cursor: pointer;

/*#E83F6F*/

background: #90344b;

border-radius: 100%;

padding: 30px;

width: 20px;

height: 20px;

-webkit-transition: all 1000ms, 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: all 1000ms, 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.container .touchMe:nth-of-type(3) {

margin: 51.66667vh 79.33333vw;

position: absolute;

cursor: pointer;

/*#E83F6F*/

background: #bc49ec;

border-radius: 100%;

padding: 15px;

width: 20px;

height: 20px;

-webkit-transition: all 1000ms, 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: all 1000ms, 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.container .touchMe:nth-of-type(4) {

margin: 47.25vh 52.25vw;

position: absolute;

cursor: pointer;

/*#E83F6F*/

background: #f822b7;

border-radius: 100%;

padding: 11px;

width: 20px;

height: 20px;

-webkit-transition: all 1000ms, 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: all 1000ms, 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.container .touchMe:nth-of-type(5) {

margin: 49.8vh 39.4vw;

position: absolute;

cursor: pointer;

/*#E83F6F*/

background: #e947a7;

border-radius: 100%;

padding: 23px;

width: 20px;

height: 20px;

-webkit-transition: all 1000ms, 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: all 1000ms, 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.container .touchMe:nth-of-type(6) {

margin: 51.33333vh 36vw;

position: absolute;

cursor: pointer;

/*#E83F6F*/

background: #fc4e59;

border-radius: 100%;

padding: 13px;

width: 20px;

height: 20px;

-webkit-transition: all 1000ms, 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: all 1000ms, 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.container .touchMe:nth-of-type(7) {

margin: 42.28571vh 24.28571vw;

position: absolute;

cursor: pointer;

/*#E83F6F*/

background: #9d48e0;

border-radius: 100%;

padding: 17px;

width: 20px;

height: 20px;

-webkit-transition: all 1000ms, 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition: all 1000ms, 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

}

.container_content {

z-index: 2;

}

.container_content .closeMe {

position: relative;

color: rgba(255, 255, 255, 0.8);

opacity: 0;

cursor: pointer;

}

.expand {

-webkit-transform: scale(50);

-ms-transform: scale(50);

transform: scale(50);

z-index: 1;

}