zoukankan      html  css  js  c++  java
  • 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 两个一起使用 为相对定位 单一使用为绝对定位

  • 相关阅读:
    30行左右代码实现一个类似httprunner的接口框架
    Python中一些高效的数据操作
    使用jsonpath解析多层嵌套的json响应信息
    操作系统的启动流程
    I/O延迟
    存储器
    多线程和多核芯片
    CPU详解(内核态和用户态)
    操作系统
    计算机组成
  • 原文地址:https://www.cnblogs.com/yuxuanlian/p/9526571.html
Copyright © 2011-2022 走看看