web学习第二天

今天是学习web的第二天,早上用css3做了个会动的小熊,border-radius为圆的半径,

.smallxiong {
     400px;
    height: 400px;
    background: cadetblue;
    border-radius: 200px;
    position: relative;
    transition: transform 2s;
   }
   .smallxiong:hover{
    transform: rotate(720deg);
   }

这段代码是小熊运动的主要原因,能动起来,主要是因为两秒前后的图片位置不一样,就可以动起来

.tupian {
     600px;
    height: 600px;
    background: red;
    animation: bian 6s linear infinite;
    transition: transform 2s;
    img src: url(img/0.jpg);
   }
   .tupian:hover{
    transform: matrix(720deg);
   }
   @keyframes bian {
    30% {
      1200px;
     height: 600px;
     background: url(img/0-FlmELJ.jpg);
     background-size: 100% 100%;
    }

这段代码使得小熊可以运动起来, animation: bian 6s linear infinite; 然后@keyframes bian,这俩句话是运动的核心

下午的作业是做小米的官网,要美化并详细,主要是结尾的做法,做这个界面,整体上跟昨天做的内个小米商城界面差不多一样,也不是很难,

就是在最后的内个li标签又遇到了问题,float left 有时候就成功不了,很是难受,把每一个li标签的内容改了 才实现了功能

今天还学到了相对定位 和 绝对定位的使用方法,position relative 和 position absolute 两个一起使用 为相对定位 单一使用为绝对定位

原文地址:https://www.cnblogs.com/yuxuanlian/p/9526571.html