首页 > 代码库 > CSS3学习手记

CSS3学习手记

--------------------CSS3新增选择器--------------------
#E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素
#E:nth-last-child(n):匹配元素类型为E且是父元素的倒数第n个子元素(与上一项顺序相反)
#E:first-child:匹配元素类型为E且是父元素的第一个子元素
#E:last-child:匹配元素类型为E且是父元素的最后一个子元素
#E:only-child:匹配元素类型为E且是父元素中唯一的子元素
#E:nth-of-type(n):匹配父元素的第n个类型为E的子元素
#E:nth-last-of-type(n):匹配父元素的倒数第n个类型为E的子元素(与上一项顺序相反)
#E:first-of-type:匹配父元素的第一个类型为E的子元素
#E:last-of-type:匹配父元素的最后一个类型为E的子元素
#E:only-of-type:匹配父元素中唯一子元素是E的子元素
#E:empty 选择一个空的元素
#E:enabled 可用的表单控件
#E:disabled 失效的表单控件
#E:checked 选中的checkbox
#E:not(s) 不包含某元素
#E:target 对应锚点的样式
#E > F E元素下面第一层子集
#E ~ F E元素后面的兄弟元素
#E + F 紧挨着的兄弟元素
#属性选择器:
  1、E[data-attr] 含有data-attr属性的元素
  2、E[data-attr=‘ok‘] 含有data-attr属性的元素且它的值为“ok”
  3、E[data-attr^=‘ok‘] 含有data-attr属性的元素且它的值的开头含有“ok”
  4、E[data-attr$=‘ok‘] 含有data-attr属性的元素且它的值的结尾含有“ok”
  5、E[data-attr*=‘ok‘] 含有data-attr属性的元素且它的值中含有“ok”


--------------------CSS3圆角、阴影、rgba--------------------
#CSS3圆角:
  1、设置某一个角的圆角,比如设置左上角的圆角: border-top-left-radius:30px 60px;

  2、同时分别设置四个角: border-radius:30px 60px 120px 150px;

  3、设置四个圆角相同: border-radius:50%;

#CSS3阴影:
box-shadow:h-shadow v-shadow blur spread color inset;分别设置阴影:水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

#rgba(新的颜色值表示法):
1、盒子透明度表示法:opacity:0.1;filter:alpha(opacity=10)(兼容IE);
2、rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度

 

代码示例:

技术分享
 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>圆角的练习</title> 6      7     <style type="text/css"> 8         .box{ 9             width: 200px;10             height: 300px;11             background-color: rgba(0,0,0,0.5);/*red green blue 透明度*/12             margin:50px auto 0px;13             text-align: center;14             line-height: 300px;15 16             /*左上角,圆角17             border-top-left-radius: 30px;18 19             上左、上右、下右、下左20             border-radius:30px 30px 20px 50px;*/21 22             border-radius: 50%;/*圆角设置*/23             box-shadow: 10px 10px 5px 2px #ddd;/*阴影设置*/24         }25 26         /*内部阴影设置*/27         .box2{28             width:300px;29             height:50px;30             background-color: #f80;31             box-shadow: 0px 0px 20px 5px red inset;32             margin: 50px auto 0px;33         }34     </style>35 36 </head>37 <body>38     <div class="box">39         圆角、阴影、rbga测试40     </div>41     <div class="box2">42         43     </div>44 </body>45 </html>
CSS3圆角、阴影、rgba练习

 

--------------------CSS3 transition动画--------------------
#transition-property 设置过渡的属性,比如:width height background-color
#transition-duration 设置过渡的时间,比如:1s 500ms
#transition-timing-function 设置过渡的运动方式
1、linear:匀速
2、ease:开始和结束时慢速
3、ease-in:开始时慢速
4、ease-out:结束时慢速
5、ease-in-out:开始和结束时慢速
6、cubic-bezier(n,n,n,n):
比如:cubic-bezier(0.845, -0.375, 0.215, 1.335)
曲线设置网站:https://matthewlein.com/ceaser/
#transition-delay 设置动画的延迟
#transition: property duration timing-function delay 同时设置四个属性

 

代码示例:

技术分享
 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>css对应transition动画练习</title> 6  7     <style type="text/css"> 8         .box{ 9             width: 200px;10             height: 100px;11             background-color: gold;12             margin: 2px 0 0 5px;13                                     14             /*15             transition-property: all;16             transition-duration: 1s;17             transition-timing-function: ease;*/18             19             transition:width 1s ease ,height 1s ease 1s,background-color 1s ease 2s;20 21         }22 23         .box:hover{24             width: 500px;25             height: 500px;26             background-color: red;27             margin: 2px 0 0 5px;28         }29     </style>30 </head>31 <body>32     <div class="box">33         34     </div>35 </body>36 </html>
CSS3对应transition动画练习

 

--------------------CSS3 transform变换--------------------
#translate(x,y) 设置盒子位移
#scale(x,y) 设置盒子缩放
#rotate(deg) 设置盒子旋转
#skew(x-angle,y-angle) 设置盒子斜切
#perspective 设置透视距离
#transform-style flat | preserve-3d 设置盒子是否按3d空间显示
#translateX、translateY、translateZ 设置三维移动
#rotateX、rotateY、rotateZ 设置三维旋转
#scaleX、scaleY、scaleZ 设置三维缩放
#tranform-origin 设置变形的中心点
#backface-visibility 设置盒子背面是否可见

 

代码示例:

技术分享
 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>transform练习 实现翻面效果</title> 6     <style type="text/css"> 7         .box{ 8             width: 200px; 9             height: 300px;10             position: relative;11             margin: 50px auto 0;12             transform-style: preserve-3d;13             border: 1px solid #ddd;14         }15 16         .box div{17             width: 200px;18             height: 300px;19             position: absolute;20             top: 0;21             left: 0;22         }23 24         .font{25             width: 200px;26             height: 300px;27             position: absolute;28             transform: perspective(800px) rotateY(-180deg);29             backface-visibility: hidden;30             transition: all 500ms ease;31         }32 33         .back{34             widows: 200px;35             height: 300px;36             position: absolute;37             text-align: center;38             line-height: 300px;39             transform: perspective(800px) rotateY(0deg);40             transition: all 500ms ease;41         }42 43         .box:hover .font{44             transform: perspective(800px) rotateY(0deg);45         }46 47         .box:hover .back{48             transform: perspective(800px) rotateY(180deg);49         }50     </style>51 </head>52 <body>53     <div class="box">54         <div class="font"><img src="../banner01.jpg"></div>55         <div class="back">显示文字</div>56     </div>57 </body>58 </html>
CSS3transform练习 实现翻面效果

 

--------------------CSS3 animation动画--------------------
#@keyframes 定义关键帧动画
#animation-name 动画名称
#animation-duration 动画时间
#animation-timing-function 动画曲线
1、linear 匀速
2、ease 开始和结束慢速
3、ease-in 开始是慢速
4、ease-out 结束时慢速
5、ease-in-out 开始和结束时慢速
6、steps 动画步数
#animation-delay 动画延迟
#animation-iteration-count 动画播放次数 n|infinite
#animation-direction
1、normal 默认动画结束不返回
2、Alternate 动画结束后返回
#animation-play-state 动画状态
1、paused 停止
2、running 运动
#animation-fill-mode 动画前后的状态
1、none 不改变默认行为
2、forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)
3、backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)
4、both 向前和向后填充模式都被应用
#animation:name duration timing-function delay iteration-count direction;同时设置多个属性

 

代码示例:

技术分享
 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>人物走路动画</title> 6      7     <style type="text/css"> 8         @keyframes walking{ 9             from{10                 left:0px;11             }12             to{13                 left: -960px14             }15         }16 17         .box{18             width: 120px;19             height: 180px;20             border:1px solid #ccc;21             margin: 50px auto 0px;22             position: relative;23             overflow: hidden;24         }25 26         .box img{27             display: block;28             width: 960px;29             height: 182px;30             position: absolute;31             left: 0;32             right: 0;33             animation:walking 1.0s steps(8) infinite; 34         }35     </style>36     37 38 </head>39 <body>40     <div class="box">41         <img src="walking.png">42     </div>43 </body>44 </html>
人物走路动画

 

CSS3学习手记