外间距应用、hover选择器、过渡动画、旋转

外间距应用

 外间距应用:
  用于块级标签居住
​
  要求：
  1.得是块级标签
  2.需要给块级标签设置宽度
  3.用margin外间距auto实现（水平）居中
​
​
 .box {
      width: 200px;
      height: 200px;
      background-color: brown;
​
      /* 实现盒子在浏览器水平居中 */
      /* 两个值： 上下外间距   左右外间距 */
      /* auto：浏览器会自动计算 */
      margin: 0px auto;
    }
​
​
 /* 实现水平居中，上下外间距50px */
    .box2 {
      width: 200px;
      height: 200px;
      background-color: pink;
      /* 两个值： 上下外间距   左右外间 */
      margin: 50px auto;
    }
​
<div class="box1"></div>
<div class="box2"></div>

hover选择器

当鼠标滑入或者鼠标悬停的时候，显示的样式
注意：hover伪类选择器只能用于父子（嵌套）关系或者本身滑入的时候用
兄弟关系用不了hover选择器
语法：
选择器:hover{
鼠标滑入的样式
}
滑入谁的时候显示某某样式，这个时候hover就要写在滑入谁的身上
​
​
​
/* 本身滑入 */
/* 鼠标滑入.box盒子时候，具有以下样式 */
.box:hover {
/* 字体颜色 */
color: tomato;
background-color: yellow;
}
​
​
/* 需求：滑入.wrap的时候，p标签字体大小为30px */
/* 
.wrap:hover hover伪类选择器
​
.wrap:hover p  后代选择器 */
.wrap:hover p {
font-size: 30px;
}
​
/* 需求：滑入.wrap的时候，span标签字体颜色为红色 */
.wrap:hover span {
color: tomato;
}
​
​
​
<div class="box">祝大家520节日快乐！！！</div>
<div class="wrap">
    <p>再次祝大家520节日快乐！！！</p>
    <span>span</span>
</div>

过渡动画

 过渡动画：谁的属性发生了改变，过渡动画就加在谁的身上
   语法：
 transition:过渡时间 延迟时间 ;
 过渡时间:就是背景颜色由红色变成绿色的时间  （必须要写的）
 延迟时间：等待1s之后过渡动画才开始执行  （写不写都可以）
 单位：s
​
 过渡动画一般不会写在hover中
​
 .box {
      width: 100px;
      height: 100px;
      background-color: tomato;
      /* 鼠标指针变小手 */
      cursor: pointer;
​
      /* 过渡动画 */
      /* 背景颜色由红色变成绿色需要2s */
      /* transition: 2s; */
      /* 2s之后才背景开始过渡 */
      transition: 2s 2s;
    }
​
<div class="box"></div>
​

旋转

 语法：
     transform: rotate(deg);
     单位:deg 度数
     正值：顺时针旋转
     负值：逆时针旋转
     默认旋转基点:元素的中心点
​
​
 /*   正值：顺时针旋转 */
    .box {
      transform: rotate(65deg);
    }
​
    /*  负值：逆时针旋转 */
    .box1 {
      transform: rotate(-65deg);
    }
​
    /* 滑入box2旋转90deg */
    .box2:hover {
      transform: rotate(90deg);
    }
​
    /* 滑入box3旋转-90deg */
    .box3:hover {
      transform: rotate(-90deg);
    }

制作上下半圆（任务）

  1.上下半圆
​
    高度设置宽度的一半，圆角的取值为高度的值
​
​
    上半圆：
    左上角和右上角的圆角值为高度的值 
    左下角和右下角的圆角值为0
​
    下半圆：
    左上角和右上角的圆角值为高度的值 
    左下角和右下角的圆角值为0
​
    2.左右半圆
    宽度设置高度的一半，圆角的取值为宽度的值
​
    左半圆：
     左上角和左下角的圆角值为宽度的值 
    右上角和右下角的圆角值为0
​
    右半圆：
     左上角和左下角的圆角值为宽度的值 
    右上角和右下角的圆角值为0
​
​
​
 /* 上半圆 */
    .box1 {
      /* 高度设置为宽的的一半 */
      width: 200px;
      height: 100px;
      background-color: tomato;
      border-radius: 100px 100px 0 0;
    }
​
    /* 下半圆 */
    .box2 {
      /* 高度设置为宽的的一半 */
      width: 200px;
      height: 100px;
      background-color: tomato;
      border-radius: 0 0 100px 100px;
    }
​
    /* 左半圆 */
    .box3 {
      /* 宽度设置为高度的一半 */
      width: 100px;
      height: 200px;
      background-color: tomato;
      /* 左上角  右上角 右下角  左下角 */
      border-radius: 100px 0 0 100px;
    }
​
    /* 右半圆 */
    .box4 {
      /* 宽度设置为高度的一半 */
      width: 100px;
      height: 200px;
      background-color: tomato;
      /* 左上角  右上角 右下角  左下角 */
      border-radius: 0 100px 100px 0;
    }