这是我参与「第五届青训营 」笔记创作活动的第2天。
一、重点内容
- CSS常用或者好玩的网页效果
- CSS动画效果
二、 详细内容介绍
CSS选择器
- #id ID选择器
- .class 类选择器
element元素
- div 所有div元素。
- div,p 所有div元素和p元素。
- div p 所有div元素内的p元素。
- div>p 所有父级（上一级）是div元素的p元素。
- div+p 所有紧跟在div后一个的并且是p的元素。
attribute属性
- [title] 所有包含title属性的。
- [title="blank"]所有title属性值为blank的。
- [title|="hi"]所有title属性以hi开头的。
- [title~="hi"]所有title属性包含hi的。
链接（因为用a做例子)
- a:link 未访问过的a(链接)。
- a:visit 访问过的链接。
- a:hover 鼠标覆盖在a上时。
- a:focus a获取焦点时。
其他常用
- :fist-child 选择是其父元素的第一个孩子的元素。
- :last-child 选择是其父元素的最后一个孩子的元素。
- :checked 选择是被选中的元素。
- :required 设置了required属性的元素。
- :valid 输入值为合法的元素。
- :invalid 输入值为不合法的元素。
CSS属性
animation
- animation-delay 延迟..时间动画。
- animation-duration 在..时间内播放完动画。
- animation-play-state 播放..次动画。
- animation-iteration-count 暂停动画。
background
- background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
- background-blend-mode 设置背景图片混合模式（饱和度、滤色、叠加等）。
- background-color
- background-image
- background-size
- background-repeat
column
- column-count 把文本分成..列。
- column-rule 列之间的宽度、样式、颜色。
- column-span 这个元素要跨越多少列。
其他常用
- color 指定文本颜色。
- appearance: 以..方式呈现元素。
- backface-visibility 翻转时是否可见背面。
- clear 指定左侧或右侧不允许浮动的元素。
- clip 图片裁剪成固定大小。(如果先有"overflow：visible"，clip属性不起作用)
- box-shadow 盒子阴影。
- box-sizing 盒子大小。
- counter-reset 对部分和子部分进行编号。
- cursor 鼠标放在一个元素范围内时的形状。
- display 是否呈现。（不可见不占用位置）
- visibility 是否可见。（即使不可见也占用位置）
- filter 修改滤镜（把灰度设为百分百grayscale(100%)即为黑白滤镜）。
- flex flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
- float 向..浮动。
- height 设置元素的高度。
- width 设置元素和宽度。
- justify-content 用于设置或检索弹性盒子在横轴上的对齐方式。
- letter-spacing 元素中的字母间距。
- list-style 包含list-style-type, list-style-position, list-style-image。
- margin 设置所有外边距属性。（上右下左）
- max-height 元素的最大高度。
- @media 查询媒体类型。（屏幕尺寸等）
- object-fit 指定元素的内容如何适应容器。
- object-position 可以更改图片在容器中的位置。（例如做动画，实现图片展示从左到右的部分）
- opacity 设置透明度。
- overflow 设置如果溢出盒子会发生什么。
- resize 设置是否可用户调整。
- text-align 列表对齐方式。
- text-decoration 规定添加到文本的修饰，下划线、上划线、删除线等（text-decoration-line、color、style的缩写）
- text-indent 设置文本的首行缩进。
- text-overflow 指定当文本溢出包含它的元素时，应该如何显示。
- transform 有很多属性值，应用于元素的2D或3D转换，可将元素旋转，缩放，移动，倾斜等。
- transition 属性设置元素过渡效果，为缩写（transition-property、duration、timing-function、delay）
- white-space 规定元素内的空白如何处理。
- clip-path 使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。
CSS动画效果
利用css属性的变化实现动画效果
- animation-iteration-count:infinite 动画播放多少次。（infinite代表不断重复）。
- animation-direction:alternate 动画播放顺序。（alternate先正向执行，再反向执行交替）
- animation-fill-mode:forwards 动画不播放时应用到的元素。（forwards在动画结束时停在结束位置）
三、实践练习例子
练习之一：
鼠标放置实现放大所选的动画效果↓：
四、课后个人总结
把css的文档通读了一遍之后，选了一些我认为实际开发中会用到的整理了笔记。实践方面因为临近过年，放松了一段时间，没有完成很多复杂的动画效果，但是基本一些想实现的动画效果能够构想出可以用什么方法来实现。希望等深度学习完JS高级之后能结合所学知识实现效果更好的网页。
