一. HTML页面
1 <body> 2 <div class="box4"> 3 <div class="box_In"> 4 <div class="b" id="box5"> 5 <div class="small_hd wow slideInDown"> 6 <p>二、不断添加的新/热技术点</p> 7 </div> 8 <div class="con"> 9 <div class="b_con"> 10 <p>这里有超多的技术点，<br />密密麻麻的，<br />一闪一闪，<br />亮晶晶。</p> 11 </div> 12 <img class="b2" src="image/box4_b2.png"/> 13 <img class="b3" src="image/box4_b3.png"/> 14 <img class="b4" src="image/box4_b4.png"/> 15 <img class="b5" src="image/box4_b5.png"/> 16 </div> 17 </div> 18 </div> 19 </div> 20 </body>
二. CSS代码
1 body{background: #140026;}
2 .box_In{width: 1200px;margin: 0 auto;position: relative;}
3
4 /*box4*/
5 .box4 .small_hd{background: url(../images/box4_s1.jpg) no-repeat center; width: 945px;height: 35px;margin: 0 auto;line-height: 26px;}
6 .box4 .small_hd p{font-size: 24px;color: #fff;text-align: center;letter-spacing:5px;}
7
8 .box4 .b{padding-bottom: 80px;}
9 .box4 .b .small_hd{background: url(../images/box4_s2.jpg) no-repeat center; width: 967px;}
10 .box4 .b .con{width: 1157px;height: 539px;position: relative;margin: 50px auto 0;overflow: hidden;}
11 .box4 .b .b_con{background: url(../image/box4_b1.png) no-repeat center;width: 322px;height: 323px;margin:80px auto 0;}
12 .box4 .b .b_con p{font-size: 20px;color: #fff;text-align: center;padding-top: 80px;line-height: 32px;}
13 .box4 .b .con img{position: absolute;top: 0;left: 0;}
14 .box4 .b .con .b2{animation:bing2 5s infinite;-webkit-animation:bing2 5.5s infinite;-moz-animation:bing2 5.5s infinite;-o-animation:bing2 5.5s infinite;}
15 .box4 .b .con .b3{animation:bing2 3s infinite;-webkit-animation:bing2 3s infinite;-moz-animation:bing2 3s infinite;-o-animation:bing2 3s infinite;}
16 .box4 .b .con .b4{animation:bing1 4s infinite;-webkit-animation:bing1 4s infinite;-moz-animation:bing1 4s infinite;-o-animation:bing1 4s infinite;}
17 .box4 .b .con .b5{animation:bing3 2s infinite;-webkit-animation:bing3 2.5s infinite;-moz-animation:bing3 2.5s infinite;-o-animation:bing3 2.5s infinite;}
18
19 @keyframes bing2
20 { 0%{opacity: .1;} 50%{opacity: 1;} 100%{opacity: .1;}}
21 @-moz-keyframes bing2
22 { 0%{opacity: .1;} 50%{opacity: 1;} 100%{opacity: .1;}}
23 @-webkit-keyframes bing2
24 { 0%{opacity: .1;} 50%{opacity: 1;} 100%{opacity: .1;}}
25 @-o-keyframes bing2
26 { 0%{opacity: .1;} 50%{opacity: 1;} 100%{opacity: .1;}}
27
28 @keyframes bing3
29 { 0%{opacity: .5;} 50%{opacity: 1;} 100%{opacity: .5;}}
30 @-moz-keyframes bing1
31 { 0%{opacity: .5;} 50%{opacity: 1;} 100%{opacity: .5;}}
32 @-webkit-keyframes bing1
33 { 0%{opacity: .5;} 50%{opacity: 1;} 100%{opacity: .5;}}
34 @-o-keyframes bing1
35 { 0%{opacity: .5;} 50%{opacity: 1;} 100%{opacity: .5;}}
三. 效果展示
原文地址：https://www.cnblogs.com/LF-blog/p/9950719.html
时间： 2024-11-12 19:16:04