- Sublime Text 的插件推荐 11-25
- jQuery炫酷特效之遮罩移动效果 11-25
- 做网站开发之前，你需要知道这些 11-25
- CSS实现全景图移动效果！ 11-25
- css 中 supports 检测浏览器是否支持某项 11-25
- 多重背景CSS动画 11-25
- 原生css，js实现图片切片旋转 11-25
- CSS font-size 属性 11-25
- 一个超级快速的CSS引擎：Quantum CSS（又 11-25
- css实用导航下划线菜单效果 11-25
Sublime Text 的插件推荐
发布者: superzhang | 发布时间:2017-11-25Sublime Text 是一个代码编辑器（Sublime Text 2是收费软件，但可以无限期试用），也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。
Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。
1 Emmet
功能：编码快捷键，前端必备
简介：Emmet作为zen coding的升级版，对于前端来说，可是必备插件，如果你对它还不太熟悉，可以在其官网上看下具体的演示视频。
使用教程： http:
jQuery炫酷特效之遮罩移动效果
发布者: superzhang | 发布时间:2017-11-25今天带领大家实现一个非常炫酷的遮罩效果。遮罩跟随鼠标的移入点移入区块中（鼠标从区块左侧移入则遮罩也从左侧移入，鼠标从左侧移出遮罩也会左侧移出，其它方向同理），可以将这样一个效果应用到自己到网页中：
炫酷遮罩层
一、准备工作
先想一想这样到一个效果该如何实现呢？HTML结构该怎么搭建？
......
来看看基本到HTML结构是如何到：
HTML结构
CSS：
二、程序方面：
1.编程语言
首先是HTML，这是最基础的。
等学会了HTML跟CSS语言之后，下面就得选
CSS实现全景图移动效果！
发布者: superzhang | 发布时间:2017-11-25鼠标放在图片上时，图片自动移动，到尽头后，反向移动
首先我们给的图片尺寸：3320*1352
先将图片放在一个300*200的div盒子中
HTML结构：
先将图片作为背景图：
定义一个动画，设置动画效果：
使用动画效果，设置动画状态为暂停：
 {/* 各种样式 */}<p>最基本用法：</p>@supports (display: flex) {div { display: flex; }}<p>用or 和 and 串联检查：</p>/* or */@supports (display: -webkit-flex) or(display: -moz-flex) or(display: flex) {/* use styles here */}/* and */@supports (display: flex) and (-webkit-appearance: caret) {/* something crazy here */}<p>用括号将多个条件进行嵌套关联：</p>/* and and or */@supports ((display: -webkit-flex) or(display: -moz-flex) or(display: flex)) and (-webkit-appearance: caret) {/* use styles here */}<p>JavaScript CSS.su</p><p><a href='internet/internet_229470.html'> 想读更多 -></a></p></div><div class='art bs'><h1><a href='internet/internet_229469.html'>多重背景CSS动画</a></h1><span class='art_des'>发布者: superzhang | 发布时间:2017-11-25</span><p><p>CSS代码</p><p>给一个页面元素设置多个背景图片，这种技术很早就可行了，你只需要用逗号把各个背景分隔开：</p>.animate-area{background-image: url(twitter-logo-bird.png), url(treehouseFrog.png), url(bg-clouds.png);background-position: 20px -90px, 30px 80px, 0px 0px;background-repeat: no-repeat, no-repeat, repeat-x;}<p>需要注意的是，你希望出现在最上层的背景图应该放在图片队列的第一位。让这些背景图片动起来需要变化background-position，也是用逗号分隔：</p>@keyframes animatedBird {from { background-position: 20px 20px, 30px 80px, 0 0; }to { background-position: 300px -90px, 30px 20px, 100% 0; }}.animate-area{animation: animatedBird 4s linear infinite;}<p>这样做的结果就是三种背景在同一个元素上移动！</p><p>当然，这样实现的并不是最理想的效果，你</p><p><a href='internet/internet_229469.html'> 想读更多 -></a></p></div><div class='art bs'><h1><a href='internet/internet_229468.html'>原生css，js实现图片切片旋转</a></h1><span class='art_des'>发布者: superzhang | 发布时间:2017-11-25</span><p><p>原生css，js实现图片切片旋转，图片切片旋转360°回到原点。</p><p>效果图：</p><p><img src=){kind=logo}
代码
html+css:
属性定义及使用说明
font-size属性设置字体大小。
默认值：medium继承：yes版本：CSS1JavaScript 语法：object.style.fontSize="larger"浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
属性font-size1.05.51.01.07.0而Servo的第一个主要组件 - 名为Quantum CSS（以前称为Stylo）的新CSS引擎 - 现在可以在我们的Nightly版本中进行测试。您可以通过转到about:config并设置layout.css.servo.enabled为true 来确保它已打开。
这款新引擎将来自四个不同浏览器的最先进的创新融合在一起，以创建一个新的超级CSS引擎。
每个导航文字下面的下划线会随着鼠标的移上由左到右缓慢的过渡
实现该效果的方法如下
首先是html布局：
css样式：
