css3的一些学习笔记

1.border-radius:    边框圆角

2个值分别为：左上、右下    与    右上、左下      颜色

4个值分别为：  左上   右上    右下   左下      颜色              

    （圆、椭圆等）

 2.box-shadow: 表示盒子的阴影
           第一个参数：水平方向 正数是右边==>， 负数左边 《==
           第二个参数：垂直方式
           第三个参数：模糊程度
           第四参数：颜色
           第五个是：如果加上 inset 之 后是内阴影，否则默认是外阴影

3.text-shadow ：文本阴影

   text-shadow:-1px -1px 1px #000,1px 1px 1px #fff;    (  凹凸文字的制作：   /*背景颜色，是灰色。字体的颜色也是灰色字体的左上方是灰色，右下方是白色 */)

4.选择器

      

选择器	例子	例子描述	CSS
.class	.intro	选择 class="intro" 的所有元素。	1
#id	#firstname	选择 id="firstname" 的所有元素。	1
*	*	选择所有元素。	2
element	p	选择所有 <p> 元素。	1
element,element	div,p	选择所有 <div> 元素和所有 <p> 元素。	1
element element	div p	选择 <div> 元素内部的所有 <p> 元素。	1
element>element	div>p	选择父元素为 <div> 元素的所有 <p> 元素。	2
element+element	div+p	选择紧接在 <div> 元素之后的所有 <p> 元素。	2
[attribute]	[target]	选择带有 target 属性所有元素。	2
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。	2
[attribute|=value]	[lang|=en]	选择 lang 属性值以 "en" 开头的所有元素。	2
:link	a:link	选择所有未被访问的链接。	1
:visited	a:visited	选择所有已被访问的链接。	1
:active	a:active	选择活动链接。	1
:hover	a:hover	选择鼠标指针位于其上的链接。	1
:focus	input:focus	选择获得焦点的 input 元素。	2
:first-letter	p:first-letter	选择每个 <p> 元素的首字母。	1
:first-line	p:first-line	选择每个 <p> 元素的首行。	1
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 <p> 元素。	2
:before	p:before	在每个 <p> 元素的内容之前插入内容。	2
:after	p:after	在每个 <p> 元素的内容之后插入内容。	2
:lang(language)	p:lang(it)	选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。	2
element1~element2	p~ul	选择前面有 <p> 元素的每个 <ul> 元素。	3
[attribute^=value]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个 <a> 元素。	3
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。	3
[attribute*=value]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。	3
:first-of-type	p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后 <p> 元素的每个 <p> 元素。	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。	3
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 <p> 元素。	3
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 <p> 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。	3
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 <p> 元素的每个 <p> 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。	3
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素。	3
:root	:root	选择文档的根元素。	3
:empty	p:empty	选择没有子元素的每个 <p> 元素（包括文本节点）。	3
:target	#news:target	选择当前活动的 #news 元素。	3
:enabled	input:enabled	选择每个启用的 <input> 元素。	3
:disabled	input:disabled	选择每个禁用的 <input> 元素	3
:checked	input:checked	选择每个被选中的 <input> 元素。	3
:not(selector)	:not(p)	选择非 <p> 元素的每个元素。	3
::selection	::selection	选择被用户选取的元素部分。	3

 :not()    拿到   没有指定的 类样式 的元素,   并且给它设置样式.         （   li:not('.ccc')  {color:red;}    // 除了 有类名为.ccc 的元素   其他的 文字颜色为红色）

 ::after、::before与content:''; 一起使用！！！  before 是一个行内元素(默认)    伪元素使用2个冒号         

 :first-letter 获取首个字符，给它设置样式。

 ::first-line 拿到首行字母（不管浏览器放大缩小，始终是第一行），设置样式  

 ::selection 将选择的字体  设置样式，但是不支持 font-size

 ele:nth-of-type（index） 拿到对应的指定的 类型的元素。  nth-of-type(2n+1) == nth-of-type(odd)      拿到1,3,5,7……

渐变-线性渐变linear-gradient    

.linear:nth-child(2) {
width: 1000px;
height: 100px;
margin: 100px auto;
background-color: #FFF;
background-image: linear-gradient(
135deg,
black 25%,
transparent 25%,
transparent 50%,
black 50%,
black 75%,
transparent 75%
);
/*background-repeat: no-repeat;*/
background-size: 100px 100px;
animation: move 1s linear infinite;
}
/*定义动画序列*/
@keyframes move {
from {}
to {
background-position: 100px 0;
}
}

 渐变-径向渐变radial-gradient

.radial {
width: 300px;
height: 300px;
margin: 100px auto;
/*background-image: radial-gradient(150px at center, yellow, green);*/
/*中心点的位置是以盒子自身为参照*/
/*background-image: radial-gradient(300px at left center, yellow, green);*/

/*盒子左上角为圆心点，我们可通过坐标来设置中心位置*/
background-image: radial-gradient(150px at 80px 80px, yellow, green);

/*border-radius: 150px;*/
}

-------------------------------

div{
            height:400px;
            width:400px;
            border:1px solid #000;
            margin:100px auto;
            background:radial-gradient(100px at 200px 200px,
             red 50%,
             #fff 50%
            );
        }

就是一个   有边框的div  中间有个  直径为100的 红色背景 圆 

-------------------------------------

deg 角度            
    linear-gradient（第一个参数， 第2个参数N+）
    第一个参数：方向可以用 to lef ..用单词控制方向，还可以用0-360 deg （角度）控制位置
    第二个参数：设置的百分比
    最后不需要加逗号。

div{
            width:400px;
            height:400px;
            border:1px solid #000;
            margin:100px auto;
            /*background:linear-gradient(to right, red 50% , green 100% );*/
            background:linear-gradient(120deg,
            red 0%, red 50%,
             green 50%,green 100%
            );
        }

自己copy看效果

 div{
            height:400px;
            width:400px;
            border:1px solid #000;
         margin:100px auto;
            background:linear-gradient(to right,
             green 50%,
            red 50%
            );
            /*background:linear-gradient(200deg,*/
               /*green 50%,*/
               /*red 50%*/
            /*);*/
        }

--------------------------------------------------------------------------

/* 过度 复合属性 */

            /*!*指定参数过度的属性*!*/             /*transition-property:margin,opacity;*/
            /*!* 过度的时长 *!*/                           /*transition-duration:1s;*/
            /*!* 等待3秒后才执行 *!*/                 /*transition-delay:3s;*/
            /*!* 动画效果 *!*/                               /*transition-timing-function:linear;*/

             transition:all 0.5s 0s linear;

过度背景色：

.transition {
width: 200px;
height: 200px;
margin: 50px auto;
background-color: green;
transition:all 1s linear;
}
/*过渡属性在A,B状态都可以，可根据自已情况来设置*/
/*过渡可以实大部分属性的过渡，但并不是全部*/
.transition:hover {
background-color: pink;
}

04 过渡-位置        .box {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50px;
left: 0px;
transition: all 3s;
}
.transition:hover .box {
left: 500px;
}

* 过渡效果 复合属性   必须要写2个数属性的值  */
            /*transition:all 1s linear;*/
            /*!* 参数过渡的属性  all 所有，也可以指定某几个属性参与动画 *!*/
            /*transition-property:all;*/
            /*!* 参与过渡动画的时长 s：秒 *!*/
            /*transition-duration:1s;*/
            /*!* 延迟时间  *!*/
            /*transition-delay:3s;*/
            /*!* 运动模式    *!*/
            /*!**/
            /*ease-in-out: 先慢后快再慢*/
            /*linear ：匀速*/
            /*ease-out：先快后慢*/
            /**!*/
            /*transition-timing-function:linear;*
/* 先参与动画的时间，在是延迟时间 */
            transition:all 3s 1s  linear;

百度log 背景一直在跑

<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.logo {
width: 270px;
height: 129px;
margin: 100px auto;
background-image: url(./baidu.png);
background-position: 0 0;
}
</style>
</head>
<body>
<div class="logo"></div>
<script>
var logo = document.querySelector('.logo');
var offset = -270;
var n = 0;
setInterval(function () {
n++;
logo.style.backgroundPosition = offset * n + 'px 0px';
if(n >=30) n = 0;
}, 100);
</script>
</body>
</html>

__________________________________________________________________________

2D

    /*transform 用来设置2D或3D转换的*/                  /*转换有几种，分别缩放(scale)、移动(translate)、旋转(rotate)、倾斜(skew)*/

 scale

   .scale:hover { transform:scale(2);}   放大2倍     

    scale（1） 不放大也缩小，就是自身大小
    在 transform：scale 缩放
    scaleX：变宽，scaleY变高
     transform:translate(100%) 就是等于自身的宽度，还是在括号里写带有 px的值。
     translate 默认是移动X方向，如果垂直移动使用 translateY
  

translate

     /*理解2D坐标 Y轴正方向向下，X轴正方向右*/          /*发生位移的时候是相对于它原来的位置*/

       .translate:hover .box { 
// transform: translate(100%) ;                       //向右移动box 本身width距离
transform: translate(100px,150px);            向下移动150px,向右移动100px
}

rotate 

.rotate {
width: 200px;
height: 200px;
margin: 60px auto;
background-color: green;
transition: all 5s;
}
.rotate:hover {
transform: rotate(360deg);
}

集合使用    （旋风车）

<style>
.box {
width: 400px;
height: 400px;
margin: 50px auto;
transition: all 1s;
}
img {width: 100%;}
body:hover .box {
transform: translate(400px, 0) rotate(720deg) scale(.5);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/dfc.gif" alt="">
</div>
</body>
</html>

-------------------------------------------------------------------

水平垂直 居中

div{
            height:200px;
            width:200px;
            border:1px solid #000;
            position:absolute;
            top:50%;
            left:50%;
             /* 移动自身的一般的的位置，也就是 200的一般 100 */
            transform:translate(-50%,-50%);
        }

----------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>疯狂的按键</title>
        <style>
/*基本样式*/
body, ul {
margin: 0;
padding: 0;
}


ul, li {
list-style: none;
}


h1 {
background: #eee;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 20px;
margin: 60px 0;
}


h1:nth-child(1) {
margin-top: 20px;
}


ul {
width: 85%;
margin: 0 auto;
height: 150px;
}


li {
width: auto;
height: auto;
float: left;
margin-right: 50px;
}


ul li:last-child {
margin-right: 0;
}


/*设置过渡效果*/
.share1 img,.share2 img{
transition: all 0.8s ease-in-out;
}


/*设置变形*/
.share1 img:hover {
transform: rotate(360deg) scale(1.5);
}


.share2 img:hover {
transform: rotate(-360deg) scale(0.7);
}
        </style>
    </head>
    <body>
    <h1>顺时针旋转360°放大1.2倍</h1>
    <ul class="share1">
    <li><a href="#"><img src="images/share1.png" alt=""></a></li>
    <li><a href="#"><img src="images/share2.png" alt=""></a></li>
    <li><a href="#"><img src="images/share3.png" alt=""></a></li>
    <li><a href="#"><img src="images/share4.png" alt=""></a></li>
    <li><a href="#"><img src="images/share5.png" alt=""></a></li>
    <li><a href="#"><img src="images/share6.png" alt=""></a></li>
    </ul>
    <h1>逆时针旋转360°缩小0.7倍</h1>
    <ul class="share2">
    <li><a href="#"><img src="images/share7.png" alt=""></a></li>
    <li><a href="#"><img src="images/share8.png" alt=""></a></li>
    <li><a href="#"><img src="images/share9.png" alt=""></a></li>
    <li><a href="#"><img src="images/share10.png" alt=""></a></li>
    <li><a href="#"><img src="images/share11.png" alt=""></a></li>
    <li><a href="#"><img src="images/share12.png" alt=""></a></li>
    </ul>
    </body>
</html>

--------------------------------------------3D转换------------------------------------------------------------------------------------------------

 在 要 元素上 加  ：perspective: 1000px;            在：hover样式中  transform：xxx

   transform: translateZ(-1000px);       向 z 轴 里面移动 1000px

   08 3D转换-透视transform-style          

  在父盒子给：          transform-style: preserve-3d;
                                    -moz-transform-style: preserve-3d;

-------------------------------3D转换立方体不停旋转--------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 3D转换</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}


.box {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 24px;
margin: 100px auto;
position: relative;
transform: rotateY(30deg) rotateX(-30deg);
transform-style: preserve-3d;
animation: rotate 8s linear infinite;
}


.front, .back, .left, .right, .top, .bottom {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
/*opacity: 0.5;*/
}


.front {
background-color: pink;
transform: rotateY(0) translateZ(100px);
}


.back {
background-color: blue;
transform:  translateZ(-100px);
}


.left {
background-color: green;
transform:  rotateY(90deg) translateZ(-100px);
}
.right {
background-color: yellow;
transform: rotateY(90deg) translateZ(100px);
}
.top {
background-color: red;
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
background-color: orange;
transform:  rotateX(90deg) translateZ(-100px);
}
@keyframes rotate {
from {
transform: rotateX(0) rotateY(360deg);
}
to {
transform: rotateX(360deg) rotateY(0);
}
}
</style>
</head>
<body>
<div class="box">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>

-------------------------------------代码画出Android机器人---------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
padding: 0;
margin: 0;
background-color: #F7F7F7;
}


.android {
width: 600px;
height: 400px;
margin: 100px auto;
background-color: #FFF;
overflow: hidden;


position: relative;
}


.head {
width: 220px;
height: 100px;
margin: 10px auto;
border-radius: 100px 100px 0 0;
background-color: #a4ca39;
position: relative;
}


.head::after,
.head::before {
content: '';
display: block;
position: absolute;
top: 40px;
width: 20px;
height: 20px;
background-color: #FFF;
border-radius: 50%;
}

.head::after {
left: 50px;
}


.head::before {
right: 50px;
}


.body {
width: 220px;
height: 180px;
margin: 0 auto;
border-radius: 0 0 30px 30px;
background-color: #a4ca39;
position: relative;
}


.body::before,
.body::after {
content: '';
display: block;
position: absolute;
bottom: -80px;
width: 50px;
height: 80px;
border-radius: 0 0 25px 25px;
background-color: #a4ca39;
}


.body::before {
left: 40px;
}


.body::after {
right: 40px;
}


.arms {
width: 340px;
height: 150px;
position: absolute;
top: 120px;
left: 50%;
margin-left: -170px;
}


.arms::after,
.arms::before {
content: '';
display: block;
position: absolute;
width: 50px;
height: 150px;
border-radius: 25px;
background-color: #a4ca39;
}


.arms::after {
right: 0;
}
</style>
</head>
<body>
<!--  -->
<div class="android">
<div class="head"></div>
<div class="body"></div>
<div class="arms"></div>
</div>
</body>
</html>

-------------------------------------------------------------------------------------------------

box-sizing: border-box;   边框不占宽高

总结：

1、 选择器 属性选择器 语法 [] 查找条件是以“属性”做为查找条件，并且我们还可以
通过属性值来查找 [^=] [$=] [*=] [=] [attr]


伪类选择器 语法 : E:first-child :last-child :nth-child(n) 
dl
dt
dd 
dd:nth-child(1)


n 可以是一个表达式 y = an + b, n 的取值n=0, 1, 2 ...


伪元素选择器 语法 :: 


E::before E::after 必须要指定一个 content: '' 新添加的无素是一个行内元素
根据自已需要 display


:before :after 尽量使用 :after :before


2、 文字阴影 text-shadow: 2px 2px 5px red; 


3、 边框 
边框圆角 border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
简写方式
border-radius: 10px 10px 10px 10px; 水平半径和垂直半径相等
border-radius: 10px;
border-radius: 10px 20px;  对角线
border-radius: 10px 20px 30px; 


边框阴影
box-shadow: 2px 2px 5px blue;
box-shadow: inset 2px 2px 5px blue; 内阴影
box-shadow: 2px 2px 5px blue, 2px 2px 8px pink;


边框图片
border-image-source: url();
border-image-slice: 27 27 27 27; 
border-image-repeat: round stretch repeat;
border-image-width: 30px;


4、 盒模型


盒子大小 = content + padding + border


CSS3可以改变这种计算方式


当设置box-sizing: border-box;
盒子大小 = width (CSS里设置的width)


当设置 box-sizing: content-box;
盒子大小 = content + padding + border

animation  

                            /*复合属性写法*/
/*animation: move 2s;*/

/*指定动画序名的名称*/                   animation-name: move;

/*设置动画的执行时间*/                    animation-duration: 2s;

/*设置动画播放的次数*/                   animation-iteration-count: infinite;

/*设置动画播放完成后的状态*/        animation-fill-mode: forwards;

/*设置动逆向播放*/                           animation-direction: alternate;

  /*设置动画延时*/                            /*animation-delay: 2s;*/

  /*设置动画的播放速度*/                   animation-timing-function: ease-in;

.box:hover {
/*设置动画暂停*/
animation-play-state: paused;
}

transform 结合 transition 使用 

@keyframes  与  animation  使用

这是写给自己看的。