想到以往默哀日访问网站时发现整站会变成全灰，即想到如果立即开始开发、设计图修改等工作也会消耗大量的时间与精力，那会不会有css可以直接处理所有的元素将他们变灰，随即想到了css3的filter（滤镜），并也证实了这一想法的可行性。 filter: grayscale 使用可以调整元素的灰度值 .gr ...
分类：
Web程序 时间：
2020-04-20 13:29:21
阅读次数：
97
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的 ...
分类：
Web程序 时间：
2020-04-13 15:26:03
阅读次数：
83
CSS3 多列属性 本章节我们将学习以下几个 CSS3 的多列属性: column-count 分割的列数 column-gap 列与列的间隙 column-rule-style 列与列间的边框样式 column-rule-width 列与列间的边框厚度 column-rule-color 列与列间 ...
分类：
Web程序 时间：
2020-04-12 18:45:04
阅读次数：
81
CSS3 动画 当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。 指定至少这两个CSS3的动画属性绑定向一个选择器： 规定动画的名称 规定动画的时长 <style> div.div1:hover { animation: myfirst 2s; //设置动画名称和 ...
分类：
Web程序 时间：
2020-04-11 22:22:17
阅读次数：
159
写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。 常见的页面布局 在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一种最合理的，结构清晰的布局。下面我先根据一些典型的网站案例列 ...
分类：
Web程序 时间：
2020-04-08 11:38:23
阅读次数：
61
最近几年，大屏幕手机和ipad等移动设备的流行，使你的网页兼容移动设备已成为一种流行！移动设备的屏幕大小是五花八门，各式各样！要想很好的兼容移动设备，Css3的media技术是功不可没。 我的博客，应用了CSS3的media技术，使其在手机等移动设备上面也可以查看。当然，只凭css3的media技术 ...
分类：
移动开发 时间：
2020-04-06 20:29:49
阅读次数：
96
仅仅使用div作为身体的布局，用css3的各种transform和圆角属性来绘制各个细节的形状，当然也不会使用任何图片哦。那就没意思了。 有的同学说，用canvas不是能画得更逼真而且更简单吗？这点我也非常赞同，但我的理由还是，那就没意思了。 这次用到了一些LESS的特性，通过设置一些指定的参数来生 ...
分类：
Web程序 时间：
2020-04-05 18:43:30
阅读次数：
85
今日在写一个阴影效果的时候遇到了一个小问题,不多说,上代码 div { width: 100px; height: 100px; background: #e3e3e3; border: 1px solid #333; box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); ...
分类：
Web程序 时间：
2020-04-04 18:39:19
阅读次数：
83
壹 ? 引 今天是四月四日清明节，也是全国哀悼抗疫烈士的一天。细心的同学可以发现，不仅是娱乐活动以及游戏全部停止，当我们打开各大门户网站，网站页面也都变成了黑白，那么具体怎么做呢，这里可以借用CSS3 的 filter滤镜属性，一个最简单的设置： 由于是CSS3属性，所以自然会存在兼容问题，我们通过 ...
分类：
Web程序 时间：
2020-04-04 11:54:25
阅读次数：
248
图片hover之后等比例放大，鼠标移开又等比例恢复原状，同时带有动画过渡效果 使用CSS3中的transform属性； ...
分类：
Web程序 时间：
2020-04-01 00:32:37
阅读次数：
96
