菜鸟教程 -- 学的不仅是技术,更是梦想!

CSS 参考手册
CSS 参考手册 CSS 选择器 CSS 听觉参考手册 CSS Web安全字体 CSS 动画 CSS 函数 CSS 单位 CSS 颜色 CSS 合法颜色值 CSS 颜色名称 CSS 颜色十六进制值 CSS 浏览器支持 Sass 教程

CSS 属性

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function appearance backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-align box-direction box-flex box-flex-group box-lines box-ordinal-group box-orient box-pack box-shadow box-sizing caption-side clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight @import grid-rows hanging-punctuation height icon justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode object-fit object-position nav-down nav-index nav-left nav-right nav-up opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position punctuation-trim quotes resize right rotation tab-size table-layout target target-name target-new target-position text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-outline text-overflow text-shadow text-transform text-wrap top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index writing-mode gird gap row-gap grid-area grid-auto-columns grid-auto-rows grid-auto-flow grid-column grid-column-start grid-column-end grid-column-gap grid-gap grid-row-gap grid-row-end grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows grid-row @charset clip-path pointer-events backdrop-filte
(追記) (追記ここまで)

CSS 动画

定义和用法

一些 CSS 属性是可以有动画效果的,这意味着它们可以用于动画和过渡。

动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色。

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀。

4.0 -webkit- 10.0 16.0
5.0 -moz-		 4.0 -webkit- 15.0 -webkit-
12.1
12.0 -o-

实例

背景颜色逐渐地从红色变化到蓝色:

@keyframesmymove{from{background-color:red;}to{background-color:blue;}}/*Safari 和 Chrome:*/ @-webkit-keyframesmymove{from{background-color:red;}to{background-color:blue;}}

尝试一下 »

动画属性

CSS 中的动画属性:

属性 实例
background 尝试一下 》
background-color 尝试一下 》
background-position 尝试一下 》
background-size 尝试一下 》
border 尝试一下 》
border-bottom 尝试一下 》
border-bottom-color 尝试一下 》
border-bottom-left-radius 尝试一下 》
border-bottom-right-radius 尝试一下 》
border-bottom-width 尝试一下 》
border-color 尝试一下 》
border-left 尝试一下 》
border-left-color 尝试一下 》
border-left-width 尝试一下 》
border-right 尝试一下 》
border-right-color 尝试一下 》
border-right-width 尝试一下 》
border-spacing 尝试一下 》
border-top 尝试一下 》
border-top-color 尝试一下 》
border-top-left-radius 尝试一下 》
border-top-right-radius 尝试一下 》
border-top-width 尝试一下 》
bottom 尝试一下 》
box-shadow 尝试一下 》
clip 尝试一下 》
color 尝试一下 》
column-count 尝试一下 》
column-gap 尝试一下 》
column-rule 尝试一下 》
column-rule-color 尝试一下 》
column-rule-width 尝试一下 》
column-width 尝试一下 》
columns 尝试一下 》
filter 尝试一下 》
flex
flex-basis 尝试一下 》
flex-grow 尝试一下 》
flex-shrink 尝试一下 》
font 尝试一下 》
font-size 尝试一下 》
font-size-adjust
font-stretch
font-weight 尝试一下 》
height 尝试一下 》
left 尝试一下 》
letter-spacing 尝试一下 》
line-height 尝试一下 》
margin 尝试一下 》
margin-bottom 尝试一下 》
margin-left 尝试一下 》
margin-right 尝试一下 》
margin-top 尝试一下 》
max-height 尝试一下 》
max-width 尝试一下 》
min-height 尝试一下 》
min-width 尝试一下 》
opacity 尝试一下 》
order 尝试一下 》
outline 尝试一下 》
outline-color 尝试一下 》
outline-offset 尝试一下 》
outline-width 尝试一下 》
padding 尝试一下 》
padding-bottom 尝试一下 》
padding-left 尝试一下 》
padding-right 尝试一下 》
padding-top 尝试一下 》
perspective 尝试一下 》
perspective-origin 尝试一下 》
right 尝试一下 》
text-decoration-color 尝试一下 》
text-indent 尝试一下 》
text-shadow 尝试一下 》
top 尝试一下 》
transform 尝试一下 》
transform-origin 尝试一下 》
vertical-align 尝试一下 》
visibility
width 尝试一下 》
word-spacing 尝试一下 》
z-index 尝试一下 》
AI 思考中...

点我分享笔记

  • 昵称 (必填)
  • 邮箱 (必填)
  • 引用地址

AltStyle によって変換されたページ (->オリジナル) /