如发现博文存在问题，可以随时滴滴我

CSS3的复习笔记

目录

第一篇、用户交互伪类选择器的用法

第二篇、元素状态选择器

第三篇、结构伪类选择器的用法

第四篇、CSS伪元素的用法

第五篇、border-radius画圆

 第六篇、画三角形和对话框

第七篇、画菱形和平行四边形

第八篇、画五角星和六角形

第九篇、CSS画五边形和六边形

第十篇、挑战心形和蛋形

 第十一篇、太极图的画法

 第十二篇、透明背景的实现

第十三篇、CSS的颜色模式

第十四篇、CSS3线性渐变

第十五篇、CSS3的径向渐变

第十六篇、CSS3的重复性渐变

第十七篇、CSS3盒子阴影效果

第十八篇、CSS3制作缓慢边长的方形

第十九篇、CSS3的transition-timing-function详解

第二十篇、制作天猫首页的类别展示效果

第二十一篇、仿天猫类别过渡效果

第二十二篇、CSS3动画中的@keyframes关键帧

第二十三篇、CSS3动画animation复合属性

第二十四篇、利用CSS3制作Loading加载动画

第二十五篇、Loading动画效果实例2

第二十六篇、CSS3制作发光字、立体字、苹果字体

 第二十七篇、CSS3用text-overflow解决文字排版问题

第二十八篇、CSS3新的字体单位rem

第一篇、用户交互伪类选择器的用法

:hover   鼠标移入

:link       没有交互

:visited  访问过

:active    鼠标按下不放

  1. <a href="">Pesudo classes</a>
  2. <a href="">Pesudo classes</a>
  3. <a href="">Pesudo classes</a>
  4. <a href="">Pesudo classes</a>
  1. a:link{color:#ccc}
  2. a:hover{color:#f00}
  3. a:visited{color:#0f0}
  4. a:active{color:#00f}

 鼠标移入图片放大

  1. <div class="demo">
  2.     <img class="demo-img" src="./01.jpg">
  3. </div>
  1. .demo-img{
  2.     width:100px;
  3.     height:100px;
  4.     border-radius:50%;    /*设置圆角为50%,当宽高一致时,img呈圆形*/
  5.     transition: all .5s;    /*设置动画过渡时间为0.5秒*/
  6. }
  7. .demo-img:hover{
  8.     transform:scal(1.1);    /*图片放大1.1倍*/
  9. }

第二篇、元素状态选择器

:enabled      input标签可输入

:disabled     input标签不可输入

  1. <input type="text" value="可输入">
  2. <input type="text" disabled value="禁止输入">
  1. input:enabled{background-color:#f00}
  2. input:disabled{background-color:#ff0}

第三篇、结构伪类选择器的用法

:first-child    选择某个元素的第一个子元素

:last-child    选择某个元素的最后一个子元素

:nth-child()    选择某个元素的一个或多个特定的子元素

:nth-last-child()    选择某个元素的一个或多个特定的子元素,从这个元素的最后一个元素开始算,倒着数

:nth-of-type()    选择指定的元素(与:nth-child()区别在于这个有标签的限制)

:nth-last-of-type()   选择指定的元素,从这个元素的最后一个元素开始算,倒着数

:first-of-type    选择一个上级元素下的第一个同类子元素

:last-of-type    选择一个上级元素下的最后一个同类子元素

:only-child    匹配到的元素是他父级元素的唯一一个子元素

:only-of-type     匹配到的元素是他父级元素的唯一一个相同类型的子元素

:empty    匹配到的是里面没有任何内容的元素

  1. <div class="demo">
  2.     <ul>
  3.         <li><a href="">0</a></li>
  4.         <li><a href="">1</a></li>
  5.         <li><a href="">2</a></li>
  6.         <li><a href="">3</a></li>
  7.         <li><a href="">4</a></li>
  8.         <li><a href="">5</a></li>
  9.         <li><a href="">6</a></li>
  10.         <li><a href="">7</a></li>
  11.     </ul>
  12. </div>
  1. .demo li:first-child{background-color:#f00}  /*第一个子元素 1变为红色*/
  2.  
  3. .demo li:last-child{background-color:#0f0}  /*最后一个子元素 7变为绿色*/
  4.  
  5. .demo li:nth-child(5){background-color:pink}  /*第五个li 5变为粉色*/
  6. .demo li:nth-child(2n){background-color:#ff0}  /*第偶数li 变为黄色*/
  7. .demo li:nth-child(2n+1){background-color:hotpink}  /*第奇数li 变为骚粉色*/
  8. .demo li:nth-child(n+5){background-color:skyblue}  /*从第五个li开始,后面的都变为天蓝色*/
  9. .demo li:nth-child(4n+1){background-color:skyblue}  /*每隔三个li,变一个li为天蓝色*/
  10.  
  11. .demo li:nth-last-child(5){background-color:pink}  /*倒数第五个li 3变为粉色*/
  12. ...同上
  13.  
  14. .demo li:nth-of-type(5){background-color:pink} /*第五个li 5变为粉色*/
  15. /*nth-of-type() 和 nth-child() 区别在于 前者只能匹配限定元素(li) 而后者是匹配所有的子元素*/
  16.  
  17. .demo li:nth-last-of-type(5){background-color:pink} /*倒数第五个li 3变为粉色*/
  18. ...同上
  19.  
  20. .demo li:first-of-type{background-color:#f00}  /*第一个li元素 1变为红色*/
  21. /*凡是有type的,都是限制元素的*/
  22.  
  23. .demo li:last-of-type{background-color:#f00}  /*最后一个li元素 7变为红色*/
  24. /*凡是有type的,都是限制元素的*/
  25.  
  26. .demo li:only-child{background-color:#f00}  /*父级元素下如果只有一个子元素,则该元素变为红色*/
  27.  
  28. .demo li:only-of-type{background-color:#f00} /*父级元素下如果只有一个li元素,则该li变为红色*/
  29.  
  30. .demo li:empty{background-color:#f00}  /*匹配到该父级元素下的所有没有内容的li元素*/

第四篇、CSS伪元素的用法

:first-letter    将特殊的样式添加到文本的首字母

:first-line    将特殊的样式添加到文本的首行

:before    在某元素之前插入某些内容

:after    在某元素之后插入某些内容

 首字下沉效果

  1. <div class="demo">
  2.     伪元素CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。伪元素CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。伪元素CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。伪元素CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。伪元素CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。
  3. </div>
  1. .demo::first-letter{
  2.     font-size:40px;
  3.     font-weight:bold;
  4.     float:left;
  5.     color:#f00;
  6. }

 

  1. /*首行设置颜色*/
  2. .demo::first-line{color:#0f0}

  1. /*使用:befor和:after添加图片,必须有content属性*/
  2. .demo::before{
  3.     content:url(./01.jpg);
  4.     display:block;
  5. }
  6. .demo::after{
  7.     content:'';
  8.     display:block;
  9. }

第五篇、border-radius画圆

<div class="demo"></div>
  1. .demo{
  2.     width:300px;
  3.     height:300px;
  4.     border:1px solid #ccc;
  5.     background-color:#f66;
  6.     border-radius:50%;    /*画圆必须先是正方形*/
  7. }
  8.  
  9. /*
  10. border-radius: 左上角  右上角  右下角  左下角
  12. border-radius: X轴 / Y轴  (详情请看第十篇蛋形)
  14. border-top-left-radius  左上角
  15. border-top-right-radius  右上角
  16. border-bottom-right-radius  右下角
  17. border-bottom-left-radius  左下角
  19. border-top-left-radius : X轴  Y轴
  20. border-top-left-radius ：只写一个轴,指的是X轴Y轴一致
  22. */
  23.  
  24. /*画半圆*/
  25. .demo{
  26.     width: 100px;
  27.     height: 200px;
  28.     margin: 50px auto;
  29.     border: 1px solid #ccc;
  30.     background: #f66;
  31.     border-radius: 100px 0 0 100px;
  32. }

 第六篇、画三角形和对话框

自己先动手实现一遍

<div class="demo">Hello Every! I'm Hamy,Nice to meeting!</div>
  1. .demo{
  2.      width: 300px;
  3.      background: #0f0;
  4.      border-radius: 10px;
  5.      margin: 50px auto;
  6.      padding: 10px;
  7.      position: relative;
  8. }
  9. .demo::before{
  10.      content: '';
  11.      position: absolute;
  12.      left: -10px;
  13.      top: 50%;
  14.      margin-top: -5px;
  15.      border-top: 10px solid #0f0;
  16.      border-right: 10px solid #0f0;
  17.      border-bottom: 10px solid transparent;
  18.      border-left: 10px solid transparent;
  19. }

 跟着JSPang一起写

html都一样,这里只写CSS,只是修改了三角形角的方向

  1. .demo{
  2.      width: 300px;
  3.      background: #0f0;
  4.      border-radius: 10px;
  5.      margin: 50px auto;
  6.      padding: 10px;
  7.      position: relative;
  8. }
  9. .demo::before{
  10.      content: '';
  11.      position: absolute;
  12.      left: -10px;
  13.      top: 50%;
  14.      margin-top: -10px;
  15.      border-top: 10px solid transparent;
  16.      border-right: 10px solid #0f0;
  17.      border-bottom: 10px solid transparent;
  18.      border-left: 0px solid transparent;
  19. }

  如果不知道三角形怎么画,可以参考如下代码

<div class="sj"></div>
  1. .sj{
  2.     width: 0px;
  3.     height: 0px;
  4.     border-top: 50px solid #ccc;
  5.     border-right: 50px solid #0f0;
  6.     border-bottom: 50px solid #f00;
  7.     border-left: 50px solid #00f;
  8. }

 

第七篇、画菱形和平行四边形

 画菱形思路其实是画一个正方形,将其旋转45度

画平行四边形其实是画一个长方形,将其X轴和Y轴进行角度变形

 transform ：rotate(角度)    旋转

                     skew(角度)    倾斜

                     translate(像素)  偏移

                     scale(1.1)       缩放1.1倍

  1. <!--菱形-->
  2. <div class="diamond"></div>
  3.  
  4. <!--平行四边形-->
  5. <div class="parallel"></div>
  1. /*菱形*/
  2. .diamond{
  3.     width: 100px;
  4.     height: 100px;
  5.     background: #0f0;
  6.     margin: 200px auto;
  7.     transform:rotate(45deg);
  8. }
  9.  
  10. /*平行四边形*/
  11. .parallel{
  12.     width: 200px;
  13.     height: 100px;
  14.     background: #0f0;
  15.     margin: 100px auto;
  16.     transform: skew(0deg,10deg)
  17. }

 

第八篇、画五角星和六角形

首先画图之前先将图形拆解

 五角星的拆解图如下:

<div class="star"></div>
  1. .star{
  2.     width: 0px;
  3.     height: 0px;
  4.     border-bottom: 70px solid red;
  5.     border-left: 100px solid transparent;
  6.     border-right: 100px solid transparent;
  7.     margin: 150px auto;
  8.     transform: rotate(35deg);
  9.     position: relative;
  10. }
  11. .star::before{
  12.     content:'';
  13.     width: 0px;
  14.     height: 0px;
  15.     border-bottom: 80px solid red;
  16.     border-left: 30px solid transparent;
  17.     border-right: 30px solid transparent;
  18.     transform: rotate(-35deg);
  19.     position: absolute;
  20.     top: -45px;
  21.     left: -65px;
  22. }
  23. .star::after{
  24.     content: '';
  25.     border-bottom:70px solid red;
  26.     border-left:100px solid transparent;
  27.     border-right:100px solid transparent;
  28.     transform: rotate(-70deg);
  29.     position: absolute;
  30.     top: 3px;
  31.     left: -105px;
  32. }

效果如图:

六角星的拆解图如下: 

<div class="star-6"></div>
  1. .star-6{
  2.     width: 0px;
  3.     height: 0px;
  4.     border-bottom: 100px solid red;
  5.     border-left: 60px solid transparent;
  6.     border-right: 60px solid transparent;   
  7.     position: relative;         
  8. }
  9. .star-6::before{
  10.     content: '';
  11.     width: 0px;
  12.     height: 0px;
  13.     border-top: 100px solid red;
  14.     border-left: 60px solid transparent;
  15.     border-right: 60px solid transparent; 
  16.     position: absolute;
  17.     top: 30px;
  18.     left: -60px;
  19. }

 

第九篇、CSS画五边形和六边形

首先分解五边形

<div class="side-5"></div>
  1. /*三角形*/
  2. .side-5{
  3.    width: 54px;
  4.    border-top: 50px solid #f00;
  5.    border-left: 18px solid transparent;
  6.    border-right: 18px solid transparent;
  7.    position: relative;
  8.    margin: 100px auto;
  9. }
  10. /*梯形*/
  11. .side-5::after{
  12.    content: '';
  13.    position: absolute;
  14.    width: 0px;
  15.    height: 0px;
  16.    border-bottom: 35px solid #f00;
  17.    border-left: 45px solid transparent;
  18.    border-right: 45px solid transparent;
  19.    top: -85px;
  20.    left: -18px;
  21. }

 分解六边形

<div class="side-6"></div>
  1. /*长方形*/
  2. .side-6{
  3.     width: 100px;
  4.     height: 55px;
  5.     background-color:red;
  6.     margin: 100px auto;
  7.     position: relative;
  8. }
  9. /*上三角形*/
  10. .side-6::before{
  11.     content: '';
  12.     width: 0px;
  13.     height: 0px;
  14.     border-bottom: 25px solid red;
  15.     border-left: 50px solid transparent;
  16.     border-right: 50px solid transparent;
  17.     position: absolute;
  18.     top: -25px;
  19. }
  20. /*下三角形*/
  21. .side-6::after{
  22.     content: '';
  23.     width: 0px;
  24.     height: 0px;
  25.     border-top: 25px solid red;
  26.     border-left: 50px solid transparent;
  27.     border-right: 50px solid transparent;
  28.     position: absolute;
  29.     bottom: -25px;
  30. }

 

第十篇、挑战心形和蛋形

心形的分解

 自己先实现

<div class="heart"></div>
  1. .heart{
  2.      width: 200px;
  3.      height: 300px;
  4.      background-color: red;
  5.      border-radius: 200px 200px 0 0;
  6.      margin: 100px auto;
  7.      transform: rotate(-45deg);
  8.      position: relative;
  9. }
  10. .heart::before{
  11.      content: '';
  12.      width: 200px;
  13.      height: 300px;
  14.      background-color: red;
  15.      border-radius: 200px 200px 0 0;
  16.      margin: 100px auto;
  17.      transform: rotate(90deg);
  18.      position: absolute;
  19.      top: -50px;
  20.      left:50px;
  21. }

 跟随JSPang实现

  1. /*占位*/
  2. .heart{
  3.     width: 100px;
  4.     height: 90px;
  5.     position: relative;
  6.     margin: 100px auto;
  7. }
  8. /*左半心*/
  9. .heart::before{
  10.     content: '';
  11.     position: absolute;
  12.     width: 50px;
  13.     height: 80px;
  14.     background-color: #f00;
  15.     border-radius: 50px 40px 0 0;
  16.     transform-origin: 0 100%;  /*旋转基点*/
  17.     transform: rotate(-45deg);
  18.     left: 50px;
  19. }
  20. /*右半心*/
  21. .heart::after{
  22.     content: '';
  23.     position: absolute;
  24.     width: 50px;
  25.     height: 80px;
  26.     background-color: #f00;
  27.     border-radius: 50px 40px 0 0;
  28.     transform-origin: 100% 100%;  /*旋转基点*/
  29.     transform: rotate(45deg);
  30.     right: 50px;
  31. }

 

蛋形的分解 

 蛋形没办法分解,这里就不展示了

<div class="egg"></div>
  1. /*
  2. * border-radius:  四个角的X轴  /   四个角的Y轴
  3. */
  4. .egg{
  5.     width: 126px;
  6.     height: 180px;
  7.     background-color: #fa3;
  8.     margin: 100px auto;
  9.     border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  10. }

 第十一篇、太极图的画法

首先依然先分解太极图

 

<div class="taiji"></div>
  1. body{
  2.     background-color: #ccc;
  3. }
  4. .taiji{
  5.     width: 150px;
  6.     height: 300px;
  7.     margin: 100px auto;
  8.     border-radius: 50%;
  9.     background-color: #fff;
  10.     border-left: 150px solid black;
  11.     position: relative;
  12. }
  13. .taiji::before{
  14.     content: '';
  15.     width: 0px;
  16.     height: 0px;
  17.     position: absolute;
  18.     padding: 25px;
  19.     border-radius: 50%;
  20.     border: 50px solid black;
  21.     background-color: white;
  22.     left: -75px;
  23.     top: 0px;
  24. }
  25. .taiji::after{
  26.     content: '';
  27.     width: 0px;
  28.     height: 0px;
  29.     position: absolute;
  30.     padding: 25px;
  31.     border-radius: 50%;
  32.     border: 50px solid white;
  33.     background-color: black;
  34.     left: -75px;
  35.     bottom: 0px;
  36. }

 第十二篇、透明背景的实现

  1. <div class="bg">
  2.      <div class="text">皆さん、こんにちは、滝沢ローラと申します。お会いすることができてとても嬉しいです。</div>
  3. </div>
  1. .bg{
  2.     width: 800px;
  3.     height: 600px;
  4.     background-image:url('./bg.jpg');
  5.     margin: 100px auto;
  6. }
  7. .text{
  8.     width: 300px;
  9.     background: #0f0;
  10.     opacity: .6;        /*透明度*/
  11.     border-radius: 10px;
  12.     margin: 50px auto;
  13.     padding: 10px;
  14.     position: relative;
  15.     right: -230px;
  16.     top: 230px;
  17.     box-shadow: 3px 3px 5px #888;        /*盒阴影*/
  18. }
  19. .text::before{
  20.     content: '';
  21.     position: absolute;
  22.     left: -10px;
  23.     top: 50%;
  24.     margin-top: -5px;
  25.     border-top: 10px solid #0f0;
  26.     border-right: 10px solid #0f0;
  27.     border-bottom: 10px solid transparent;
  28.     border-left: 10px solid transparent;
  29. }

 

第十三篇、CSS的颜色模式

RGBA(R,G,B,A)

R:红色值     正整数|百分数

G:绿色值     正整数|百分数

B:蓝色值     正整数|百分数

A:Alpha透明度    取值0-1

HSLA(H,S,L,A)

H:Hue(色调)  0(360)表示红色,120表示绿色,240表示蓝色,也可以取其他数值表示颜色,取值范围0-360

S:Saturation(饱和度)  取值0.0% - 100.0%

L:Lightness(亮度)  取值0.0% - 100.0%

A:Alpha透明度    取值0-1

Opacity和RGBA的区别在于

 父元素设置Opacity透明度,子元素会继承父元素的透明度

父元素设置RGBA透明度,子元素不会继承父元素的透明度

 实例：

  1. <div id="main">
  2.         <ul>
  3.             <li>
  4.                 <div class="img"><img src="./01.jpg"></div>
  5.                 <div class="goods_title">AMD 锐龙r5 3600/3600X盒装 搭 微星 华硕 B450 CPU主板套装Ryzen</div>
  6.                 <div class="price">￥2049</div>
  7.             </li>
  8.             <li>
  9.                 <div class="img"><img src="./01.jpg"></div>
  10.                 <div class="goods_title">AMD 锐龙r5 3600/3600X盒装 搭 微星 华硕 B450 CPU主板套装Ryzen</div>
  11.                 <div class="price">￥2049</div>
  12.             </li>
  13.         </ul>
  14.     </div>
  1. body{background-color: #ddd;}
  2. #main{margin: 100px auto;width: 800px;clear: both;}
  3. #main li{
  4.         float: left;
  5.         background-color: #fff;
  6.         list-style: none;
  7.         width: 240px;
  8.         padding: 1px;
  9.         border: 1px solid rgba(255,0,0,0);
  10.         cursor: pointer;
  11.         margin: 10px;
  12. }
  13. #main li:hover{border: 1px solid rgba(255,0,0,1);}
  14. #main li:hover .img img{opacity: .7;}
  15. .img img{width: 240px;transition:all .5s;}
  16. .goods_title{margin: 10px;color: #666;overflow: hidden;}
  17. .price{color: #f00;margin: 10px;}

第十四篇、CSS3线性渐变

background-image: linear-gradient(angle, color-stop1, color-stop2);

angle:   to top （0deg）

             to bottom  (180deg)

             to left  (270deg)

             to right  (90deg)

color-stop1:  颜色 位置

<div class="ceng"></div>
  1. .ceng{
  2.      width: 260px;
  3.      height: 200px;
  4.      border: 1px solid #000;
  5.      background-image:linear-gradient(180deg,orange 30%,green 60%,red 100%)
  6. }

 

第十五篇、CSS3的径向渐变

径向渐变有两种渐变形式,一种以圆渐变,一种以椭圆渐变

  1. <div class="ceng circle"></div>
  2. <div class="ceng ellipse"></div>
  1. .ceng{
  2.     width: 100px;
  3.     height: 100px;
  4.     border: 1px solid #000;
  5.     border-radius: 50%;
  6.     margin: 10px;
  7.     float: left;
  8. }
  9. /*从中间向外渐变*/
  10. .circle{background-image: radial-gradient(circle at center, orange,green);}
  11. .ellipse{background-image: radial-gradient(ellipse at center, orange,green);} 
  12. /*从右往左开始渐变*/
  13. .circle{background-image: radial-gradient(circle at right, orange,green);}
  14. .ellipse{background-image: radial-gradient(ellipse at right, orange,green);}
  15. /*从左往右开始渐变*/
  16. .circle{background-image: radial-gradient(circle at left, orange,green);}
  17. .ellipse{background-image: radial-gradient(ellipse at left, orange,green);}
  18. /*从上往下开始渐变*/
  19. .circle{background-image: radial-gradient(circle at top, orange,green);}
  20. .ellipse{background-image: radial-gradient(ellipse at top, orange,green);}
  21. /*从下往上开始渐变*/
  22. .circle{background-image: radial-gradient(circle at bottom, orange,green);}
  23. .ellipse{background-image: radial-gradient(ellipse at bottom, orange,green);} 
  24.  
  25. /*从左上角开始渐变*/
  26. .circle{background-image: radial-gradient(circle at top left, orange,green);}
  27. .ellipse{background-image: radial-gradient(ellipse at top left, orange,green);}
  28. /*从左下角开始渐变*/
  29. .circle{background-image: radial-gradient(circle at bottom left, orange,green);}
  30. .ellipse{background-image: radial-gradient(ellipse at bottom left, orange,green);}
  31. /*从右上角开始渐变*/
  32. .circle{background-image: radial-gradient(circle at top right, orange,green);}
  33. .ellipse{background-image: radial-gradient(ellipse at top right, orange,green);}
  34. /*从右下角开始渐变*/
  35. .circle{background-image: radial-gradient(circle at bottom right, orange,green);}
  36. .ellipse{background-image: radial-gradient(ellipse at bottom right, orange,green);}
  37.  
  38. /*从中间向外渐变,如果是正圆,前加像素代表渐变20像素,结束之后全为绿色;如果是椭圆,需要规定X轴和Y轴的像素,类似于线性渐变的色标*/
  39. .circle{background-image: radial-gradient(20px circle at center, orange,green);}
  40. .ellipse{background-image: radial-gradient(20px 30px ellipse at center, orange,green);}
  41.  
  42. /*多颜色渐变*/
  43. .circle{background-image: radial-gradient(20px circle at center, orange,green,red);}
  44. .ellipse{background-image: radial-gradient(20px 30px ellipse at center, orange,green,red);}

 

第十六篇、CSS3的重复性渐变

 重复性渐变有两个要点

        1.在渐变方法前面加上repeating

        2.在渐变的颜色后跟上色标值

  1. <!--线性渐变-->
  2. <div class="linear"></div>
  3. <!--径向渐变-->
  4. <div class="circle"></div>
  1. /*线性渐变*/
  2. .linear{
  3.      width: 300px;
  4.      height: 300px;
  5.      margin: 20px auto;
  6.      background-image: repeating-linear-gradient(red 0px,green 40px,orange 80px);
  7. }
  8. /*径向渐变*/
  9. .circle{
  10.      width: 300px;
  11.      height: 300px;
  12.      margin: 20px auto;
  13.      border-radius: 50%;
  14.      background-image:repeating-radial-gradient(red 0px,green 30px,orange 60px) ;
  15. }

 

第十七篇、CSS3盒子阴影效果

box-shadow: h-shadow  v-shadow  blur  spread  color insert

h-shadow          必须。水平阴影的位置，允许负值

v-shadow          必须。垂直阴影的位置，允许负值

blur                   可选。模糊距离

spread              可选。阴影的尺寸

color                 可选。阴影的颜色

inset                可选。将外部阴影(outset)改为内部阴影

  1. <div class="ceng rotate_left">
  2.     <img src="./bg.jpg" alt="">
  3.     <p>上海的鲜花港的郁金香，花名：Ballade Dream</p>
  4. </div>
  5. <div class="ceng rotate_right">
  6.     <img src="./01.jpg" alt="">
  7.     <p>2020年初的中国,宛如噩梦一般</p>
  8. </div>
  1. body{background-color: #e9e9e9;}
  2. .ceng{
  3.      width: 294px;
  4.      padding: 10px 10px 20px 10px;
  5.      border: 1px solid #bfbfbf;
  6.      background-color: #fff;
  7.      box-shadow: 2px 2px 3px #aaa;
  8. }
  9. .ceng img{width: 100%;}
  10. .rotate_left{
  11.      float: left;
  12.      transform: rotate(7deg)
  13. }
  14. .rotate_right{
  15.      float: left;
  16.      transform: rotate(-8deg)
  17. }

 

第十八篇、CSS3制作缓慢边长的方形

transition-property : 过渡属性(默认值为all)

transition-duration : 过度持续时间(默认值为0秒)

transition-timing-function :  过渡函数(默认值为ease函数)

transition-delay : 过渡延迟时间(默认值为0秒)

<div class="ceng"></div>
  1. .ceng{
  2.       width: 100px;
  3.       height: 100px;
  4.       background-color: pink;
  5.       cursor: pointer;
  6.       transition-duration: 2s;
  7.       transition-property: all;
  8.       transition-delay: .2s;
  9.       transition-timing-function: ease;
  10. }
  11. .ceng:hover{
  12.       width: 300px;
  13.       height: 150px;
  14.       background-color: #f00;
  15.       border-radius: 40px;
  16. }

第十九篇、CSS3的transition-timing-function详解

transition: transition-property transition-duration  transition-delay  transition-timing-function

transition-timing-function

          ease    慢--快--慢

          linear  匀速

          ease-in   慢--快

          ease-out  快--慢

          ease-in-out  慢--快--慢

          step-start   无过渡效果

          step-end    延迟过渡时间直接显示

第二十篇、制作天猫首页的类别展示效果

  1. <div class="main">
  2.     <ul>
  3.         <li>
  4.             <div class="m_title">手机馆</div>
  5.             <div class="m_content">R9s Plus 黑色版首发</div>
  6.             <div class="m_img"><img src="./02.jpg" alt="手机"></div>
  7.         </li>
  8.     </ul>
  9. </div>
  1. *{padding: 0px;margin: 0px;font-family: 'Microsoft YaHei';}
  2. .main{
  3.      margin: 10px auto;
  4.      width: 260px;
  5.      border: 1px solid #ccc;
  6.      text-align: center;
  7. }
  8. .main li{
  9.      list-style: none;
  10.      cursor: pointer;
  11. }
  12. .m_title{font-style: 20px;font-weight: bold;margin: 5px;}
  13. .m_content{color: #666;margin-bottom: 15px;}
  14. .m_img{position: relative;padding: 30px;}
  15. .m_img img{width: 100%;transform: scale(1);transition: all .5s;}
  16. .main li:hover .m_img img{
  17.       transform: scale(1.1);
  18. }
  19. .m_img::before{
  20.       content: '';
  21.       position: absolute;
  22.       width: 240px;
  23.       height: 240px;
  24.       background-color: #eee;
  25.       border-radius: 50%;
  26.       z-index: -1;
  27.       left: 10px;
  28.       top: 10px;
  29. }

第二十一篇、仿天猫类别过渡效果

  1. <div class="main">
  2.      <div class="m_title">好车特卖一口价</div>
  3.      <div class="m_content">新年 新车 开回家</div>
  4.      <div class="m_img"><img src="./02.jpg" alt="手机特卖"></div>
  5. </div>
  1. .main{
  2.      width: 260px;
  3.      height: 270px;
  4.      border: 1px solid #ccc;
  5.      margin: 50px auto;
  6.      font-family: 'Microsoft YaHei';
  7.      cursor: pointer;
  8. }
  9. .m_title{
  10.      text-align: left;
  11.      font-style: 20px;
  12.      padding: 20px 10px 10px 10px;
  13. }
  14. .m_content{
  15.      color: #11ccaa;
  16.      padding: 0px 10px 10px 10px;
  17. }
  18. .m_img{
  19.      text-align: right;
  20.      position: relative;
  21. }
  22. .m_img img{
  23.      position: absolute;
  24.      width: 180px;
  25.      top: 0px;
  26.      right: 0px;
  27.      transition: all .3s;
  28. }
  29. .main:hover img{
  30.      right: 15px;
  31. }

第二十二篇、CSS3动画中的@keyframes关键帧

@keyframes语法

          第一种: @keyframes  [动画名] {

                                   from  {  ...  }

                                   to {  ...  }

                        }

          第二种: @keyframes  [动画名] {

                                   0%  {  ...  }

                                   ...

                                   100% {  ...  }

                        }

给要添加动画的元素加上 animation属性

<div class="rect"></div>
  1. .rect{
  2.      width: 100px;
  3.      height: 100px;
  4.      background-color: red;
  5.      position: fixed;
  6.      animation: mymove 2s infinite;
  7. }
  8. @keyframes mymove{
  9.      /* from { top: 0;left: 20%;}
  10.      to { top: 0;left: 80%;} */
  11.      0% {top: 0;left: 20%;background-color: red;}
  12.      25% {top: 0;left: 80%;background-color: green;}
  13.      50% {top: 80%;left: 80%;background-color: blue;}
  14.      75% {top: 80%;left: 20%;background-color: gray;}
  15.      100% {top: 0;left: 20%;background-color: yellow;}
  16. }

第二十三篇、CSS3动画animation复合属性

结合上一篇的animation来讲解

animation : animation-name  animation-duration  animation-timing-function   animation-delay  

                    animation-iteration-count

animation-name : 定义的动画名

animation-duration :  动画持续的时间

animation-timing-function : 动画运行的形式(属性值同第十九篇transition-timing-function)

animation-delay : 动画延迟时间播放

animation-iteration-count :  动画循环播放的次数  infinite(无限循环)

animation-direction :  动画播放的方向

                                  normal  正常方向

                                  alternate 正方向执行一遍完成之后逆方向执行,如此循环

第二十四篇、利用CSS3制作Loading加载动画

  1. <div class="spinner">
  2.     <div></div>
  3.     <div></div>
  4.     <div></div>
  5.     <div></div>
  6.     <div></div>
  7. </div>
  1. .spinner{
  2.      margin: 100px auto;
  3.      width: 60px;
  4.      height: 60px;
  5.      text-align: center;
  6.      font-size: 10px;
  7. }
  8. .spinner div{
  9.      background-color: #64cf22;
  10.      height: 100%;
  11.      width: 6px;
  12.      display: inline-block;
  13.      animation: mymove 1.2s infinite ease-in-out;
  14. }
  15. .spinner div:nth-child(2){
  16.      animation-delay: -1.1s;
  17. }
  18. .spinner div:nth-child(3){
  19.      animation-delay: -1.0s;
  20. }
  21. .spinner div:nth-child(4){
  22.      animation-delay: -0.9s;
  23.  }
  24. .spinner div:nth-child(5){
  25.      animation-delay: -0.8s;
  26. }
  27. @keyframes mymove{
  28.      0%,40%,100% {transform: scaleY(0.4);}
  29.      20% {transform: scaleY(1);}
  30. }

第二十五篇、Loading动画效果实例2

  1. <div class="spinner">
  2.     <div></div>
  3.     <div></div>
  4. </div>
  1. .spinner{
  2.      width: 60px;
  3.      height: 60px;
  4.      position: relative;
  5.      margin: 100px auto;
  6. }
  7. .spinner div{
  8.      width: 100%;
  9.      height: 100%;
  10.      border-radius: 50%;
  11.      background-color: #67cf22;
  12.      opacity: .6;
  13.      position: absolute;
  14.      top: 0px;
  15.      left: 0px;
  16.      animation: mymove 2.0s infinite ease-in-out;
  17. }
  18. .spinner div:nth-child(2){
  19.      animation-delay: -1s;
  20. }
  21. @keyframes mymove{
  22.      0%,100% {transform: scale(0.0);}
  23.      50% {transform: scale(1.0);}
  24. }

第二十六篇、CSS3制作发光字、立体字、苹果字体

text-shadow :  h-shadow  v-shadow  blur  color

h-shadow : X轴的阴影位置

v-shadow : Y轴的阴影位置

blur : 阴影的模糊距离

color : 阴影的颜色

  1. <div class="font1">Panda</div>
  2. <div class="font2">APPLE STYLE</div>
  3. <div class="font3">3D TEXT EFFECT</div>
  1. body{
  2.     background-color: #666;
  3.     text-align: center;
  4.     font: bold 55px "Microsoft YaHei";
  5. }
  6. .font1{
  7.     color: #fff;
  8.     text-shadow: 0px 0px 20px red;
  9. }
  10. .font2{
  11.     color: #000;
  12.     text-shadow: 0px 1px 1px #fff;
  13. }
  14. .font3{
  15.     color: #fff;
  16.     text-shadow: 1px 1px rgba(197, 223, 238, 0.8),
  17.                  2px 2px rgba(197, 223, 238, 0.8),
  18.                  3px 3px rgba(197, 223, 238, 0.8),
  19.                  4px 4px rgba(197, 223, 238, 0.8),
  20.                  5px 5px rgba(197, 223, 238, 0.8),
  21.                  6px 6px rgba(197, 223, 238, 0.8);
  22. }

 第二十七篇、CSS3用text-overflow解决文字排版问题

text-overflow : clip | elipsis | string

clip : 剪断

ellipsis : 三个点表示

string : 使用自定义字符(很多情况都是不生效的,一般只用第二个)

  1. <div class="demo">锄禾日当午，汗滴禾下土，谁之盘中餐，粒粒皆辛苦锄禾日当午，汗滴禾下土，谁之盘中餐，粒粒皆辛苦锄禾日当午，汗滴禾下土，谁之盘中餐，粒粒皆辛苦锄禾日当午，汗滴禾下土，谁之盘中餐，粒粒皆辛苦锄禾日当午，汗滴禾下土，谁之盘中餐，粒粒皆辛苦</div>
  2. <div class="demo1">锄禾日当午，汗滴禾下土，谁之盘中餐，粒粒皆辛苦锄禾日当午，汗滴禾下土，谁之盘中餐，粒粒皆辛苦锄禾日当午，汗滴禾下土，谁之盘中餐，粒粒皆辛苦锄禾日当午，汗滴禾下土，谁之盘中餐，粒粒皆辛苦锄禾日当午，汗滴禾下土，谁之盘中餐，粒粒皆辛苦</div>
  3. <div class="demo2">锄禾日当午，汗滴禾下土，谁之盘中餐，粒粒皆辛苦锄禾日当午，汗滴禾下土，谁之盘中餐，粒粒皆辛苦锄禾日当午，汗滴禾下土，谁之盘中餐，粒粒皆辛苦锄禾日当午，汗滴禾下土，谁之盘中餐，粒粒皆辛苦锄禾日当午，汗滴禾下土，谁之盘中餐，粒粒皆辛苦</div>
  1. .demo{
  2.     margin: 30px auto;
  3.     width: 100px;
  4.     padding: 10px;
  5.     border: 1px solid #ccc;
  6.     height: 50px;
  7.     text-overflow: clip;
  8.     overflow: hidden;
  9. }
  10. .demo1{
  11.     margin: 0px auto;
  12.     width: 100px;
  13.     padding: 10px;
  14.     border: 1px solid #ccc;
  15.     height: 50px;
  16.     text-overflow: ellipsis;
  17.     overflow: hidden;
  18.     white-space: nowrap;
  19. }
  20. .demo2{
  21.     margin: 0px auto;
  22.     width: 100px;
  23.     padding: 10px;
  24.     border: 1px solid #ccc;
  25.     height: 50px;
  26.     text-overflow: 'ccc';
  27.     overflow: hidden;
  28.     white-space: nowrap;
  29. }

 

第二十八篇、CSS3新的字体单位rem

CSS的单位   px   em   rem

px : 实际的像素大小

em : 依赖于父级

rem : 依赖于html根元素

  1. <div>Hello Panda!</div>
  2. <h1>Hello Panda!</h1>
  1. html{
  2.     /* font-size: 10px; */
  3.     font-size: 62.5%; /*(10/16)*100%*/
  4. }
  5. body{
  6.     font-size: 1.4rem;
  7. }
  8. h1{
  9.    font-size: 2.4rem;
  10. }

 

posted @ 2020-02-14 11:14  webxue  阅读(396)  评论(0)  编辑  收藏  举报