CSS3半透明白块向上飘浮动画

新建html文档。

准备好需要用到的图标。

书写hmtl代码。

 

 

Enterplorer为移动办公而生

 

安全、可控、跨平台的统一移动办公门户

  

   

书写css代码。body { padding: 0; margin: 0; overflow-x: hidden; }h1, h2, h3, h4, h5, h6 { font-weight: lighter; }.banner { width: 100%; height: 400px; }.enterplorer-banner { position: relative; height: 550px; margin-bottom: 80px; padding-top: 40px; background: #ef4628; }.am-container { max-width: 1180px; width: 100%; margin: 0 auto; }.enterplorer-banner h2 { font-size: 32px; margin-bottom: 0; }.enterplorer-banner h2, .enterplorer-banner h4 { text-align: center; color: #fff; }.enterplorer-banner h4 { margin-top: 0; font-size: 20px; }.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,.15); bottom: -160px; -webkit-ani    mation: square 25s infinite; ani    mation: square 25s infinite; -webkit-transition-timing-function: linear; transition-timing-function: linear; }.bg-bubbles li:nth-child(1) { left: 10% }.bg-bubbles li:nth-child(2) { left: 20%; width: 80px; height: 80px; -webkit-ani    mation-delay: 200ms; ani    mation-delay: 200ms; -webkit-ani    mation-duration: 17s; ani    mation-duration: 17s }.bg-bubbles li:nth-child(3) { left: 25%; -webkit-ani    mation-delay: 400ms; ani    mation-delay: 400ms }.bg-bubbles li:nth-child(4) { left: 40%; width: 60px; height: 60px; -webkit-ani    mation-duration: 10s; ani    mation-duration: 10s; background-color: rgba(255, 255, 255, .25) }.bg-bubbles li:nth-child(5) { left: 70% }.bg-bubbles li:nth-child(6) { left: 80%; width: 120px; height: 120px; -webkit-ani    mation-delay: 3s; ani    mation-delay: 3s; background-color: rgba(255, 255, 255, .2) }.bg-bubbles li:nth-child(7) { left: 32%; width: 100px; height: 100px; -webkit-ani    mation-delay: 7s; ani    mation-delay: 7s }.bg-bubbles li:nth-child(8) { left: 55%; width: 20px; height: 20px; -webkit-ani    mation-delay: 15s; ani    mation-delay: 15s; -webkit-ani    mation-duration: 40s; ani    mation-duration: 40s }.bg-bubbles li:nth-child(9) { left: 25%; width: 10px; height: 10px; -webkit-ani    mation-delay: 2s; ani    mation-delay: 2s; -webkit-ani    mation-duration: 40s; ani    mation-duration: 40s; background-color: rgba(255, 255, 255, .3) }.bg-bubbles li:nth-child(10) { left: 90%; width: 120px; height: 120px; -webkit-ani    mation-delay: 11s; ani    mation-delay: 11s }

书写css3屏幕适配代码。 @-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)}}

代码整体结构。

查看效果。