跳动的气泡

index.html

<header class="img-cover launch">
    <div class="tagContent">
      <div class="tagContentInfo"><a href="#">Bigger</a></div>
      <div class="tagAnimation">
        <div class="animationContainer"><span class="black1"></span></div>
        <div class="animationContainer"><span class="black2"></span></div>
        <div class="animationContainer">
          <span class="brand-bg"></span>
        </div>
      </div>
    </div>
</header>

style.css

html,body,.wrapper{
  height: 100%;
}
.img-cover{
    background: url(https://drscdn.500px.org/photo/4357365/m%3D1170/404e2d2da3947320b7c6c689f25f89a7) no-repeat center center fixed;
    height:100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.tagContent:before {
    content: ' ';
    float: left;
    width: 12px;
    height: 26px;
    background-image: url(http://www.oneniceapp.com/pc-static/images/tag/left_tag_arrow-6fa428.png);
    background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.5), not all, not all, not all, (min-resolution: 138dpi), (min-resolution: 1.5dppx){
    .tagContent:before {
        background-image: url(http://www.oneniceapp.com/pc-static/images/tag/left_tag_arrow@2x-5fac2b.png);
        -webkit-background-size: 12px 26px;
        -moz-background-size: 12px 26px;
        background-size: 12px 26px;
    }
}
.tagContent {
    font-size: 12px;
    position: absolute;
    left: 45%;
    top: 30%;
    line-height: 26px;
    opacity: .8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
}
.tagContentInfo {
    overflow: hidden;
    background: #000;
    opacity: .9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    color: #fff;
    font-size: 12px;
    -webkit-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
}
.tagContentInfo a{
    padding-right: 8px;
    color: white;
    text-decoration: none;
    padding-left: 4px;
}
.tagAnimation {
    width: 21px;
    height: 21px;
    position: absolute;
    top: 2px;
    left: -18px;
}
.animationContainer {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 21px;
    height: 21px;
}
.black1,
.black2 {
    position: relative;
    width: 21px;
    height: 21px;
    background-image: url(http://www.oneniceapp.com/pc-static/images/tag/brand_black_bg@2x-aa71bd.png);
    background-repeat: no-repeat;
    opacity: .6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
    display: block;
    -webkit-background-size: 21px 21px;
    -moz-background-size: 21px 21px;
    background-size: 21px 21px;
}
.brand-bg{
    position: relative;
    top: 50%;
    width: 9px;
    height: 9px;
    background-repeat: no-repeat;
    display: block;
    margin: -4.5px auto 0;
    vertical-align: middle;
    -webkit-animation: brand 1.95s infinite;
    background-image: url(http://www.oneniceapp.com/pc-static/images/tag/icon_brand@2x-ce3032.png);
    -webkit-background-size: 9px 9px;
    -moz-background-size: 9px 9px;
    background-size: 9px 9px;
}
 
@-webkit-keyframes brand {
  0% {
    -webkit-transform: scale(.8, .8)
  }
  10% {
    -webkit-transform: scale(1.25, 1.25)
  }
  100%,
  20% {
    -webkit-transform: scale(1, 1)
  }
}
 
.black1 {
    -webkit-animation: blackFirst 1.95s infinite
}
 
@-webkit-keyframes blackFirst {
    0% {
        -webkit-transform: scale(.03, .03)
    }
    20% {
        -webkit-transform: scale(.03, .03);
        opacity: 1;
        -ms-filter: none;
        filter: none
    }
    66% {
        -webkit-transform: scale(1, 1);
        opacity: .05;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=5)";
        filter: alpha(opacity=5)
    }
    100%,
    67% {
        -webkit-transform: scale(.03, .03)
    }
}
 
.black2 {
    -webkit-animation: blackSecond 1.95s infinite
}
 
@-webkit-keyframes blackSecond {
    0% {
        -webkit-transform: scale(.03, .03)
    }
    44% {
        -webkit-transform: scale(.03, .03);
        opacity: 1;
        -ms-filter: none;
        filter: none
    }
    90% {
        -webkit-transform: scale(1, 1);
        opacity: .05;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=5)";
        filter: alpha(opacity=5)
    }
    100%,
    91% {
        -webkit-transform: scale(.03, .03)
    }
}

xGzbPB.markdown

xGzbPB

A Pen by 刘兵 on CodePen.

License.

跳动的气泡.markdown

跳动的气泡

摘自nice app网页版的代码，顺便学学css 的keyframe 用法

A Pen by 刘兵 on CodePen.

License.