html + css

最新推荐文章于 2023-02-08 10:37:57 发布

Jookerone

最新推荐文章于 2023-02-08 10:37:57 发布

阅读量181

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_45178972/article/details/112186000

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

chrome浏览器是video的自动播放：autoplay=“autoplay” muted=“muted”
input::placeholder{
color:pink;
}
autofocus
autocomplete=“off” 关闭提交后，再次填写表单时自动显示内容
type=file multiple
类选择器、属性选择器、伪类选择器，权重为10

 ul li:nth-child(-n+3){
   background-color: pink;
  }

n从0递增，-n+3从3递减，就是前三个选中了
结构伪类选择器一般用于选择父级里面的第几个孩子
区别：
section div:nth-child(1) 先找第一个孩子，如果这个孩子是div就选中
nth-child 对父元素里面所有孩子排序选择（序号是固定的），先找到第n个孩子，然后看看是否和E匹配
section div:nth-of-type(1) 先找div指定类型的所有盒子，在找第一个div
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E,然后在根据E 找第n个孩子
伪元素选择器：利用css创建新标签元素，而不需要HTML标签，从而简化HTML结构
::before 在元素内部的前面插入内容；
::after 在元素内部的后面插入内容；
注意：
1.before和after创建一个元素，但是属于行内元素；
2.新创建的这个元素在文档树中是找不到的，我们称为伪元素；
3.语法：element::before{ }
4.before和after必须有content属性
5.before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
6.伪元素选择器和标签选择器一样，权重为1
div:hover::before{
display:block;
}
方式2：
.clearfix:before,
.clearfix:after{
content:’’;
display:table;
}
.clearfix:after{
clear: both;
}
css3盒子模型
1.box-sizing:content-box 盒子大小为width+padding+border(以前默认的)
2.box-sizing:border-box 盒子大小为width

*{
margin:0;
padding:0;
box-sizing: border-box;
}

模糊滤镜 filter

img{
  width: 100%;
    filter: blur(5px);
  }
  img:hover{
    filter: blur(0);
  }

transition：过度动画，是从一个状态渐渐的过度到另外一个状态
经常与:hover一起搭配使用

/* 谁做过度给谁加 */
transition: all .5s;
行高可以继承给子盒子
/* 一般情况下，a如果包含有宽度的盒子，a需要转为块级元素 */
text-align,line-height会从祖先元素继承
translate:移动，改变元素在页面中的位置，类似定位
transform
语法：transform:translate(x,y); 或者分开写x,y相对于父元素移动
transform:translateX(n）;
transform:translateY(n）;
重点：
translate最大的优点：不会影响到其他元素的位置；
translate中的百分比单位是相对于自身元素的translate：（50%，50%）；
对行内标签没有效果，如span
实现水平垂直居中

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      position: relative;
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    p{
      position: absolute;
      left: 50%;
      top:50%;
      width: 50px;
      height: 50px;
      background-color: skyblue;
      transform: translate(-50%,-50%);
    }
  </style>

旋转 rotate
transform:rotate(度数deg)
1.角度为正时，顺时针，负时，为逆时针
2.默认旋转的中心点是元素的中心点

 <style>
   img{
     width: 200px;
     border: 5px solid pink;
     border-radius: 50%;
     /* 过渡写到本身上，谁做动画给谁加 */
     transition: all .5s;
   }
   img:hover{
     transform: rotate(360deg);
   }
 </style>
</head>
<body>
  <div>
    <img src="zf3.jpg" alt="">
  </div>
</body>

设置转换中心点transform-origin:x y;
x y默认转换的中心点是元素的中心点（50% 50%）
还可以给x y设置像素或者方位名词(top bottom left right center)

<style>
  div {
    position: relative;
    width: 150px;
    height: 35px;
    border: 1px solid black;
  }
  div::after{
    content: '';
    position: absolute;
    right:10px;
    top:12px;
    width: 9px;
    height: 9px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    transform: rotate(45deg);
    /* 谁做动画，就给谁加过渡 */
    transition:all .3s;
    /* 设置选择中心点 */
    transform-origin: 8px 8px;
  }
  div:hover::after{
    /* after本身有45度加上旋转180度 */
    transform:rotate(225deg);
  }
  </style>

<style>
    div{
      /* 隐藏旋转后的元素 */
      overflow: hidden;
      width: 200px;
      height: 200px;
      border: 1px solid pink;
      margin: 100px auto;
    }
    div::before{
      content: '华晨宇';
      display: block;
      width: 100%;
      height: 100%;
      background-color: pink;
      transform-origin: left bottom;
      transform:rotate(180deg);
      transition: all .4s;
    }
    div:hover::before{
      /* 鼠标经过，before复原 */
      transform:rotate(0deg);
    }
  </style>

缩放scale
transform:scale(x,y)
1.注意其中的x和y用逗号隔开
2.transform:scale(1,1) :宽和高都放大一倍，相当于没有放大
3.transform:scale(2,2):宽和高都放大2倍
4…transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
5.transform:scale(0.5,0.5):缩小
6.scale 缩放最大的优势：可以设置中心点缩放，默认以中心点缩放，而且不影响其他盒子
transform综合写法：
1.同时使用多个转换，其格式为：transform:translate() rotate() scale() 等，
2.器顺序会影响转换的效果。（先旋转会改变坐标轴方向）
3.当我们同时有位移和其他属性的时候，记得要将位移放到最前
animation

<style>
  /* 1.定义动画 move */
  @keyframes move{
    /* 开始状态 */
    0% {
      transform: translateX(0px);
    }
    /* 结束状态 */
    100% {
      transform: translateX(1000px);
    }
  }

  div{
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 2.使用动画 move */
    animation-name: move;
    /* 3.动画持续时间 */
    animation-duration: 2s;
  }
  </style>

百分比就是总的时间（这个案例是5s）的划分

@keyframes move{
    0%{
      transform:translate(0,0)
    }

    25%{
      transform: translate(1000px,0);
    }

    50%{
      transform: translate(1000px,500px);
    }
    75%{
      transform:translate(0,500px);
    }
    100%{
      transform: translate(0,0);
    }
  }
  div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 2.使用动画 move */
    animation-name: move;
    /* 3.动画持续时间 */
    animation-duration: 5s;
  }
</style>

动画常用属性:
1.animation-timing-function：规定动画的速度曲线，默认是ease;
2.animation-delay:规定动画何时开始,默认是0；
3.animation-iteration-count：规定动画被播放的次数，默认是1，还有infinite;
4.animation-direction：规定动画是否在下一周期逆向播放，默认是“normal”，
‘alternate’逆播放（就是让动画走回来，而不是直接跳回来）;
5.animation-play-state:规定动画是否正在运行或暂停，默认是“running”，还有“pause”;
6.animation-fill-mode:规定动画结束后状态，保持forwards回到起始backwords
7.animation:所有动画属性的简写属性，除了animation-play-state属性
8.animation-name和animation-duration：规定所使用的动画，和动画完成一个周期所花费的秒数；（必须的）

/* 动画结束后的状态默认的是 backwords 回到起始状态我们可以让他停留在结束状态 forwards */
animation-fill-mode: forwards;

热点图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     body {
          background-color: #333;
      }
      
      .map {
          position: relative;
          width: 747px;
          height: 616px;
          background: url(media/map.png) no-repeat;
          margin: 0 auto;
      }
      
      .city {
          position: absolute;
          top: 227px;
          right: 193px;
          color: #fff;
      }
      
      .tb {
          top: 500px;
          right: 80px;
      }
      
      .dotted {
          width: 8px;
          height: 8px;
          background-color: #09f;
          border-radius: 50%;
      }
      
      .city div[class^="pulse"] {
          /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 8px;
          height: 8px;
          box-shadow: 0 0 12px #009dfd;
          border-radius: 50%;
          animation: pulse 1.2s linear infinite;
      }
      
      .city div.pulse2 {
          animation-delay: 0.4s;
      }
      
      .city div.pulse3 {
          animation-delay: 0.8s;
      }
      
      @keyframes pulse {
          0% {}
          70% {
              /* transform: scale(5);  我们不要用scale 因为他会让 阴影变大*/
              width: 40px;
              height: 40px;
              opacity: 1;
          }
          100% {
              width: 70px;
              height: 70px;
              opacity: 0;
          }
      }
  </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

</html>

打字机效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 <style>
   div{
     overflow: hidden;
     font-size: 20px;
     width: 0;
     height: 40px;
     background-color: pink;
     white-space: nowrap;
     animation: step 4s steps(10) forwards;
   }
   @keyframes step{
     0%{
       width:0
     }
     100%{
       width: 200px;
     }
   }
 </style>
</head>
<body>
  <div>郑家豪是谁的大撒比？</div>
</body>
</html>

小熊奔跑

 <style>
  body{
     background-color:  #ccc;
     position: relative;
   }
   div{
     position: absolute;
     width: 200px;
     height: 100px;
     background: url(bear.png) no-repeat;
     
     /* 背景图有8个小熊，所以分8步  多个动画以逗号分隔 */
     animation: run .8s steps(8) infinite forwards, yidong 2s linear forwards;
   }
   @keyframes run{
     0%{
       background-position: 0 0;
     }
     100%{
       background-position: -1600px 0;
     }
   }
   @keyframes yidong{
     0%{
       margin-left: 0;
     }
     100%{
       /* 移动到中间 父容器50%*/
       margin-left: 50%;
       /* 往回移动多出来的自身宽度50% */
       transform: translateX(-50%);
     }
   }
  </style>

x轴往右是正
y轴往下是正，z轴往屏幕外面是正值，往里面是负值
fixed:固定定位
absolute:绝对定位
区别很简单：
1、没有滚动条的情况下没有差异
2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动
常用场合：
1.fixed常用于网站边缘的公司联系方式和快速回到顶部
2.absolute常用于页面

Jookerone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html + css

chrome浏览器是video的自动播放：autoplay=“autoplay” muted=“muted”input::placeholder{color:pink;}autofocusautocomplete=“off” 关闭提交后，再次填写表单时自动显示内容type=file multiple类选择器、属性选择器、伪类选择器，权重为10 ul li:nth-child(-n+3){ background-color: pink; }n从0递增，-n+3从3递减.
复制链接

扫一扫

专栏目录