MENU

Catalog

css仿气泡漂浮

June 7, 2017 • Read: 1913 • 杂的文

以前看到有人用过,但是是方块,加了个border-radius就贴出来了,效果在头图里可以看到。

[-]html

[-]css

 .bg-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
 }

 ul,li {
margin: 0;
padding: 0;
 }

 .bg-bubbles li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255,255,255,.07);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
border-radius: 5rem;
 }

 .bg-bubbles li:nth-child(1) {
left: 10%
 }

 .bg-bubbles li:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
-webkit-animation-duration: 17s;
animation-duration: 17s
 }

 .bg-bubbles li:nth-child(3) {
left: 25%;
-webkit-animation-delay: 400ms;
animation-delay: 400ms
 }

 .bg-bubbles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
-webkit-animation-duration: 30s;
animation-duration: 30s;
background-color: rgba(255, 255, 255, .1)
 }

 .bg-bubbles li:nth-child(5) {
left: 70%
 }

 .bg-bubbles li:nth-child(6) {
left: 80%;
width: 80px;
height: 80px;
-webkit-animation-delay: 5s;
animation-delay: 5s;
background-color: rgba(255, 255, 255, .15)
 }

 .bg-bubbles li:nth-child(7) {
left: 32%;
width: 60px;
height: 60px;
-webkit-animation-delay: 7s;
animation-delay: 7s
 }

 .bg-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
animation-delay: 15s;
-webkit-animation-duration: 40s;
animation-duration: 40s
 }

 .bg-bubbles li:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
background-color: rgba(255, 255, 255, .1)
 }

 .bg-bubbles li:nth-child(10) {
left: 90%;
width: 80px;
height: 80px;
-webkit-animation-delay: 11s;
animation-delay: 11s
 }

 @-webkit-keyframes square {
0% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
    transform: translateY(-700px) rotate(600deg)
}
 }

 @keyframes square {
0% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
    transform: translateY(-700px) rotate(600deg)
}
 } /* 漂浮 */
Tags: None
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

已有 14 条评论
  1. Others is capable of a hardon but cannot maintain it during sexual intercourse. Use these circumspectly however, because they may lower glucose levels, that's an undesirable effect in men whose blood glucose levels are properly balanced.
    http://www.generiqueviagrafr.fr/comment-acheter-du-vrai-viagra

  2. Hello blogger, i must say you have hi quality content here.
    Keep up good work.

  3. I have checked your blog and i have found some duplicate content, that's why you don't rank high in google, but there
    is a tool that can help you to create 100% unique content, search for: Boorfe's tips unlimited content

  4. If you want to monetize porn website i have solution for you.
    Just visit the link i posted. This adnetwork is also very
    good for main stream websites

  5. I think your page needs some fresh articles. Writing manually
    takes a lot of time, but there is tool for this time consuming task,
    search for: Ssundee advices unlimited content for any
    blog

  6. I have noticed that your page needs some fresh articles. Writing manually takes a
    lot of time, but there is tool for this boring task, search for: Wrastain's tools for content

  7. 头图并没有哦....

  8. 测试评论

    1. 夏

      @三秋回复测试φ( ̄∇ ̄o)

  9. 那人是谁啊@(滑稽)

    1. 夏

      @蔡锶铎鬼知道是哪个小学生#(赞一个)

  10. 这个也不错

  11. 可以的

    1. 夏

      @阿土#(献花)