107 次查看
伪类用于显示元素或 CSS 选择器的不同状态。visited 伪类用于显示链接已被访问。此伪类大多与链接相关联。语法a:visited { color:green;}让我们检查 :visited 伪类在不同场景下的实际用法,如下所示 -示例 在线演示 a:visited { color:green;} 点击这里学习说明当您第一次看到链接时,它将以普通链接颜色(蓝色)显示,如果该链接已被访问过一次,则链接将变为绿色。示例 在线演示 ... 阅读更多
829 次查看
伪类用于显示元素或 CSS 选择器的不同状态。active 伪类用于显示元素处于活动状态。此伪类大多与链接和按钮或任何其他可以处于活动状态的元素相关联。例如,如果它与链接相关联,则表示该链接处于活动状态。语法a:active { color:green;}让我们检查 :active 伪类在不同场景下的实际用法,如下所示 -示例 在线演示 a:active { color:green;} 点击这里学习说明当您第一次看到链接时 ... 阅读更多
487 次查看
px 单位定义屏幕像素中的测量值。以下是示例 -div { padding: 40px; }em 单位是 em 空间中字体高度的相对测量值。因为 em 单位等于给定字体的尺寸,如果您将字体分配为 12pt,则每个“em”单位将为 12pt;因此,2em 将为 24pt。以下是示例 -p { letter-spacing: 4em; }% 单位将测量值定义为相对于另一个值的百分比,通常是包含元素。p { font-size: 14pt; line-height: 80%; }
95 次查看
要使用 CSS 对 word-spacing 属性实现动画,您可以尝试运行以下代码 -示例在线演示 div { border: 2px solid blue; background: orange; animation: myanim 3s infinite; } @keyframes myanim { 50% { word-spacing: 30px; } ... 阅读更多
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); } } 演示
463 次查看
要使用 CSS 对 vertical-align 属性实现动画,您可以尝试运行以下代码 -示例在线演示 img { vertical-align: 80px; animation: myanim 3s; } @keyframes myanim { 50% { vertical-align:120px; } } CSS vertical-align 属性 这是演示文本。这是演示文本。这是演示文本。这是演示文本。
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; }时间以毫秒为单位设置暂停。
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 属性 这是演示文本!
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 属性 这是演示文本。
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 中的演示文本。