前端程序员用CSS3写出这个口袋妖怪系列的特效，瞬间勾起那时候多少人回忆。
GIF【手机用户】点我查看
之后开始图片
只上传了部分动态图，因为限制图片文件大小。
源码
GIF【手机用户】点我查看
部分源码
部分源码
原案例 和源码都在我这里，想获取的小伙伴们来前端群：621071874，欢迎小白进来一起学习，共同进步，当然我也会找一些比较经典的案例，符合现在企业的面试需求以及适合小白学习的基础视屏以及学习素材都会相应的在群里共享。（包括此案例）
一下是整理的几点常用的CSS的知识点，不分先后。
边框：
圆角效果 border-radius：border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ border-radius: 100%;就是一个圆了。
border-radios:100px/10px (水平100，垂直10)
阴影 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];（阴影模糊半径：只能是正值；阴影扩展半径：可以是正负值）（自带边框）
外阴影x和y（正值）出现在右下；内阴影x和y（正值）出现在左上
图解
为边框应用图片 border-image:
图解
关于颜色
颜色RGBA:语法：color：rgba(R,G,B,A) (A为透明度参数，取值在0~1之间，不可为负值)
渐变：
图片
字体和文字
text-overflow ： (clip:剪切；ellipsis：省略标记）
省略号效果：text-overflow:ellipsis; overflow:hidden;white-space:nowrap
嵌入字体：
图骗不大清晰
文本阴影：text-shadow: X-Offset Y-Offset blur color; x正向右，y正向下;Blur：是指阴影的模糊程度 (text-shadow: 2px 2px 0 red;)。
背景样式：.background-origin ： border-box | padding-box | content-box;背景图片分别是从边框，内边距（默认值），内容区域开始显示。背景需要设置no-repeat属性。
background-clip:默认值为border-box,其他同上 ↑↑↑↑↑↑↑↑↑↑↑↑
background-size:background-size: auto | <长度值> | <百分比> | cover | contain
长度或百分比就设一个值时，图片等比缩放。
.cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
.contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
multiple backgrounds：background:url(http://eg.png) no-repeat left top/200px 55%。
选择器
属性选择器：
图解
结构性伪类选择器:root (根元素为html)、:not 、:empty、:target、:first-child 、:last-child 、:nth-child(n) (括号里可以是2n+1、-n+5、even、odd等)、:nth-last-child(n) (同上)
x:first-of-type 、x:nth-of-type(n) (括号里同上)、x:last-of-type、x:nth-last-of-type(n)、only-child （子元素只有唯一）、only-of-type (子元素类型唯一)
:enabled、:disabled
:checked（选择框加点变化示例）、::selection(改变用鼠标选择网页文本的样式)
:read-only(与html中readonly='readonly'配合使用)、:read-write (与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。)
布局样式
多列布局——columns:width count
多列布局——column-width:auto(默认) | <length>
多列布局——column-count:auto | <integer>
列间距 column-gap:normal(默认) | <length>
列表边框column-rule:width style color
图解
跨列设置 column-span:none(默认) | all(元素跨越所有列)
盒子模型 box-sizing:content | border-box | inherit (这地方了解清楚的话要知道W3C标准盒模型和IE传统下盒模型) 理解这是又多掌握了一个布局利器
图解
content-box的width是定义内容区域的宽度，然后border、padding什么的，都在内容区域外，导致整个盒子的宽度变大。
border-box的width是定义整个盒子的宽度，所以在border、padding相同的情况下，内容宽度会变小。
伸缩布局
display:flex;
flex-direction:row（水平） | column（垂直）;
align-items:flex-start | flex-end | center;(水平方向)
justify-content:flex-start | flex-end | center;
(垂直方向)Flex项目自动收缩：需要给每个flex项目设置flex属性设置需要伸缩的值。
.bigitem{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; }
css3中动画
transition:all .5s ease-in-out .2s;
transition-property:指定过渡或动态模拟的CSS属性
（常见过度属性）
transition-duration:指定完成过渡所需的时间
transition-duration:指定完成过渡所需的时间
如图
transition-delay:过渡延迟时间
连写：-webkit-animation:move 10s ease-in 0.5s infinite
关键帧
调用动画 animation:name 要与@keyframes连用
设置动画播放时间 animation-duration: 完成从0%到100%一次动画所需时间
设置动画播放方式 animation-timing-function
设置动画开始播放的时间 animation-delay
设置动画播放次数 animation-iteration-count:infinate (无限次)
设置动画播放方向 animation-direction:normal(默认) / alternate（偶数次反方向播放）
设置动画的播放状态 animation-play-state:running(默认)/paused
设置动画时间外属性 animation-fill-mode:none/forwards/backwords/both
图解