CSS&HTML面经专题

一、在一个div里，如何实现字少的时候居中，字多的时候左对齐

div本身是块级元素，不设置宽，就默认撑满，所以要设置成行内块元素；
通过padding设置居中效果；
设置最大宽，当超过这个宽度就会换行，因此没有设置高度

二、CSS3动画/缩放/animation

动画属性

CSS3动画属性animation和CSS3的transition属性一样是一个复合属性，它包含了8个属性：

animation-name，主要用来指定一个关键帧动画的名字，这个动画名必须对应一个@keyframes规则。CSS加载时会应用animation-name指定的动画，从而执行动画。
animation-duration，主要用来设置动画播放所需时间，一般以秒为单位
animation-timing- function主要用来设置动画的播放方式，与transition-timing-function类似。
animation-delay、主要用来指定动画开始时间，一般以秒为单位。
animation-iteration- count、主要用来指定动画播放的循环次数。
animation-direction、主要用来指定动画的播放方向。
animation-play- state，主要用来控制动画的播放状态。
animation-fill- mode，主要用来设置动画的时间外属性。

动画题1：CSS3实现loading动画

给一个元素设置宽高相等的数值，border-radius设置成50%使其变成一个圆形，将背景色设置为透明，给元素加上几个像素的边框，并配上自己喜欢的颜色，需要注意的是，这里要将其中一个边的边框设置为透明，使其看起来像是一个只有四分之三的圆环，然后为其设置动画，让它动起来就可以了。给一个定位元素设置transform:translate(-50%, -50%)，再配合top和left的50%，可以使元素水平和垂直居中。之所以将translate(-50%, -50%)写在了form和to里面，是因为如果直接在元素上写"transform:translate(-50%, -50%)"，在动画里又写"transform: rotate(0deg)"会覆盖掉元素上的transform属性而导致无法居中。最后在关键帧设置转速：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css 转圈</title>
  <style>
    .turn{
      width:100px;
      height: 100px;
      background: aqua;
      animation:turn 1s linear infinite;      
      margin: 100px auto;
    }
    /* 
      turn : 定义的动画名称
      1s : 动画时间
      linear : 动画以何种运行轨迹完成一个周期
      infinite :规定动画应该无限次播放
     */
    @keyframes turn{
      0%{-webkit-transform:rotate(0deg);}
      25%{-webkit-transform:rotate(90deg);}
      50%{-webkit-transform:rotate(180deg);}
      75%{-webkit-transform:rotate(270deg);}
      100%{-webkit-transform:rotate(360deg);}
    }
  </style>
</head>
<body>
  <div class="turn"></div>
</body>
</html>

动画题2：CSS3动画，鼠标移上去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width:120px;
            height:120px;
            line-height:120px;
            margin: 20px;
            background-color: #5cb85c;
            float: left;
            font-size: 12px;
            text-align: center;
            color:#000;
        }
        /*效果一：360°旋转 修改rotate(旋转度数)*/
        .img1 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }
        .img1:hover {
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
        }
 
        /*效果二：放大 修改scale(放大的值)*/
        .img2 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }
 
        .img2:hover {
            transform: scale(1.2);
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
        }
        /*效果三：旋转放大 修改rotate(旋转度数) scale(放大值)*/
        .img3 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }
 
        .img3:hover {
            transform: rotate(360deg) scale(1.2);
            -webkit-transform: rotate(360deg) scale(1.2);
            -moz-transform: rotate(360deg) scale(1.2);
            -o-transform: rotate(360deg) scale(1.2);
            -ms-transform: rotate(360deg) scale(1.2);
        }
        /*效果四：上下左右移动 修改translate(x轴,y轴)*/
        .img4 {
            transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
        }
 
        .img4:hover {
            transform: translate(0, -10px);
            -webkit-transform: translate(0, -10px);
            -moz-transform: translate(0, -10px);
            -o-transform: translate(0, -10px);
            -ms-transform: translate(0, -10px);
        }
    </style>
</head>
<body>
    <div class="img1">360°旋转 </div>
    <div class="img2">放大</div>
    <div class="img3">旋转放大</div>
    <div class="img4">上下左右移动 </div>
</body>
</html>

动画题3：CSS3实现下拉滚动动画

（之后补充）

三、CSS画图

1、矩形

矩形是最简单的了，一个 <div>，设置宽高，加个背景就行了。

/*CSS代码*/
div {
    width: 100px;
    height: 100px;
    background: #FF9900;
    /*   居中 */
    margin: auto; 
}
/* ================ */ 
/*HTML代码*/
<div></div>

2、圆

机械行业有个名词叫「圆角」，当圆角半径为上面正方形边长的一半时，也就是说把上面的正方形的四个角「磨圆」了，就成了一个圆。

因此我们只需向前面的 CSS 代码中添加一行 border-radius: 50px; 即可。

/*CSS代码*/
div {
    width: 100px;
    height: 100px;
    background: #FF9900;
    border-radius: 50px;
    /*   居中 */
    margin: auto; 
}
/* ================ */ 
/*HTML代码*/
<div></div>

3、半圆

高度需为宽度的一半
保留了左上和右上的圆角

.semi-circle {
  width: 100px;
  height: 50px;
  background: #FF9900;
  border-radius: 50px 50px 0 0;
  margin: auto;
}
<div class="semi-circle"></div>

4、三角形

利用border：

.triangle {
    width: 0;
    height: 0;
    border-bottom: 100px solid pink;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
<div class="triangle"></div>

5、三点骰子

常用语法注解：

flex-direction
justify-content: space-between; 两端对齐
align-items
flex-wrap：单行还是多行
align-self: center

<div class="box">
  <span class="item"></span>
  <span class="item"></span>
  <span class="item"></span>
</div>

.box {
  width: 200px;
  height: 200px;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  justify-content: space-between; /* 两端对齐 */
}  
/*align-self运用：flex子项单独在侧轴（纵轴）方向上的对齐方式。*/
.item {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #666;  
}  
.item:nth-child(2) {
  align-self: center; /* 垂直方向居中 */
}
.item:nth-child(3) {
  align-self: flex-end; /* 垂直方向尾对齐 */
}

CSS&HTML面经专题——（二）常见CSS绘制/动画题目