html 类似雷达扫描效果 及 闪屏效果

//雷达扫描效果
 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 ????width: 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 ????width: 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;}}