css相关 - 随笔分类 - axl234

css3动画制作工具

摘要：1.从chrome webstore下载 chrome应用商店安装地址 2.直接下载crx文件如果无法访问到chrome的应用商城，可以选择下载app.crx文件,在chrome中打开chrome://extensions/页面，将app.crx插件拖动到扩展程序面板即可完成安装。下载地址 3.自阅读全文

posted @ 2017-08-14 11:11 axl234 阅读(215) 评论(0) 推荐(0)

css3实现画对号动画

摘要：目标：实现对号动画，慢慢画出来的感觉；原理：外层div的背景是一个对号图片，用一个div做遮罩，让遮罩div层从左到右做运动一次即可实现动画，需要注意的是遮罩div的初始位置应该在外层div的外面；代码如下：阅读全文

posted @ 2017-06-13 13:36 axl234 阅读(2997) 评论(0) 推荐(0)

CSS 变量

摘要：一、变量的声明声明变量的时候，变量名前面要加两根连词线（--）。上面代码中，body选择器里面声明了两个变量：--foo和--bar。它们与color、font-size等正式属性没有什么不同，只是没有默认含义。所以 CSS 变量（CSS variable）又叫做"CSS 自定义属性"（CSS 阅读全文

posted @ 2017-05-09 16:23 axl234 阅读(203) 评论(0) 推荐(0)

zoom和transform:scale的区别

摘要：一、IE和Chrome等浏览器与zoom 还在几年前，zoom还只是IE浏览器自己私有的玩具，但是，现在，除了FireFox浏览器，其他，尤其Chrome和移动端浏览器已经很好支持zoom属性了： zoom的字面意思是“变焦”，摄影的时候常用到的一个概念。对于web上的zoom效果，你也可以按照此概阅读全文

posted @ 2017-03-28 10:52 axl234 阅读(259) 评论(0) 推荐(0)

使用stylelint对CSS/Sass做代码审查

摘要：简介什么是代码审查代码审查是一个检查代码是否符合编程规范以及查找代码错误的过程，如果要做个比喻，那么它就是编程语言的拼写检查工具。代码审查可以帮助独立开发者更好的维护代码，但它更大的能力是帮助团队维护代码。为什么我们需要审查样式对样式进行审查的原因有很多，比如它可以维护代码的一致性，解析代码阅读全文

posted @ 2017-02-23 10:41 axl234 阅读(1430) 评论(0) 推荐(0)

Flexbox属性可视化指南

摘要：Flexbox 布局（国内很多人称为弹性布局）正式的全称为 CSS Flexible Box布局模块，它是CSS3新增的一种布局模式。它可以很方便地用来改善动态或未知大小的元素的对齐，方向和顺序等等。flex容器的主要特性是它可以调整其子元素的宽度或高度去填充可用的空白区，以最优的方式达到兼容不同屏阅读全文

posted @ 2016-10-24 15:21 axl234 阅读(488) 评论(0) 推荐(0)

rem布局下使用背景图片和sprite图

摘要：现在移动端页面用rem布局已经是一大流派了，成熟的框架如淘宝的flexiable.js，以及更轻量级的hotcss。用rem作单位使得元素能够自适应后，还有一块需要关注的，那就是背景图片。本文就来聊聊这方面的东西。 rem布局所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小，阅读全文

posted @ 2016-08-31 16:22 axl234 阅读(2046) 评论(0) 推荐(0)

移动端样式小技巧

摘要：平时在移动端开发拼页面的过程中总会遇到一些问题，主要是各手机webview样式显示效果不一致造成的。以下总结了一些常见坑和一些小技巧，希望对看官有所帮助！本文只针对两大手机阵营 Android和IOS 中的魅蓝metal 和 iPhone6进行样式对比。一、line-height line-he 阅读全文

posted @ 2016-08-18 13:58 axl234 阅读(458) 评论(0) 推荐(0)

60个有用CSS代码片段

摘要：1、垂直对齐如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑： (ps:【译】如何实现CSS居中？–CSS居中常用方法)使用这个技巧，从单行文本、段落到box，都会垂直对齐。目前浏览器对Transform的支持是需要关注的阅读全文

posted @ 2016-08-17 13:33 axl234 阅读(370) 评论(0) 推荐(0)

iOS 字体设置

摘要：使用无衬线字体 iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。需补充说明，华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5878)，但系统会自动将华阅读全文

posted @ 2016-08-15 13:29 axl234 阅读(572) 评论(0) 推荐(0)

关于iconfont

摘要：1. 从FONT-FACE说起要想了解iconfont，得从一个新的css3规则说起。css3中，新增了一种样式规则，@font-face，这个规则可以用来引入自定义的字体，到客户端。以前，我们的字体只能听任客户端的。因为用户没有安装的话，我们强制要求显示也没有办法。现在使用@font-face 阅读全文

posted @ 2016-08-10 15:08 axl234 阅读(475) 评论(0) 推荐(0)

Animate.css 教程

摘要：animate.css 是一个有趣，酷炫的，跨浏览器的动画库，你可以将它用于你的项目中。不管是主页，滑动切换，又或者是其它方面，你都可以通过它来制作出惊人的效果。基本用法基本用法引入CSS文件引入CSS文件这个对你来说应该再容易不过了，我相信你可能也已经对引入外部的CSS样式文件的代码以及阅读全文

posted @ 2016-07-12 12:57 axl234 阅读(5104) 评论(0) 推荐(0)

Flex布局

摘要：一、Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; } 阅读全文

posted @ 2016-03-01 21:59 axl234 阅读(432) 评论(0) 推荐(0)

CSS布局方案之圣杯布局

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>圣杯布局</title> <style type="t 阅读全文

posted @ 2016-02-17 15:19 axl234 阅读(368) 评论(0) 推荐(0)

移动端适配：font-size设置的思考

摘要：1. 问题的引出如果html5要适应各种分辨率的移动设备，可以使用rem这样的尺寸单位，针对各个分辨率范围在html上设置font-size的代码：html{font-size:10px}@media screen and (min-width:321px) and (max-width:375px... 阅读全文

posted @ 2016-01-25 11:23 axl234 阅读(64766) 评论(10) 推荐(23)

样式化复选框

摘要：复选框 Checkbox 是 Web 应用常用控件，随处可见，原生的复选框控件一般就像下面这样：这取决于操作系统和浏览器，有些时候，这种样子并不能满足设计要求，这时需要更为精致的复选框样式。以往只有少数浏览器才支持对这类控件应用样式，比如拿到这样一张设计图：blue.png在过去，想要通过简单地修改... 阅读全文

posted @ 2016-01-22 14:09 axl234 阅读(342) 评论(0) 推荐(0)

最全面的前端开发指南

摘要：HTML语义HTML5为我们提供了很多旨在精确描述内容的语义元素。确保你可以从它丰富的词汇中获益。 Blog post Published: 21st Feb, 2015 … Blog post Published: ... 阅读全文

posted @ 2015-12-18 19:20 axl234 阅读(271) 评论(0) 推荐(0)

视差响应动画滑动图片切换效果

摘要：这是一款非常强大的内容切换插件，它基于jQuery，它充分响应，支持移动设备，支持手机触摸，键盘翻页；它内置幻灯、视频播放计时器，它拥有各种模式：自定义，自动响应，全屏；它有多种动画效果、3d效果...总之你想到的效果它都做到了，它的名字叫Slider Revolution。HTMLSlider R... 阅读全文

posted @ 2015-11-26 11:52 axl234 阅读(1100) 评论(0) 推荐(0)

提示框插件SweetAlert

摘要：SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框，它将提示框进行了美化，并且允许自定义，支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。准备工作首先我们必须将SweetAlert插件的js文件和css文件引入到页面... 阅读全文

posted @ 2015-11-26 11:47 axl234 阅读(4183) 评论(0) 推荐(0)

CSSREM插件

摘要：CSSREM一个CSS的px值转rem值的Sublime Text 3自动完成插件。插件效果如下：安装下载本项目，比如：git clone https://github.com/flashlizi/cssrem进入packages目录：Sublime Text -> Preferences -> B... 阅读全文

posted @ 2015-11-21 14:47 axl234 阅读(3279) 评论(0) 推荐(0)

axl234

随笔分类 - css相关

公告