[CSS]用css制作的一个很熟悉的画面

发表于 2017-03-21 10:54 显示全部楼层 20 1914

8.gif

html

<div class="window">
   <div class="logo">
     <p class="top">Microsoft</p>
     <p class="mid">Windows<span>XP</span></p>
     <p class="bottom">Professional</p>
   </div>
   <div class="container">
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
   </div>
</div>
css

body{
  background: #000; 
  font-family: 'Roboto', sans-serif; 
  color: #fff;
}
.window{
  position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
 
}
.container{
  width: 150px;
  height: 10px;
  border: 2px solid #b2b2b2;
  border-radius: 7px;
  margin: 0 auto;
  padding: 2px 1px;
  overflow: hidden;
  font-size: 0;
}
.box{
  width: 9px;
  height: 100%;
  background: linear-gradient(to bottom, #2838c7 0%,#5979ef 17%,#869ef3 32%,#869ef3 45%,#5979ef 59%,#2838c7 100%);
  display: inline-block;
  margin-right: 2px;
  animation: loader 2s infinite;
  animation-timing-function: linear;
}
.logo{
  width: 220px;
  margin: 50px auto;
}
.logo p{
  margin: 0;
  padding: 0;  
}
.top{
  font-size: 16px;
  font-weight: 300;
  line-height: 16px;
}
.top:after{
  content:"\00a9";
  font-size: 10px;
  position: relative;
  top: -5px;
  margin-left: 2px;
}
.mid{
  font-size: 46px;
  font-weight: 700;
  line-height: 36px;  
}
.mid span{
  font-size: 22px;
  display: inline-block;
  vertical-align: top;
  color: #FF6821;
  margin-top: -8px;
}
.logo .bottom{
  font-size: 30px;
  font-weight: 300;
  line-height: 30px;
  margin-left: 5px;
  
}
@keyframes loader{
  0%{
    transform: translate(-30px);
  }
  100%{
    transform: translate(150px);
  }
}


回复 使用道具
举报
淡蓝心情

发表于 2017-03-29 21:53 显示全部楼层

祝愿小码哥越来越红火!!红红火火恍恍惚惚!

回复 支持 反对 使用道具
举报
今夜为你想

发表于 2017-03-29 10:56 显示全部楼层

回复 支持 反对 使用道具
举报
小灸舞

发表于 2017-03-28 08:23 显示全部楼层

回复 支持 反对 使用道具
举报
狸小猫

发表于 2017-03-27 13:27 显示全部楼层

路过,支持一下

回复 支持 反对 使用道具
举报
paschen

发表于 2017-03-26 06:36 显示全部楼层

活跃活跃论坛气氛~求楼主加好友

回复 支持 反对 使用道具
举报
易文沁

发表于 2017-03-25 20:55 显示全部楼层

作为新人,在吧里不敢大声说话,也不敢得罪人,只能默默地顶完贴转身就走,不求深藏功与名,只求前排混脸熟

回复 支持 反对 使用道具
举报
paschen

发表于 2017-03-25 10:41 显示全部楼层

顶!顶!顶!

回复 支持 反对 使用道具
举报
我爱大菠萝

发表于 2017-03-24 20:47 显示全部楼层

以诚感人者,人亦诚而应。一点回复,敬请笑纳!

回复 支持 反对 使用道具
举报
臧前

发表于 2017-03-24 20:34 显示全部楼层

楼主再见

回复 支持 反对 使用道具
举报
12下一页

发表新文章
大版主

超级版主

200

学分

6894

学币

8371

积分

超级版主

Rank: 8Rank: 8

积分
8371

签到之王勋章关注叩丁狼教育公众号关注新浪微博叩丁狼一周年勋章活动达人勋章叩丁狼版主勋章前100注册用户勋章意见领袖勋章论坛荣誉内测勋章叩丁狼网页UI学员勋章论坛百帖达成勋章真土豪勋章勋章签到周冠军勋章签到月冠军勋章签到超新星勋章叩丁狼周年庆杯子叩丁狼周年庆纪念勋章叩丁狼周年庆手机壳叩丁狼周年庆鼠标垫叩丁狼周年庆T恤

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注叩丁狼教育