div { width:100px; height:100px; background:red; transition:width 2s; -webkit-transition:width 2s; /* Safar...

div

{

width:100px;

height:100px;

background:red;

transition:width 2s;

-webkit-transition:width 2s; /* Safari */

}

div:hover

{

width:300px;

}

注意：该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。

鼠标移动到 div 元素上，查看过渡效果。

.live > li::before{
  position: absolute;
  content: '\2022';
  font-family: Arial;
  color: #eee;
  top: 0;
  left: 0;
  text-align: center;
  font-size: 2em;
  opacity: .8;
  line-height: 1em;
  -webkit-transition: .5s;
          transition: .5s;
}

.live > li:hover::before{
  -webkit-transform: scale(2);
      -ms-transform: scale(2);
          transform: scale(2);
  opacity: 1;
  text-shadow: 0 0 4px;
  -webkit-transition: .1s;
          transition: .1s;
}

鼠标放上去变化遮罩程度和scale，演示效果 ...

不知道这样用的好处到底有多少？待了解。20180205排版通过几个变量就能轻松的设置字体、字号、行距等。Bootstrap 利用这些变量提供了简单地定制排版的功能。 @font-fa...

不知道这样用的好处到底有多少？待了解。20180205

排版

通过几个变量就能轻松的设置字体、字号、行距等。Bootstrap 利用这些变量提供了简单地定制排版的功能。

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;
@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

图标

以下两个变量用于设置图标文件的位置和文件名。 ...

响应式工具为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏...

响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。

有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。

可用的类

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：...

好像有一段时间没有写博客了……今天刚好总结一下rem的使用方法首先，先说一个常识，浏览器的默认字体高都是16px。步入正题-----〉兼容性：目前，IE9+，Firefox、Chr...

好像有一段时间没有写博客了……今天刚好总结一下rem的使用方法

1 /*16px * 312.5% = 50px;*/
2 html{font-size: 312.5%;}

1 /*50px * 0.5 = 25px;*/
2 body{
3     font-size: 0.5rem;
4     font-size\0:25px;
5 }