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 两个一起使用 为相对定位 单一使用为绝对定位

  • 相关阅读:
    ES6 学习记录
    Windows 服务开发 以及 重启IIS应用池
    IIS部署.net core 3.1踩坑总结
    VS 2019背景全透明以及插件、特效
    深拷贝和浅拷贝的区别
    Vue全家桶以及常用知识点
    C#设计模式
    博客园装扮教程
    Exp5 单元测试
    Exp4 代码评审
  • 原文地址:https://www.cnblogs.com/yuxuanlian/p/9526571.html
Copyright © 2011-2022 走看看