前言

每天挤一篇的日更让我日渐憔悴，今天闲着没事，翻出了拳皇98，打了一会儿以后，突然来了灵感，拿css做一个拳皇人物动作展示效果不就就可以再 水

需要用到的css属性预告
  • flex布局 经典flex,不多赘述
  • -webkit-box-reflect 倒影，加点花活儿~
  • linear-gradient 来个斑马条纹调剂调剂
  • transition 过渡来一下
核心实现

我们的页面结构由作为容器的container，下面包着两个box,box内放置我们的拳皇人物 三层结构组成

<div class="container">
    <div class="box">
      <img src="https://pic.qy566.com/pixijs/images/bs.gif" alt="">
    </div>
    <div class="box">
      <img src="https://pic.qy566.com/pixijs/images/nn.gif" alt="">
    </div>
  </div>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

首先是container的样式，作为布局容器。container要做的就是自身水平垂直居中，组内元素居中

html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1e2759;
  }
  .container{
    display: flex;
    position: relative;
  }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

接下来就要实现斑马条纹了，斑马条纹通过linear-gradient+background-size来实现，linear-gradient是线性渐变，第一个参数指定渐变开始角度，之后的参数指定各个位置的颜色与所占百分比, background-size决定了条纹的宽度，这里我们用到了色相反相滤镜，来使两个盒子的条纹呈现不同的颜色

.box{
    position: relative;
    width: 211px;
    height: 360px;
    background: #444;
    margin: 0 20px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg,  #3c5fbd 25%, #444 25%,
     #444 50%,#3c5fbd 50%,#3c5fbd 75%,
    #444 75%, 
    #444 100%
    );
    background-size: 40px 40px;
    cursor: pointer;
  }
  .box:nth-child(2) {
    filter: hue-rotate(90deg);
  }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.

利用box的before伪元素，我们添加一个酷炫光圈背景

.box::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://pic.qy566.com/pixijs/images/quan.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

接下来就是让图片在hover的时候，改变大小，响应鼠标的移动

.box img{
    position: absolute;
    bottom: 0;
    height: 90%;
    transition: height .5s;
  }
  .box:nth-child(2) img{
    transform: rotateY(180deg);
  }
  .box:hover img{
    height: 400px;
  }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

最后的最后，借助-webkit-box-reflect绘制一个倒影

-webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #0004, #000000)
  • 1.
核心知识点总结
  • filter hue-rotate 接收一个角度值，作用是将当前的颜色进行反相，处理出不同的颜色效果来，我们的呼吸灯就是利用的这个滤镜，如果你们注意看我的代码的话，我的gif背景光圈用的是同一张，但是经过了反相滤镜，一样可以变成对应的颜色，非常神奇
  • linear-gradient 线性渐变
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
  • 1.

direction代表方向，然后是渐变的颜色,比如下面这句

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ 
linear-gradient(0deg, blue, green 40%, red);
  • 1.
  • 2.
  • -webkit-box-reflect 倒影，倒影第一个参数是方向， below above等等，第二个参数是 间距 距离当前元素的间距 第三个参数是mask-image 遮罩图形，对倒影再次进行处理叠加的图像
总结

css吸引人的地方就在于，只要你想象力足够丰富，那你可以做出任何特效，正所谓一千个人有一千个哈姆雷特，一千个人写css也会有很多不同的实现，也许，这就是css的魅力所在吧！

码上掘金

老规矩咯,码上掘金太小，看不出倒影效果，建议点击详情去大屏查看！  代码片段