CSS可以做的几个令你叹为观止的实例分享

敲键小勇士

2024-04-02 17:21

短信预约 -IT技能 免费直播动态提醒

在我写“你未必知道的JavaScript和CSS交互的5种方法”一文时，人们对于JavaScript和CSS是如何重叠的感到惊讶。今天，我将重点强调你能用CSS完成的7种工作——不需要通过JavaScript或图片。

　　CSS@supports

　　在使用一些浏览器可能没有的特性时，每一个优秀的前端开发者都需要进行特性测试。特性测试一直以来都是由JavaScript来做的，许多人使用Modernizr，一个由许多测试良好的案例构成的优秀实用工具，来做特性测试。一个新API：@supports，不管怎样，已经出现在开发人员面前，它能让你用CSS来做特性测试。以下是一些@supports如何工作的简单例子：

复制代码代码如下:

@supports(prop:value) {

}

@supports (display: flex) {
div { display: flex; }
}

@supports (display: -webkit-flex) or
(display: -moz-flex) or
(display: flex) {

    section {
      display: -webkit-flex;
      display: -moz-flex;
    display: flex;
    float: none;
    }
}

这个新的@supports特性，同样有一个对应的JavaScript版本，但已经过期了，我们期待着早点使用它！

　　CSS滤镜

　　写一个服务来修改图片的色调，然后你可以以数十亿美元把它卖给Facebook。当然，那是一件很简单的事，但是写图像滤镜并不是一门科学。我到Mozilla 的第一个星期写的一个小程序（得了奖，额，我只是随便说说而已）用了一些基于JS的数学用canvas来创建图像滤镜，但现在我们用CSS就能创建图像滤镜了。

复制代码代码如下:

.myElement {
-webkit-filter: blur(2px);
}

.myElement {
-webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}

　　这个类型的滤镜只是改变了下图像的原来样子而已，保存或导出图像时并没有用所说的滤镜，但当你需要给照片美化或处理海报时这很好用。

　　Pointr Events和 Bricking Clicks

　　CSS的Pointr Events属性提供了一个方法来有效的禁用一个元素，正因为如此，通过JavaScript，点击一个链接不会触发一个单击事件：

复制代码代码如下:

.disabled { pointer-events: none; }

document.getElementById("disabled-element").addEventListener("click", function(e) {
alert("Clicked!");
});

　　在上面的例子中，由于CSS pointer-events值的原因，单击事件将不会触发。我发现了它的巨大作用，你不需要每处都检查className或属性来确保一些元素是否已经禁用了。
　　
　　折叠、展开菜单

　　CSS让我们可以创建过渡效果和动画，但是很多时候我们需要JavaScript库来帮助我们修改一些东西和控制动画。一个很流行的动画就是折叠、展开菜单效果，很多人都不知道只用CSS就可以实现！

复制代码代码如下:

.slider {
overflow-y: hidden;
max-height: 500px;

transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.slider.closed {
max-height: 0;
}

　　Max-height的一个巧妙使用能让元素按想要的效果来折叠和展开。

　　CSS计数器

　　“计数器”这个术语在网络上表示的意思经常让我们傻笑，但CSS 计数器是另一件更让我们傻笑的事。CSS计数器允许开发人员在指定的元素上用:before和:after来增加一个计数器：

复制代码代码如下:

ol.slides {
counter-reset: slideNum;
}

ol.slides > li {
counter-increment: slideNum;
}

ol.slides li:after {
content: "[" counter(slideNum) "]";
}

　　你经常见到CSS计数器被用在幻灯片效果上，和像表单内容的列表上。

　　Unicode CSS样式名

　　有许多CSS最好的实践文档，它们都是由如何给CSS样式命名开始的。你永远不会见到有个文档说的的用unicode符号来命名你的样式：

复制代码代码如下:

.ಠ_ಠ {
border: 1px solid #f00;
background: pink;
}

.❤ {
background: lightgreen;
border: 1px solid green;
}

　　请别用这些符号。除非你能行！

　　CSS圆

　　CSS三角形是一个技术活，CSS圆也同样如此。通过滥用CSS border-radius，你能创建很完美的圆！

复制代码代码如下:

circle {
border-radius: 50%;
width: 200px;
height: 200px;

}

　　你可以给你的圆增加渐变，你甚至可以使用CSS动画来让你的圆动起来！CSS即将有更多统一的API提供给这些图形，但现在你可以用这种方法来创建圆了。

　　你看到了，7件你能用CSS做的事让你很惊讶，其中一些是很有用的，一些可以在工作中用不到。请告诉我，我是否遗漏了一些在工作你经常使用优秀CSS方法。

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉

CSS可以做的几个令你叹为观止的实例分享

下载Word文档到电脑，方便收藏和打印～

下载Word文档

CSS可以做的几个令你叹为观止的实例分享

敲键小勇士

CSS可以做的几个令你叹为观止的实例分享

相关文章

猜你喜欢

分享几个可以助你提高效率的Vue指令

热门标签

编程热搜

怎么安装配置nodejs

Vue中Vue.extend()的使用及解析

NodeJs模拟登陆正方教务

如何让DIV水平垂直居中

css中怎么设置div背景颜色

nodejs怎么查看版本

html如何设置按钮文字

html如何设置div的透明度

JavaScript对象(详细)

html5 mui怎么使用

编程资源站

2021年下半年软考高级信息系统项目管理师高频考点精选资料

2021下半年软考高级信息系统技术知识点记忆口诀精选资料

2021下半年软考《信息系统项目管理师》考试真题及答案精选资料

2021下半年软考高级考试备考攻略精选资料

2021年软考高级《信息系统项目管理师》巩固练习题汇总精选资料

2021下半年软考高级信息系统项目管理师30个易考知识点汇总精选资料

2021下半年软考高级知识点这样记，还担心记不住吗精选资料

2021年下半年软考高级考试重点汇总精选资料

2021下半年软考高级信息系统项目管理师计算公式汇总精选资料

2021年下半年软考高级《信息系统项目管理师》模拟试题精选资料

信息系统项目管理师选择题每日一练（2024）历年试题

2023年下半年信息系统项目管理师综合知识真题演练历年试题

目录

CSS可以做的几个令你叹为观止的实例分享

CSS可以做的几个令你叹为观止的实例分享

相关文章

猜你喜欢

分享几个可以助你提高效率的Vue指令

热门标签

编程热搜

编程资源站

目录

感谢您的提交，我们服务专员将在30分钟内给您回复