アニメーション IE10
アニメーションの 6 つの属性
animation-name は、セレクターにバインドする必要があるキーフレーム名を指定します
animation-duration は、アニメーションの完了にかかる時間を指定します ms
object.style.animationDuration= "3s"
animation-timing-function アニメーションのスピードカーブ
デフォルト値ease
object.style.animationTimingFunction="linear"
構文animation-timing-function:value
animation-timing-functionはベジェ曲線関数を使用しますCubic Bezier と呼ばれる速度曲線を生成するための関数です。独自の値を使用することも、事前定義された値を使用することもできます。
デフォルトでは、最初から最後まで同じ速度で速度が上がります。
イーズイン アニメーションは低速で開始します。
イーズアウト アニメーションは低速で終了します。
イーズイン アウト アニメーションは低速で開始し、終了します。
cubic-bezier(n,n,n, n) 3 次ベジェ関数内の独自の値。指定できる値は0から1までの数値です
animation-deplay アニメーション開始までの遅延
animation-lay:
time
;
JavaScript 構文: object.style.animationDelay="2s"
animation-delay値は秒またはミリ秒で始まります。 負の値が許可されます。-2s はアニメーションをすぐに開始しますが、アニメーションに入るまで 2 秒スキップします
animation-iteration-
count
アニメーションの再生回数 IE10
animation-iteration-count: n|無限JavaScript 構文: object.style .animationIterationCount=3
animation-
direction
アニメーションを順番に逆再生するかどうか
animation-direction 値が「alternate」の場合、アニメーションは通常通り奇数回再生されます( 1、3、5 など)、および偶数 (2、4、6 など ) 逆方向に再生しますanimation-direction:normal|alternate;
JavaScript 構文: object.style.animationDirection="alternate"
デフォルト値 なし 0 容易 0 1 通常
JavaScript 構文 object.style.animation="mymove 5sfinity"
Transition トランジション IE10 の 4 つのプロパティ
transition-property
transiont-property 属性はトランジションの名前を指定しますcss プロパティ
transition-property: none|
all
|propertyCSS プロパティ カンマで区切られた名前のリスト。
JavaScript 構文: object.style.transitionProperty="width,
height"transition-duration いくつ
トランジション効果の完了にかかる秒またはミリ秒
transition-duration: time; JavaScript 構文: object.style.transitionDuration="5s"
transition-timing-function: liner|ease|ease-in|ease -out|ease-in-out|cubic-
bezier(n,n,n ,n);
JavaScript 構文: object.style.transitionTimingFunction="linear"
transition-delay
JavaScript 構文: object.style. transitionDelay="2s"
transition-delay: time;
デフォルト値はすべて0、ease 0
transition:property期間タイミング関数遅延
javascript構文
: object.style.transition="width 2s"
変換 IE10
transform を使用すると、要素を回転、拡大縮小、移動、または傾けることができます
デフォルト なし
JavaScript 構文 object.style.transform="rotate(7deg)"
transform: none|transform-functions;
none は変換しません
matrix(n,n,n,n,n,n) は 6 つの値の行列を使用します
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n, n,n,n) は 16 の値の 4x4 行列を使用します
translate(x, y)2D 変換
translate3d(x,y,z)3D 変換
translateX(x) は X 軸の値のみを使用します
translateY (y) Y 軸の値のみを使用
translateZ(z) は Z 軸の値のみを使用
scale (x,y)2D スケーリング
scale3d(x,y,z)3D スケーリング
scaleX(x)、 scaleY(y),scaleZ(z)
rotate(angle) 2D回転、パラメータで角度を指定
rotate3d(x,y,z,angle)3D回転
rotateX(angle),rotateY(angle),rotateZ(angle) )
skew(x-angle,y-angle) は、X 軸と Y 軸に沿った 2D スキュー変換を定義します
skewX(angle ) skewY(angle) experience(n)
新しい
css3 セレクター
1 E:nth-last-child(n)
2 E:nth-of-type(n)
3 E:nth-last-of-type(n)
4 E:last-child
5 E:first-of-type
6 E:only-child
7 E:only-of-type
8 E:empty
9 E:checked
10 E:enabled
11 E:disabled
12 E::selection
13 E:not(s)
14 E::not(.s)
15 body: nth-child(even), nth-child(odd)/*：此处他们分别代表了表格（tbody）下面的偶数行和奇数行（tr）*/等等......
ログイン後にコピー
Font-face はフォント スタイルをロードするために使用でき、またサーバー側のフォント ファイルをロードして、クライアントにインストールされていないフォントをクライアントが表示できるようにすることもできます
Font-face クライアント フォントのケース
<p><font face="arial">arial courier verdana</font></p>
ログイン後にコピー
1 @font-face {
2 font-family: BorderWeb;
3 src:url(BORDERW0.eot);
4 }
5 @font-face {
6 font-family: Runic;
7 src:url(RUNICMT0.eot);
8 } 9 10 .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
11 .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }ログイン後にコピー
Word-wrap
現在行が超えた場合に設定または取得 コンテナの境界を指定する際に改行するかどうか この時点でテキストが分散しています
Text-overflow它与 word-wrap 是协同工作
word-wrap 设置或检索当当前行超过指定容器的边界时是否断开转行，而 text-overflow 则设置或检索当当前行超过指定容
器的边界时如何显示
1 .clip{text-overflow:clip; overflow:hidden; white-space:nowrap;
2 width:200px;background:#ccc;}
3 .ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
4 width:200px; background:#ccc;}ログイン後にコピー
1
不显示省略标记，而是简单的裁切条
2 3
当对象内文本溢出时显示省略标记
文本渲染
1 p {
2 -webkit-text-fill-color: black;
3 -webkit-text-stroke-color: red;
4 -webkit-text-stroke-width: 2.75px;
5 }ログイン後にコピー
ログイン後にコピー
Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度
文本渲染
1 p {
2 -webkit-text-fill-color: black;
3 -webkit-text-stroke-color: red;
4 -webkit-text-stroke-width: 2.75px;
5 }ログイン後にコピー
ログイン後にコピー
Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度
gradient 渐变效果
线性渐变 linear左上（0% 0%）到右上(0% 100%)
background-image:-webkit-gradient(linear,0% 0%,100% 0%,form(red),to(balck))
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),
color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));
径向渐变radial从一个圆到一个圆的渐变
background:-weblit-gradient(radial,50 50,50,50 50,0,form(black),color-stop(0.5,red),to(blue));
css3的阴影shadow和反射reflect
background-clip:border-box;背景从border开始显示；
background-clip：padding-box
background-clip：content-box
background-clip:no-clip:no-clicp默认属性等同于border-box
background-origin 用于确定背景的位置 通常与background-positon联合使用
background-size来调整背景图片的大小，注意别和 clip 弄混，这个主要用于设定图片本身
background-size: contain; 缩小图片以适合元素（维持像素长宽比）
background-size: cover; 扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px; 缩小图片至指定的大小 .
background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸
background-break: continuous; 默认值。忽略盒之间的距离（也就是像元 素没有分成多个盒子，依然是
一个整体一 样）
background-break: bounding-box; 把盒之间的距离计算在内；
background-break: each-box; 为每个盒子单独重绘背景
counter()=[counter(name) | counters(name,list-style-type)]{1,}
counter-reset IE8
counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。
利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。
注释：如果使用 "display: none"，则无法重置计数器。如果使用 "visibility: hidden"，则可以重置计数器
JavaScript 语法： object.style.counterReset="subsection"
counter-reset的值none id number inherit
attr()=attr(attr-name)插入元素的属性值 IE8
calc() =calc(四则运算) 动态计算长度值 IE9
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
initial属于css-wide关键字，这表示所有的属性都可以接受该值 IE11
unset 擦除属性声明
颜色值
color color的颜色名称，HEX，RGB，RGBA，HSL，HSLA，transparent,currentColor
currentColor
resolution分辨率值不允许有负值
频率单位包括有： dpi, dpcm, dppx
角度值 angle角度值的正常范围应在[0-360deg]内，例如：-10deg与350deg是等价的
角度单位包括有： deg, grad一个圆共400梯度, rad 一个圆共2π弧度, turn
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
长度值与单位
ch 数字“0”的宽度 ie9
rem 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
vw相对于视口的宽度。视口被均分为100单位的vw ie9
vh 相对于视口的高度。视口被均分为100单位的vh
vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
q 1/4毫米（quarter-millimeters）。绝对长度单位。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
@import@media@font-face@keyframes@supports
E:first-letter/E::first-letter
E:first-line/E::first-line
E:before/E::before
E:after/E::after
E::placeholderE::selection
ログイン後にコピー
E:not(s)
E:root
E:last-child
E:only-child
E:nth-child(n)
E:nth-last-child(n)
E:first-of-type
E:last-of-type
E:only-of-type
E:nth-of-type(n)
E:nth-last-of-type(n)
E:empty
E:checked
E:enabled
E:disabled
E:target
ログイン後にコピー
属性选择器
E[att^="val"]选择具有att属性且属性值为以val开头的字符串的E元素
E[att$="val"]选择具有att属性且属性值为以val结尾的字符串的E元素
E[att*="val"]选择具有att属性且属性值为包含val的字符串的E元素
【相关推荐】
1. CSS3免费视频教程
2. 分享一个CSS3的动画库
3. CSS3学习之Animation详解
4. CSS3教学之动画制作学习
5. 详细分析关于CSS3中新增的特性
以上がcss3の新機能を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
