找到关于 CSS 的 1575 篇文章

使用 CSS 将对象颜色映射到色谱中的相反值

Lakshmi Srinivas
更新于 2020年6月27日 12:24:25

130 次查看

0反转效果用于将对象的颜色映射到色谱中的相反值,即创建负像。此过滤器中使用以下参数:序号参数及说明1反转将对象的颜色映射到色谱中的相反值。示例您可以尝试运行以下代码以将对象的颜色映射到色谱中的相反值:在线演示                         文本示例:       CSS 教程    

使用 CSS 设置灰度效果

Jennifer Nicholas
更新于 2020年6月27日 12:23:29

198 次查看

灰度效果用于将对象的颜色转换为 256 个灰度阴影。此过滤器中使用以下参数:参数说明灰度将对象的颜色转换为 256 个灰度阴影。示例您可以尝试运行以下代码来设置灰度效果:在线演示                         文本示例:                CSS 教程          

使用 CSS 实现 Y 轴翻转动画效果

George John
更新于 2020年6月19日 16:51:46

98 次查看

要使用 CSS 实现 Y 轴翻转动画效果,您可以尝试运行以下代码在线演示                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 1s;             animation-duration: 1s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes flipOutY {             0% {                -webkit-transform: perspective(400px) rotateY(0deg);                opacity: 1;             }             100% {                -webkit-transform: perspective(400px) rotateY(90deg);                opacity: 0;             }          }          @keyframes flipOutY {             0% {                transform: perspective(400px) rotateY(0deg);                   opacity: 1;             }             100% {                transform: perspective(400px) rotateY(90deg);                opacity: 0;             }          }          .flipOutY {             -webkit-backface-visibility: visible !important;             -webkit-animation-name: flipOutY;             backface-visibility: visible !important;             animation-name: flipOutY;          }                           重新加载页面                        function myFunction() {             location.reload();          }          

使用 CSS 实现波浪效果?

karthikeya Boyini
更新于 2020年6月27日 12:22:47

2K+ 次查看

波浪效果用于为对象赋予正弦波失真,使其看起来波浪起伏。此过滤器中可以使用以下参数:序号参数及说明1.添加值为 1 时,将原始图像添加到波浪图像,值为 0 则不添加。2.频率波浪的数量。3.光照波浪上的光强度(从 0 到 100)。4.相位正弦波应从哪个角度开始(从 0 到 100)。5.强度波浪效果的强度。示例您可以尝试运行以下代码来设置波浪效果:在线演示                         文本示例:       CSS 教程    

使用 CSS 设置反转效果

Vrundesha Joshi
更新于 2020年6月27日 12:22:14

237 次查看

反转效果用于将对象的颜色映射到色谱中的相反值,即创建负像。此过滤器中使用以下参数:序号参数及说明1反转将对象的颜色映射到色谱中的相反值。示例您可以尝试运行以下代码以实现反转效果:在线演示                         文本示例:                CSS 教程          

使用 CSS 将透明像素转换为指定颜色并将不透明像素转换为透明

Chandu yadav
更新于 2020年6月27日 12:21:40

313 次查看

使用蒙版效果将透明像素转换为指定颜色,并将不透明像素转换为透明。此过滤器中使用以下参数序号参数及说明1颜色透明区域将变成的颜色。示例您可以尝试运行以下代码来实现蒙版效果在线演示                         文本示例:       CSS 教程    

使用 CSS 实现 X 轴翻转动画效果

Samual Sam
更新于 2020年6月27日 12:16:55

159 次查看

要使用 CSS 实现翻转退出 X 动画效果,您可以尝试运行以下代码 - 示例在线演示                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 1s;             animation-duration: 1s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes flipOutX {             0% {                -webkit-transform: perspective(400px) rotateX(0deg);                opacity: 1;             }             100% {                -webkit-transform: perspective(400px) rotateX(90deg);                opacity: 0;             }          }          @keyframes flipOutX {             0% {                transform: perspective(400px) rotateX(0deg);                opacity: 1;             }             100% {                transform: perspective(400px) rotateX(90deg);                opacity: 0;             }          }          .flipOutX {             -webkit-animation-name: flipOutX;             -webkit-backface-visibility: visible !important;             animation-name: flipOutX;             backface-visibility: visible !important;          }                           刷新页面                function myFunction() {             location.reload();          }          

CSS `speech-rate` 属性

Ankith Reddy
更新于 2020年6月19日 16:38:17

108 次查看

`speech-rate` 属性指定朗读速度。请注意,允许使用绝对和相对关键字值。可能的值包括:- `number` - 以每分钟单词数指定朗读速度。`x-slow` - 等同于每分钟 80 个单词。`slow` - 等同于每分钟 120 个单词。`medium` - 等同于每分钟 180-200 个单词。`fast` - 等同于每分钟 300 个单词。`x-fast` - 等同于每分钟 500 个单词。`faster` - 在当前朗读速度的基础上增加每分钟 40 个单词。`slower` - 在当前朗读速度的基础上减少每分钟 40 个单词。

CSS3 圆角

Rishi Rathor
更新于 2020年6月19日 16:37:37

148 次查看

CSS3 圆角用于使用 `border-radius` 属性为主体或文本添加特殊颜色的角。圆角的简单语法如下:`#rcorners {    border-radius: 60px/15px;    background: #FF0000;    padding: 20px;    width: 200px;    height: 150px; }`下表显示了圆角的可能值:值描述`border-radius`用于设置四个边框半径属性`border-top-left-radius`用于设置左上角的边框`border-top-right-radius`用于设置右上角的边框`border-bottom-right-radius`用于设置右下角的边框`border-bottom-left-radius`用于设置… 阅读更多

使用 CSS 实现翻转进入 Y 动画效果

Lakshmi Srinivas
更新于 2020年6月27日 12:16:22

93 次查看

要使用 CSS 实现翻转进入 Y 动画效果,您可以尝试运行以下代码:示例在线演示                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 1s;             animation-duration: 1s;             -webkit-animation-fill-mode: both;             animation-fill-mode: ... 阅读更多

广告