找到关于 CSS 的1575 篇文章

使用 CSS 创建脉冲动画效果

Arjun Thakur
更新于 2020年6月27日 13:30:33

775 次浏览

要使用 CSS 创建脉冲效果,您可以尝试运行以下代码示例在线演示                    .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: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes pulse {             0% { -webkit-transform: scale(1); }             50% { -webkit-transform: scale(1.1); }             100% { -webkit-transform: scale(1); }          }          @keyframes pulse {             0% { transform: scale(1); }             50% { transform: scale(1.1); }             100% { transform: scale(1); }          }          .pulse {             -webkit-animation-name: pulse;             animation-name: pulse;          }                           刷新页面                function myFunction() {             location.reload();          }          

使用 CSS 创建光速飞出动画效果

Nishtha Thakur
更新于 2020年6月20日 06:20:40

196 次浏览

要使用 CSS 创建光速飞出效果,您可以尝试运行以下代码:在线演示                    .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 lightSpeedOut {             0% {                -webkit-transform: translateX(0%) skewX(0deg);                opacity: 1;             }             100% {             -webkit-transform: translateX(100%) skewX(-30deg);             opacity: 0;             }          }          @keyframes lightSpeedOut {             0% {                transform: translateX(0%) skewX(0deg);                opacity: 1;             }             100% {                transform: translateX(100%) skewX(-30deg);                opacity: 0;             }          }          .lightSpeedOut {             -webkit-animation-name: lightSpeedOut;             animation-name: lightSpeedOut;             -webkit-animation-timing-function: ease-in;             animation-timing-function: ease-in;          }          .animated.lightSpeedOut {             -webkit-animation-duration: 0.25s;             animation-duration: 0.25s;          }                           刷新页面                function myFunction() {             location.reload();          }          

CSS 中的 !important 规则何时使用?

Samual Sam
更新于 2020年6月27日 13:29:43

51 次浏览

!important 规则提供了一种使 CSS 级联的方法。它还包括始终应用的规则。具有 !important 属性的规则将始终应用,无论该规则在 CSS 文档中出现在哪里。示例例如,在以下样式表中,段落文本将为黑色,即使第一个应用的样式属性为红色:     示例如果您想确保始终应用属性,则应将 !important 属性添加到标签中。因此,要使段落文本始终为红色,您应该按如下方式编写:在线... 阅读更多

如何在 CSS 中定义要下载字体的路径

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

79 次浏览

@font-face 规则用于定义要下载字体的路径,尽管这可能会遇到特定于实现的限制。示例让我们看一个示例    

使用 CSS 创建光速飞入动画效果

Smita Kapse
更新于 2020年6月27日 12:39:44

660 次浏览

要使用 CSS 创建光速飞入效果,您可以尝试运行以下代码:示例在线演示                    .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: ... 阅读更多

使用 CSS 创建铰链动画效果

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

175 次浏览

要使用 CSS 创建铰链动画效果,您可以尝试运行以下代码:示例在线演示                    .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;   ... 阅读更多

使用 CSS 滤镜创建模糊图片或文本

Yaswanth Varma
更新于 2024年1月8日 14:27:45

251 次浏览

用户发现带有模糊背景的网站在视觉上看起来很好看。但是您是否考虑过这种模糊是如何具体制作的?很简单。让我们看看如何使用 CSS 背景模糊属性来实现它。使用 CSS 滤镜在图像或文本上生成模糊效果是常见的 Web 开发方法,可以提高视觉吸引力或实现某些设计风格。可以使用 CSS 滤镜更改网页上项目的渲染,包括模糊。在图像上使用 CSS filter: blur() 属性时,请对模糊半径进行必要的调整。例如,... 阅读更多

CSS 色彩滤镜

Anvi Jain
更新于 2020年6月27日 12:26:18

2000+ 次浏览

色度过滤器用于使特定颜色透明,通常用于图像。你也可以将其用于滚动条。示例实现 CSS 色度过滤器 −在线演示 文本示例:CSS 教程

CSS play-during 属性

Samual Sam
更新于 2020年6月27日 12:25:48

88 次浏览

此属性指定在朗读元素内容时播放的背景声音。可能的值如下:URI − 指定的声音将在朗读元素内容时作为背景播放。mix − 此关键字表示从父元素的 play-during 属性继承的声音将继续播放,并且由 uri 指定的声音将与其混合。如果未指定 mix,则元素的背景声音将替换父元素的声音。repeat − 此关键字表示如果声音… 阅读更多

使用 CSS 实现翻转效果

Arjun Thakur
更新于 2020年6月27日 12:24:55

556 次浏览

翻转效果用于创建对象的镜像。此过滤器可以使用以下参数:序号 参数 & 描述 1 FlipH 创建水平镜像 2 FlipV 创建垂直镜像 示例 设置翻转效果 在线演示 文本示例:CSS 教程

广告