130 次浏览
0反转效果用于将对象的颜色映射到颜色光谱中的相反值,即创建负像。此过滤器中使用以下参数:序号 参数 & 说明 1 反转 将对象的颜色映射到颜色光谱中的相反值。示例您可以尝试运行以下代码,将对象的颜色映射到颜色光谱中的相反值:在线演示 文本示例: CSS 教程
198 次浏览
灰度效果用于将对象的颜色转换为 256 个灰度等级。此过滤器中使用以下参数:参数 说明 灰度 将对象的颜色转换为 256 个灰度等级。示例您可以尝试运行以下代码来设置灰度效果:在线演示 文本示例: CSS 教程
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(); }
2K+ 次浏览
波浪效果用于使对象产生正弦波形失真,使其看起来波浪状。此过滤器中可以使用以下参数:序号 参数 & 说明 1. 添加 1 的值将原始图像添加到波浪图像,0 不添加。2. 频率 波浪的数量。3. 光线 波浪上的光线强度(0 到 100)。4. 相位 正弦波应从哪个角度开始(0 到 100)。5. 强度 波浪效果的强度。示例您可以尝试运行以下代码来设置波浪效果:在线演示 文本示例: CSS 教程
237 次浏览
反转效果用于将对象的颜色映射到颜色光谱中的相反值,即创建负像。此过滤器中使用以下参数:序号 参数 & 说明 1 反转 将对象的颜色映射到颜色光谱中的相反值。示例您可以尝试运行以下代码来实现反转效果:在线演示 文本示例: CSS 教程
313 次浏览
使用蒙版效果将透明像素转换为指定颜色并将不透明像素转换为透明。此过滤器中使用以下参数:序号 参数 & 说明 1 颜色 透明区域将变成的颜色。示例您可以尝试运行以下代码来实现蒙版效果:在线演示 文本示例: CSS 教程
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(); }
108 次浏览
speech-rate 属性指定说话速度。请注意,允许使用绝对和相对关键字值。可能的值为:-数字 - 以每分钟多少字来指定说话速度。x-slow - 等同于每分钟 80 个字。slow - 等同于每分钟 120 个字。medium - 等同于每分钟 180-200 个字。fast - 等同于每分钟 300 个字。x-fast - 等同于每分钟 500 个字。faster - 在当前语音速度的基础上增加每分钟 40 个字。slower - 在当前语音速度的基础上减少每分钟 40 个字。
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 用于设置左下角的... 阅读更多
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: ... 阅读更多