找到 1575 篇文章 关于 CSS

CSS 中的 visited 伪类

Samual Sam
更新于 2020-06-23 15:45:52

107 次查看

伪类用于显示元素或 CSS 选择器的不同状态。visited 伪类用于显示链接已被访问。此伪类大多与链接相关联。语法a:visited { color:green;}让我们检查 :visited 伪类在不同场景下的实际用法,如下所示 -示例 在线演示           a:visited { color:green;}        点击这里学习说明当您第一次看到链接时,它将以普通链接颜色(蓝色)显示,如果该链接已被访问过一次,则链接将变为绿色。示例 在线演示 ... 阅读更多

CSS 中的 :active 伪类

Syed Javed
更新于 2020-06-23 15:41:33

829 次查看

伪类用于显示元素或 CSS 选择器的不同状态。active 伪类用于显示元素处于活动状态。此伪类大多与链接和按钮或任何其他可以处于活动状态的元素相关联。例如,如果它与链接相关联,则表示该链接处于活动状态。语法a:active { color:green;}让我们检查 :active 伪类在不同场景下的实际用法,如下所示 -示例 在线演示           a:active { color:green;}        点击这里学习说明当您第一次看到链接时 ... 阅读更多

PX、EM 和百分比之间的区别

Nishtha Thakur
更新于 2020-06-12 08:22:52

487 次查看

px 单位定义屏幕像素中的测量值。以下是示例 -div {    padding: 40px; }em 单位是 em 空间中字体高度的相对测量值。因为 em 单位等于给定字体的尺寸,如果您将字体分配为 12pt,则每个“em”单位将为 12pt;因此,2em 将为 24pt。以下是示例 -p {    letter-spacing: 4em; }% 单位将测量值定义为相对于另一个值的百分比,通常是包含元素。p {    font-size: 14pt;    line-height: 80%; }

动画 CSS word-spacing 属性

Ankith Reddy
更新于 2020-06-12 08:50:20

95 次查看

要使用 CSS 对 word-spacing 属性实现动画,您可以尝试运行以下代码 -示例在线演示                    div {             border: 2px solid blue;             background: orange;             animation: myanim 3s infinite;          }          @keyframes myanim {             50% {                word-spacing: 30px;             }         ... 阅读更多

使用 CSS 动画为 transform 属性设置动画

Nancy Den
更新于 2020-06-12 08:50:49

153 次查看

要使用 CSS 对 transform 属性实现动画,您可以尝试运行以下代码 -示例在线演示                    div {             margin: auto;             border: 2px solid blue;             width: 300px;             height: 400px;             background-color: orange;             animation: myanim 3s;          }          @keyframes myanim {             30% {                transform: rotate(120deg);             }          }                                    演示          

使用 CSS 动画为 vertical-align 属性设置动画

Arjun Thakur
更新于 2020-06-12 08:40:54

463 次查看

要使用 CSS 对 vertical-align 属性实现动画,您可以尝试运行以下代码 -示例在线演示                    img {             vertical-align: 80px;             animation: myanim 3s;          }          @keyframes myanim {             50% {                vertical-align:120px;             }          }                     CSS vertical-align 属性                        这是演示文本。这是演示文本。这是演示文本。这是演示文本。          

CSS rest-after 语音媒体属性

Nishtha Thakur
更新于 2020-06-12 07:40:13

99 次查看

CSS rest-after 属性对于语音媒体很有用,可以设置元素后的暂停。以下是语法 -rest-after: | none | x-weak | weak | medium | strong | x-strong这里,x-weak | weak | medium | strong | x-strong 是根据暂停强度进行的休息让我们看一个 rest-after 语音媒体属性的示例 -h1 {    rest-after: 15ms; }时间以毫秒为单位设置暂停。

CSS top 属性与动画

Chandu yadav
更新于 2020-06-12 08:42:12

912 次查看

要使用 CSS 对 top 属性实现动画,您可以尝试运行以下代码 -示例在线演示                    div {             position: absolute;             width: 300px;             height: 200px;             background-color: orange;             color: white;             top: 0;             animation: myanim 3s infinite;          }          @keyframes myanim {             30% {                top: 300px;             }          }                     CSS top 属性                这是演示文本!          

动画 CSS text-decoration-color 属性

Nishtha Thakur
更新于 2020-06-12 08:48:01

175 次查看

要使用 CSS 对 text-decoration 属性实现动画,您可以尝试运行以下代码 -示例在线演示                    #demo {             position: absolute;             right: 0;             width: 300px;             height: 200px;             background-color: blue;             text-decoration: underline;             animation: myanim 3s infinite;          }          @keyframes myanim {             30% {                right: 350px;                text-decoration-color: orange;             }          }                     CSS text-decoration-color 属性                这是演示文本。          

对 CSS perspective-origin 属性执行动画

Chandu yadav
更新于 2020-06-12 08:46:12

124 次查看

要使用 CSS 对 perspective-origin 属性实现动画效果,可以尝试运行以下代码 -示例在线演示 #demo1 { position: relative; margin: auto; height: 250px; width: 350px; padding: 10px; border: 2px solid orange; perspective: 125px; animation: myanim 3s infinite; } @keyframes myanim { 70% { perspective-origin: 5px 30%; } } #demo2 { padding: 70px; position: absolute; border: 2px solid black; background-color: blue; color: white; transform: rotateX(30deg); } CSS perspective-origin 属性 这是 div1 中的演示文本。 这是 div2 中的演示文本。

广告