day05

今天学了什么

1.设置边框圆角

//css
border-radius:10px;
//html
<div>
</div>

2.给元素加阴影

//css
<style>
 p{
   text-shadow: 10px 10px 8px red;
 }
</style>
//html
 <p>hello world</p>

阴影特效.png

3.显示文本溢出内容

//css
 <style>
        p{
          text-overflow: ellipsis;
          overflow: hidden;   
        }
    </style>
//html
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime maiores, nam quas amet alias, dignissimos consectetur magni dolores ex repellendus doloremque! Obcaecati dolores architecto quae impedit natus? Sed, voluptate placeat.</p>

文本溢出.png

3.1文本溢出加省略号

//css
<style>
        p{
          /* 已省略号结尾 */
          text-overflow: ellipsis;
          overflow: hidden;  
          /* 是否换行 */
          white-space: nowrap;
        }
    </style>
//html
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime maiores, nam quas amet alias, dignissimos consectetur magni dolores ex repellendus doloremque! Obcaecati dolores architecto quae impedit natus? Sed, voluptate placeat.</p>

溢出部分加省略号.png

4.CSS 2D转换

4.1.旋转 transform: rotate(度数);

transform: rotate(30deg);
该元素移动的位置，取决于宽度（X轴）和高（Y)

4.2.位移translate(x,y)

x横坐标方向移动的距离,y纵坐标方向移动的距离
transform: translate(50px,50px);

4.3.缩放scaleX 水平缩放

scaleY 垂直缩放
scale（x,y）
transform: scaleY(0.5);

4.4.倾斜

ransform: skewY(10deg);

//css
    <style>
        div{
         width: 100px;
         height: 100px;
         background: red;
        }
        div{ 
            transform: skewY(10deg);
        }
    </style>
//html
  <div>
    </div>

倾斜.png

4.5垂直水平居中

//css
  <style>
        .parent{
            width: 200px;
            height: 200px;
            background: red;
            position: relative;
        }
        .child{
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
//html
  <div class="parent">
        <div class="child">
        </div>
    </div>

垂直水平居中.png

5.过渡

改变宽度时长1s

//css
    <style>
        div{
          width: 100px;
          height: 100px;  
          background: red;
          transition: width 1s;
        }
        div:hover{
            width:200px;
        }
</style>
//html
 <div>
</div> 

6.animation动画

1秒钟变化五次

 <style>
        div{
            width: 100px;
            height: 100px;
            background:red;
            animation: myAnimate 2s;
        }
        @keyframes myAnimate{
            0%{
                width: 100px;
                height: 100px;
            }
            20%{
                width: 200px;
                height: 200px;
                background: yellow;
            }
            50%{
                width: 300px;
                height: 200px;
                background: pink; 
            }
           100%{
                width: 100px;
                height: 100px;
                background: red; 
            }
        }
    </style>
//html
<div>
</div>

6.1外部导入动画

https://daneden.github.io/animate.css/

//css
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
//html
 <p class="animated  tada">hello world</p>