CSS(九)——动画

2019-12-02 122 阅读1分钟

利用css画三角形

先不给div设置宽高
利用边框border四周全部设置为透明色
想要那一部分的三角形就将border-left-color设置出颜色

 <style>
        *{
            margin: 0px;
            padding:0px;
        }
        div{
            height: 0px;
            width: 0px;
            margin: 0px auto;
            border: 50px solid transparent;
            border-top-color: pink;
        }
    
    </style>
</head>
<body>
    <div></div>
</body>

效果如下

为三角形加入动画效果

tansform:retate(+ 或 deg)实现的是旋转效果，rotate是旋转deg表示旋转角度
transition:all 1s ease 表示的动画属性是所有，1s，平滑过渡

过渡动画类型：

ease 平滑过渡
linear 线性过渡
ease-in 由慢到快
ease-out 由快到慢
ease-in-out 由慢到快再到慢
cubic-bezier 特殊的立方贝尔曲线

不同浏览器transform前缀不同

 /* chrome safari */
      -webkit-transform: rotate(180deg);
      /* 火狐 */
      -moz-transform: rotate(180deg);
      /* ie */
      -ms-transform: rotate(180deg);
      /* 欧朋浏览器 */
      -o-transform: rotate(180deg);
      transform: rotate(180deg);