//雷达扫描效果
1 <em id="Radar" class="RadarFast"></em> 2 3 css: 4 .RadarFast{ 5 position: absolute; 6 z-index: 10; 7 bottom: 140px; 8 left: 50%; 9 margin-left: -3px; 10 } 11 .RadarFast:after{ 12 content: ''; 13 position: absolute; 14 280px; 15 height: 280px; 16 border-radius: 50%; 17 box-shadow: 0 0 30px 10px rgba(254,62,166,0.8); 18 top: 50%; 19 left: 50%; 20 margin-left: -140px; 21 z-index: 3; 22 opacity: 0; 23 -webkit-animation: Fast 0.5s 0.5s infinite ease-out; 24 -moz-animation: Fast 0.5s 0.5s infinite ease-out; 25 animation: Fast 0.5s 0.5s infinite ease-out; 26 } 27 @-webkit-keyframes Fast { 28 0% {opacity: 0;-webkit-transform: scale(0.1);} 29 50% {opacity: 1;} 30 100%{opacity: 0;-webkit-transform: scale(1.2);} 31 } 32 @-moz-keyframes Fast { 33 0% { opacity: 0; -moz-transform: scale(0.1); } 34 50% { opacity: 1; } 35 100%{ opacity: 0; -moz-transform: scale(1.2); } 36 } 37 @-ms-keyframes Fast { 38 0% { opacity: 0; } 39 50% { opacity: 1; } 40 100%{opacity: 0; } 41 } 42 @-o-keyframes Fast { 43 0% { opacity: 0; -o-transform: scale(0.1); } 44 50% {opacity: 1; } 45 100%{ opacity: 0;-o-transform: scale(1.2); } 46 } 47 @keyframes Fast { 48 0% { opacity: 0; transform: scale(0.1); } 49 50% {opacity: 1; } 50 100%{opacity: 0;transform: scale(1.2); } 51 }
1 //闪屏效果 2 <div id="twinkle"></div> 3 4 css: 5 #twinkle{ 6 position: fixed; 7 100%; 8 height: 100%; 9 top:0; 10 left: 0; 11 display: none; 12 background:rgba(254,62,166,0.6); 13 z-index: 50; 14 -webkit-animation: Bgs 0.5s infinite ease-in-out; 15 } 16 @-webkit-keyframes Bgs { 17 0% {opacity: 0;} 18 50% {opacity: 1;} 19 100%{opacity: 0;}}