css0417

今天主要学习了背景颜色渐变，渐变时间，浮动，认识了盒模型 还有图片替换技术。

让我印象深刻的就是颜色渐变，代码如下：

.box3{width: 200px;
    height: 200px;
    background-color: red;
    /*圆*/
    /*border-radius: 50%;*/
    /*元素阴影*/
    /*X Y 模糊 外延 颜色*/
    /*box-shadow: 5px 2px 5px 10px black;*/
    background: linear-gradient(red,yellow);
    /*background: linear-gradient(to right,red,yellow);*/
    /*90deg 90°*/
    /*background: linear-gradient(90deg red,yellow);*/
    /*yellow开始渐变*/
    /*background: linear-gradient(-90deg red,yellow);*/
    /*径向渐变*/
    /*background: radial-gradient(red,yellow);*/
    /*background: radial-gradient(red 10px,yellow 15px);*/

    /*谷歌、苹果。 ms 微软 moz 火狐 o 欧朋*/
   /*-webkit-transition: all linear 2s;*/
    /*-moz-transition: all linear 2s;*/
    /*-o-transition:all linear 2s ;*/
    /*不支持微软？-ms-transition 打不出 */
    /*-ms-transition:all linear 2s ;*/
    /*移入逐渐变色，移出逐渐变色*/
    /*transition: all linear 2s;*/
    /*宽度逐渐渐变*/
    /*transition: width linear 2s;*/
    /*1表示循环次数  infinite 无线循环 myAnimation动画命名 */
    animation: myAnimation 2s infinite;
}
@keyframes myAnimation {
    /*from{*/
        /**/
    /*}*/
    /*to{*/
        /**/
    /*}*/
    0%{
        background-color: red;
    }

    /*20%{*/
        /**/
    /*}*/
    /*40%{*/
        /**/
    /*}*/

    /*60%{*/
        /**/
    /*}*/
    /*80%{*/
        /**/
    /*}*/
    /*100%{*/
        /**/
    /*}*/
}
.box3:hover{
    /*width: 150px;*/
    /**/
    /*移入逐渐变色*/
    /*transition: all linear 2s;*/

}

转载于:https://www.cnblogs.com/zhangchuan09/p/6725304.html