前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

2024年10月15日

CSS filter属性（css中filter）

滤镜的使用格式：

<style type="text/css">
<!--
.filter { filter: Alpha(Opacity=50)}
-->
</style>

filter滤镜目前只有IE浏览器支持,不推荐使用，不区分大小写

作者:whsf66 , 分类:前端教程 , 浏览:14 , 评论:0

2024年10月15日

交互设计进阶:如何通过CSS制作引人注目的按钮

制作一个炫酷的按钮可以为网页增添活力和吸引力。通过巧妙运用CSS动画和过渡效果，我们可以创建一个交互性强、视觉效果炫目的按钮。下面是一个简单的例子，演示如何创建一个炫酷按钮。

1. 基础样式

首先，我们定义按钮的基本样式，包括位置、大小、边框、背景颜色等。

这段代码定义了按钮的基本样式，包括按钮的大小、边框、背景颜色、字体等。

作者:whsf66 , 分类:前端教程 , 浏览:13 , 评论:0

2024年10月15日

纯 CSS 实现的的3种扫光效果（扫光效果怎么做）

介绍一个比较常见的动画效果。

在日常开发中，为了强调凸显某些文本或者元素，会加一些扫光动效，起到吸引眼球的效果，比如文本的

或者是一个卡片容器，里面可能是图片或者文本或者任意元素

除此之外，还有那种不规则的图片，比如一张奖品图片，只会在图片本身出现扫光，透明度地方则不会

这些是如何实现的呢？一起看看吧

作者:whsf66 , 分类:前端教程 , 浏览:15 , 评论:0

2024年10月15日

5 种用 CSS 隐藏页面元素的方法（5 种用 css 隐藏页面元素的方法是）

用 CSS 隐藏页面元素有许多种方法。你可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域。

你有没有想过，为什么我们要有这么多技术来隐藏元素，而它们看起来都实现的是同样的效果？每一种方法实际上与其他方法之间都有一些细微的不同，这些 不同决定了在一个特定的场合下使用哪一个方法。这篇教程将覆盖到那些你需要记住的细小不同点，让你根据不同情况选择上面这些方法中适合的方法来隐藏元素。

作者:whsf66 , 分类:前端教程 , 浏览:13 , 评论:0

2024年10月15日

CSS3 滤镜（css各种滤镜的应用是什么）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width,user-scalable=no" name="viewport" />
<link href="/images/web_mini.ico" type="image/x-icon" rel="shortcut icon" />
<title>CSS3 滤镜实现</title>
<style type="text/css">
img {
    width: 300px;
}


.sepia {
    /** 格式，filer: sepia(效果范围)
    * 效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果
    */
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    -o-filter: sepia(100%);
    -ms-filter: sepia(100%);
    filter: sepia(100%);
}

.grayscale {
    /** 格式，filer: grayscale(效果范围)
    * 效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果
    */
    -webkit-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

.blur {
    /** 格式，filer: blur(模糊半径)
    * 模糊半径，取值范围0~Npx，0为无效果
    */
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

.invert {
    /** 格式，filer: invert(效果范围)
    * 效果范围，取值范围0~1或0~100%，0为无效果，1或100%表示最大效果
    */
    -webkit-filter: invert(1);
    -moz-filter: invert(1);
    -o-filter: invert(1);
    -ms-filter: invert(1);
    filter: invert(1);
}

.saturate {
    /** 格式，filer: saturate(效果范围)
    * 效果范围，取值范围>=0的数字或百分数，1为无效果，0为灰度图
    */
    -webkit-filter: saturate(2);
    -moz-filter: saturate(2);
    -o-filter: saturate(2);
    -ms-filter: saturate(2);
    filter: saturate(2);
}

.contrast {
    /** 格式，filer: contrast(效果范围)
    * 效果范围，取值范围>=0的数字或百分数，1为无效果
    */
    -webkit-filter: contrast(2);
    -moz-filter: contrast(2);
    -o-filter: contrast(2);
    -ms-filter: contrast(2);
    filter: contrast(2);
}

.brightness {
    /** 格式，filer: brightness(效果范围)
    * 效果范围，取值范围>=0的数字或百分数，1为无效果
    */
    -webkit-filter: brightness(2);
    -moz-filter: brightness(2);
    -o-filter: brightness(2);
    -ms-filter: brightness(2);
    filter: brightness(2);
}

.hue-rotate {
    /** 格式，filer: hue-rotate(效果范围)
    * 效果范围，取值范0deg~365deg，0（默认值）为无效果
    */
    -webkit-filter: hue-rotate(200deg);
    -moz-filter: hue-rotate(200deg);
    -o-filter: hue-rotate(200deg);
    -ms-filter: hue-rotate(200deg);
    filter: hue-rotate(200deg);
}

.drop-shadow {
    /** 格式，filer: drop-shadow(x-offset y-offset 阴影模糊半径 阴影颜色)
    * x-offset和y-offset为阴影的相对于元素左上角的位移距离；
    * 注意：
    * 1. 阴影的外观受border-radius样式的影响；
    * 2. :after和:before等伪元素会继承阴影的效果。
    */
    -webkit-filter: drop-shadow(1px 1px 0px #333);
    -moz-filter: drop-shadow(1px 1px 0px #333);
    -o-filter: drop-shadow(1px 1px 0px #333);
    -ms-filter: drop-shadow(1px 1px 0px #333);
    filter: drop-shadow(1px 1px 0px #333);
}

.opacity {
filter: opacity(50%);
}
</style>
</head>
<body>
<div style="display: table; text-align: center; width: 100%; height: 100%;">
<div style="display: table-cell; vertical-align: middle;">
<div class="div_20160110">
<img src="img/yangmi.jpg" class="" alt="原图" title="原图" />
<img src="img/yangmi.jpg" class="sepia " alt="Speia滤镜" title="Speia滤镜" />
<img src="img/yangmi.jpg" class="grayscale " alt="灰度图滤镜" title="灰度图滤镜" />
<img src="img/yangmi.jpg" class="blur " alt="高斯模糊滤镜" title="高斯模糊滤镜" />
<img src="img/yangmi.jpg" class="invert " alt="反色滤镜" title="反色滤镜" />
<img src="img/yangmi.jpg" class="saturate " alt="饱和度滤镜" title="饱和度滤镜" />
<img src="img/yangmi.jpg" class="contrast " alt="对比度滤镜" title="对比度滤镜" />
<img src="img/yangmi.jpg" class="brightness " alt="亮度滤镜" title="亮度滤镜" />
<img src="img/yangmi.jpg" class="hue-rotate " alt="色相旋转滤镜" title="色相旋转滤镜" />
<img src="img/yangmi.jpg" class="drop-shadow " alt="阴影滤镜" title="阴影滤镜" />
<img src="img/yangmi.jpg" class="opacity" alt="透明度滤镜" title="透明度滤镜" />
</div>
</div>
</div>
</body>
</html>

作者:whsf66 , 分类:前端教程 , 浏览:14 , 评论:0

2024年10月15日

2023 年 CSS 新特性大盘点（css2021）

2023 年对 CSS 来说是重要的一年，在这一年中迎来了众多功能更新，从基础到展现，再到交互，让开发人员实现了曾经认为在 Web 开发中不可能实现的众多功能。

作者:whsf66 , 分类:前端教程 , 浏览:13 , 评论:0

2024年10月15日

在 CSS 中，color 属性的哪种取值方式最好?

在 CSS 中，color 属性的取值方式有多种，每一种都有其适用场景和优点。没有一种“最好”的取值方式，因为它取决于你的具体需求和上下文。以下是一些常见的 color 取值方式及其特点：

作者:whsf66 , 分类:前端教程 , 浏览:13 , 评论:0

2024年10月15日

学习js/css时易忽略的小知识点（js操作css属性）

表单中使用name来获取表单的value

方法是使用document.getElementsByName()来获取，但是一定要记得这样获取到的结果为集合。如果代码写成这样将不会起作用

var x = document.getElementsByName("x").value;
window.alert(x);

作者:whsf66 , 分类:前端教程 , 浏览:15 , 评论:0

2024年10月15日

巧用CSS cross-fade()实现背景图像半透明效果

前段时间有挺火的一个小游戏，拿两张图片叠加在一起，看看复合人物的效果，用css怎么实现呢？可能大部分人想到的是将两个img用定位的方式叠加在一起，分别设置透明度，当然这个办法是可行的，其实css还提供了一个cross-fade()方法，讲两张图片作为背景图引入，可以实现相同的效果。

作者:whsf66 , 分类:前端教程 , 浏览:13 , 评论:0

2024年10月15日

你所不知道的 CSS 滤镜技巧与细节

本文主要介绍 CSS 滤镜的不常用用法，希望能给读者带来一些干货！

OK，下面直接进入正文。本文所描述的滤镜，指的是 CSS3 出来后的滤镜，不是 IE 系列时代的滤镜，语法如下，还未接触过这个属性的可以先简单到 MDN — filter 了解下：

{ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%);

作者:whsf66 , 分类:前端教程 , 浏览:14 , 评论:0

<< < 1 2 3 4 5 6 7 > >>
控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言