慢进慢出

这是与加速或减速有关。想象一个超速的汽车需要停下来。如果它瞬间就停下来,肯定没人信。我们知道汽车需要时间来减速,所以要先让汽车刹车并缓慢停止。

还有一个和重力相关的效果。想象儿童荡秋千。当他们达到最高点时会减速,当返回到最低点时又会加速。最快的速度出现在弧面的底部。然后上升到相反的方向,如此反复。

澳门微尼斯人手机版 1

回到我们的例子,调整进和出的速度可以让小球的运动(最终)更加可信。

当球撞击地面,碰撞会使起迅速弹回。当抵达最高点,它会减速。这样看起来小球像是真正的掉落。

在 CSS 中,我们可以控制 animation-timing-function 属性:

CSS

-webkit-animation-timing-function: ease-out;

1
-webkit-animation-timing-function: ease-out;

这些属性包含以下这些值:

  • ease-in 开始时缓慢,然后加速。
  • ease-out 开始时快速,然后减速直到停止。
  • ease-in-out 开始缓慢,一直加速到中段,然后减速直到停止。
  • linear 一直保持匀速。

你还可以使用贝塞尔曲线来创建自定义的缓动速度。

查看慢进慢出效果

技巧四

使用 class=”crayon-syntax crayon-syntax-inline crayon-theme-github crayon-theme-github-inline crayon-font-monaco”
style=”font-size: 13px !important; line-height: 15px !important;font-size: 13px !important;”> class=”crayon-pre crayon-code”
style=”font-size: 13px !important; line-height: 15px !important;font-size: 13px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;”> class=”crayon-v”>inherit 属性值继承其父元素样式来覆盖UA自带样式。

像 button 、 input 这样的表单控件,不同的浏览器都会有自己的样式风格(UA样式)。我们可以使用
inherit 继承其父元素样式,从而覆盖浏览器的UA样式。

CSS

button, input, select, textarea { color: inherit; font-family: inherit;
font-style: inherit; font-weight: inherit; }

1
2
3
4
5
6
7
8
9
button,
input,
select,
textarea {
    color: inherit;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
}

上面示例代码取自sanitize.css。normalize.css也是这样使用的。如果你不是这样使用,说明你已经…

你也可以尝试在 input[type=”range”] 、 input[type=”radio”] 和 input[type=”checkbox”] 等元素上直接使用前面介绍的currentColor属性自动匹配颜色。或许你不需要改变什么,可以将一个亮色系变成一个暗色系。

澳门微尼斯人手机版 2

理解CSS3中的background-size(对响应性图片等比例缩放)

2016/03/10 · CSS ·
background-size

原文出处:
涂根华   

background-size的基本属性

background-size:
可以设定背景图像的尺寸,该属性是css3中的,在移动端使用的地方很多,比如最常见的地方在做响应性布局的时候,比如之前做的项目中有轮播图片,为了自适应不同大小分辨率的图片,我门需要使用css3中的媒体查询来针对不同的分辨率设置宽度和高度,虽然这种方式是可以解决问题,但是解决方式并不是太好,并且很繁琐,当然我门也想过直接使用百分比设置图片的大小,比如width(宽度):
100%,height(高度):100%;
但是设置图片等高度100%的时候并不生效,图片没有显示出来,因为没有设置具体的高度值,浏览器渲染的时候并没有高度,因此当时解决的方法是使用css3中的媒体查询真对不同的分辨率等比例缩放不同的height(高度);今天我门重新来学习下background-size
这个具体的属性值,并且使用新的方法来解决针对响应性布局的背景图片自适应。

浏览器支持的程度:IE9+, Firefox4+, opera, chrome, safari5+;

基本语法:background-size: length | percentage | cover | contain; 

一:length

   
该属性值是设置背景图像的宽度和高度的,第一个值是宽度,第二个值是设置高度的。如果只设置第一个值,那么第二个值会自动转换为
“auto”;

二:percentage

    
该属性是以父元素的百分比来设置图片的宽度和高度的,第一个值是宽度,第二个值是高度。如果只设置一个值,那么第二个值会被设置为
“auto”;

三:cover

      把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

四:contain

      把图像扩展至最大尺寸,以使宽度和高度 完全适应内容区域。

给图片设置固定的宽度和高度的

下面我门来做一些demo来实现下上面的几个属性值的基本使用方法;

基本的原图的html代码如下:

<h3>原图</h3> <div class=”images”><img
src=””
width=”100%”/></div>

1
2
<h3>原图</h3>
<div class="images"><img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg" width="100%"/></div>

效果如下图所示:

澳门微尼斯人手机版 3

给图片设置固定的宽度和高度的代码如下:

比如设置 固定宽度400px和高度200px后的图片;

HTML代码如下:

<h3>固定宽度400px和高度200px后的图片</h3> <div
class=”bsize1″></div>

1
2
<h3>固定宽度400px和高度200px后的图片</h3>
<div class="bsize1"></div>

css代码如下:

.bsize1 { width:400px; height:200px;
backgroundnull:url(“”)
no-repeat; border:1px solid red; overflow: hidden; }

1
2
3
4
5
6
7
.bsize1 {
     width:400px;
     height:200px;
     background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat;
     border:1px solid red;
     overflow: hidden;
  }

效果如下:

澳门微尼斯人手机版 4

固定宽度400px和高度200px-使用background-size:400px 200px缩放设置

  1. 固定宽度400px和高度200px-使用background-size:400px 200px缩放设置;

HTML代码如下:

<h3>固定宽度400px和高度200px-使用background-size:400px
200px缩放设置<h3> <div class=”bsize1 bsize2″><div>

1
2
<h3>固定宽度400px和高度200px-使用background-size:400px 200px缩放设置<h3>
<div class="bsize1 bsize2"><div>

css代码如下:

.bsize2 { background-size: 400px 200px; }

1
2
3
.bsize2 {
         background-size: 400px 200px;
  }

效果如下:

澳门微尼斯人手机版 5

固定宽度400px和高度200px-使用background-size:400px;的缩放设置

3.
固定宽度400px和高度200px-使用background-size:400px;的缩放设置,那么第二个参数会自动转换为auto;

HTML代码如下:

<h3>固定宽度400px和高度200px-使用background-size:400px;的缩放设置<h3>
<div class=”bsize1 bsize3″><div>

1
2
<h3>固定宽度400px和高度200px-使用background-size:400px;的缩放设置<h3>
<div class="bsize1 bsize3"><div>

css代码如下:

.bsize3 { background-size: 400px; }

1
2
3
.bsize3 {
         background-size: 400px;
}

效果如下:

澳门微尼斯人手机版 6

固定宽度400px和高度200px-使用background-size:100% 100%的缩放设置

  1. 固定宽度400px和高度200px-使用background-size:100% 100%的缩放设置

HTML代码如下:

<h3>固定宽度400px和高度200px-使用background-size:100%
100%的缩放设置<h3> <div class=”bsize1 bsize4″><div>

1
2
<h3>固定宽度400px和高度200px-使用background-size:100% 100%的缩放设置<h3>
<div class="bsize1 bsize4"><div>

css代码如下:

.bsize4 { background-size:100% 100%; }

1
2
3
.bsize4 {
        background-size:100% 100%;
  }

效果如下:

澳门微尼斯人手机版 7

固定宽度400px和高度200px-使用background-size:100%的缩放设置

  1. 固定宽度400px和高度200px-使用background-size:100%的缩放设置。

HTML代码如下:

<h3>固定宽度400px和高度200px-使用background-size:100%的缩放设置<h3>
<div class=”bsize1 bsize5″><div>

1
2
<h3>固定宽度400px和高度200px-使用background-size:100%的缩放设置<h3>
<div class="bsize1 bsize5"><div>

css代码如下:

.bsize5 { background-size: 100%; }

1
2
3
.bsize5 {
         background-size: 100%;
  }

如下所示:

澳门微尼斯人手机版 8

使用属性cover来设置背景图片

  1. 使用属性cover来设置背景图片。

HTML代码如下:

<h3>使用属性cover来设置背景图片<h3> <div class=”bsize1
cover”><div>

1
2
<h3>使用属性cover来设置背景图片<h3>
<div class="bsize1 cover"><div>

css代码如下:

.cover { background-size:cover; }

1
2
3
.cover {
        background-size:cover;
}

效果如下:

澳门微尼斯人手机版 9

使用属性contain来设置背景图片

  1. 使用属性contain来设置背景图片。

HTML代码如下:

<h3>使用属性contain来设置背景图片<h3> <div class=”bsize1
contain”><div>

1
2
<h3>使用属性contain来设置背景图片<h3>
<div class="bsize1 contain"><div>

css代码如下:

.contain { background-size:contain; }

1
2
3
.contain {
        background-size:contain;
  }

效果如下:

澳门微尼斯人手机版 10

给图片设置width属性100%;高度自适应

8.  下面我门使用图片来做,不使用背景图片等情况下,给图片设置属性 width
= 100%的话,它的高度会自适应的。如下HTML代码:

<h3>给图片设置属性宽度为100%的情况下,可自适应图片<h3>
<div class=”bsize-padding”><img
src=””
width=”100%”/><div>

1
2
<h3>给图片设置属性宽度为100%的情况下,可自适应图片<h3>
<div class="bsize-padding"><img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg" width="100%"/><div>

效果如下:

澳门微尼斯人手机版 11

使用另一种方式来解决图片自适应的问题--图片自适应问题

9.
使用另一种方式来解决图片自适应的问题--图片自适应问题,图片宽度设置100%,页面加载时会存在高度塌陷的问题,可以使用padding-top来设置百分比值来实现自适应
padding-top = (图片的高度/图片的宽度)*100;

如下HTML代码:

<h3>图片自适应问题,图片宽度设置100%,页面加载时会存在高度塌陷的问题</h3>
<p>可以使用padding-top来设置百分比值来实现自适应 padding-top =
(图片的高度/图片的宽度)*100</p> <div
class=”cover-paddingTop”> <img
src=”;
</div>

1
2
3
4
5
<h3>图片自适应问题,图片宽度设置100%,页面加载时会存在高度塌陷的问题</h3>
<p>可以使用padding-top来设置百分比值来实现自适应 padding-top = (图片的高度/图片的宽度)*100</p>
<div class="cover-paddingTop">
      <img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg"/>
</div>

css代码如下:

.cover-paddingTop { position: relative; padding-top: 50%; overflow:
hidden; } .cover-paddingTop img{ width:100%; position: absolute; top:0;
}

1
2
3
4
5
6
7
8
9
10
.cover-paddingTop {
       position: relative;
       padding-top: 50%;
       overflow: hidden;
  }
.cover-paddingTop img{
      width:100%;
      position: absolute;
      top:0;
  }

效果如下:

澳门微尼斯人手机版 12

使用padding-top:(percentage)实现响应式背景图片

  1. 使用padding-top:(percentage)实现响应式背景图片

我门都知道,处理在响应性布局的时候,背景图片都是等比例缩放,比如上面的使用图片的情况,使用
引入的图片的话,那么设置她们的width属性为100%;澳门微尼斯人手机版 13
的话,高度就会等比例缩放,这是图片,但是如果是背景图片呢?我门之前的项目中的常见的做法是根据css3媒体查询的方法来做的,根据不同手机的分辨率等不同,来等比例缩放背景图的高度,虽然这种方式是可以解决问题的,但是这种通过人肉的方式来进行设置并不好,也很繁琐,今天我门来学习使用padding-top这么一个属性来设置了;

实现的基本原理:将使用到保持元素的宽高比的技巧,为元素添加垂直方向的padding-top的值,使用百分比的形式,这个值是相对于元素的宽而定的,比如我上面的一张图片的宽度是1024px,高度为316px;那么现在的

padding-top = (高度 / 宽度 )* 100% = (316 / 1024)* 100% = 
30.85%;

但是仅仅对图片高度和宽度缩放的放还不够,我门还必须添加
background-size:cover,
使这个属性让背景铺满元素的,但是IE8及以下不支持该属性,因此为了兼容IE下面的浏览器,我门还需要再加一个属性
background-position: center ; 同时我门也要保证
图片的宽度最大等于父容器的宽度;因此下面的HTML代码如下:

<h3>使用padding-top实现响应性图片(图片的宽度是1024px,高度是316px)</h3>
<div class=”column”> <div class=”figure”></div>
</div>

1
2
3
4
<h3>使用padding-top实现响应性图片(图片的宽度是1024px,高度是316px)</h3>
<div class="column">
       <div class="figure"></div>
  </div>

css代码如下:

.column{ max-width: 1024px; } .figure { padding-top:30.85%; /* 316 /
1024 */
backgroundnull:url(“”)
no-repeat; background-size:cover; background-position:center; }

1
2
3
4
5
6
7
8
9
.column{
        max-width: 1024px;
}
.figure {
         padding-top:30.85%; /* 316 / 1024 */
         background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat;
          background-size:cover;
          background-position:center;
    }

效果如下:

澳门微尼斯人手机版 14

注意:具体的效果可以自己复制代码到浏览器运行下即可~

1 赞 4 收藏
评论

澳门微尼斯人手机版 15

挤压和拉伸

澳门微尼斯人手机版 16

这个弹跳球为压扁和拉伸做了很好的展示。如果弹球高速下落并撞击地面,你可以观察到它被挤扁然后在弹回的过程中被拉伸。

在基本常识层面,这个例子让我们的动画有了重量和伸缩的感觉。如果扔一个保龄球,我们不会期待它有任何拉伸,很可能只是会撞坏地面。

可以通过CSS3的属性 transform 来产生压扁和拉伸的效果。

CSS

@-webkit-keyframes example { 0% { -webkit-transform: scaleY(1.0); } 50%
{ -webkit-transform: scaleY(1.2); } 100% { -webkit-transform:
scaleY(1.0); } }

1
2
3
4
5
@-webkit-keyframes example {
   0% { -webkit-transform: scaleY(1.0); }
   50% { -webkit-transform: scaleY(1.2); }
   100% { -webkit-transform: scaleY(1.0); }
}

这段代码会将物体纵向(y轴,上下)的比例改变为原始比例的1.2倍,然后回复到原始尺寸。

我们还为这个动画使用了稍微复杂一点的定时器。对于基础动画只需要起始(from)和结束(to)就可以了。但你也可以通过白分比的方式为每个时间点设置动画,就像代码所展示的那样。

挤压效果已经实现了。现在我们利用转换(translate)来移动物体。我们可以它将形变放在一起。

CSS

50% { -webkit-transform: translateY(-300px) scaleY(1.2); }

1
2
3
50% {
-webkit-transform: translateY(-300px) scaleY(1.2);
}

转换属性允许我们在不改变基础属性(如
位置、宽度、高度)的前提下操作物体,这就使其非常适合CSS动画。这个特别的转换属性让小球在动画的中间点从地面弹起。

(请注意:要查看这个动画,你需要最新版的Firefox、Chrome或Safari。笔者书写这段文字的时候,Safari浏览器提供了最佳视觉体验。)

(译者注:现如今主流的浏览器都已经能很好的实现动画效果了)

查看挤压和拉伸的效果.

没错,小球看起来还是很糙,不过这个小小的调整是让动画变得逼真的第一步。

CSS小技巧

2015/09/30 · CSS ·
CSS

原文出处:
simurai   译文出处:大漠   

CSS中的级联(cascade)在同一时间可谓是幸福的,也可以说是痛苦不堪的。通常能工作得非常好,但有问题的时候,也让人们都很激动,甚至事件中也离开不CSS。我们所涉及的不仅是CSS的级联也还涉及到CSS的权重。不是说碰到特殊问题才显得困难,可以说CSS的困难无处不在。

在这篇文章中,我将通过一些示例来向大家展示一些CSS的小技巧,让你知道如何使用CSS的级联能变得更友好,也减少一些不必要的需求,从而也减少权重上遇到的麻烦。

舞台

澳门微尼斯人手机版 17

现在试试把舞台添加到场景中,将动画放入环境中。回顾一下迪士尼的电影,如果去掉了奇妙的背景会变成什么样?这是魔法的半壁江山。

舞台也是吸引注意的关键元素。与剧院的舞台一样,光线总是照射到最重要的区域。舞台应该加入到视野中。除了弹球,我为弹球的降落添加了一个简单的背景。这样看客就知道舞台的中央会出现动画,场景也就可以从一片大白雪(白色区域)中脱颖而出了。

技巧二

样式总是作为特定属性组合出现

一个很好的例子就是 color 和 bakground-color 的组合。除非你只做小调整,不然你需要一起调整他们。当给一个元素添加背景颜色时,它可能不包含任何文本,但可能会有一些子元素。因此,我们一起设置前景色(color)和背景色(background-color),我们总是可以确定这些元素不会遇到任何易读性和对比问题。下次我们改变背景色时,不需要到处寻找需要修改的文本颜色,因为他们都以一个组合的形式出现在一起。

澳门微尼斯人手机版 18

使用传统动画原理

在我看来,传统动画的鼻祖迪斯尼,早期在著名的图书《Illusion of
Life》里创立了传统动画的12条原则。这些基础原则可以应用到所有类型动画,不过你并不需要像动画专家一样遵循。我们将这12条原则运用到CSS动画实例上,把一个基础动画转变成更加可信的视觉幻象。

虽然只是蹦蹦跳跳的小球,但你可以看出两个版本中的不同世界。

这个例子展示了CSS动画特性。下面的代码中,我们用一些空div元素来展示如何运作;我们都知道这代码不够语义化,但重点在于它将页面变得生动起来,这在以前的浏览器中是绝对做不到的。

技巧一

每当你写CSS时,你想尽可能的回到树形顶部。换句话说,回到:root

例如,我们的网站有一个侧边栏,希望在这个侧边栏上添加一个简短的个人介绍。其HTML的结构看起来可能会像这样:

<body> <main class=“Posts”> <aside class=“SideBar”>
<nav class=“Nav”> <p class=“Bio”>

1
2
3
4
5
<body>
    <main class=“Posts”>
    <aside class=“SideBar”>
        <nav class=“Nav”>
        <p class=“Bio”>

CSS是这样写的:

CSS

.Bio { font-size: .8em; line-height: 1.5; color: #888; }

1
2
3
4
5
.Bio {
    font-size: .8em;
    line-height: 1.5;
    color: #888;
}

这样写是能正常工作的,并不存在样式上的问题。但是,侧边栏还有一个导航
nav ,很有可能他们有一些样式是相同的。在我们这个示例中
font-size 和 color 都是相同的。让我们把这些属性从
nav 和 .Bio 中提取出来,并且将它们添加到其父元素
.SideBar 中:

CSS

.SideBar { font-size: .8em; color: #888; }

1
2
3
4
.SideBar {
    font-size: .8em;
    color: #888;
}

事实证明,在 .Posts 中已经设置了 line-height:1.5; 。似乎整个页面都使用了相同的行高,那么我们可以将
.Bio 和 .Posts 中的 line-height 移到根元素中:

CSS

:root { line-height: 1.5; }

1
2
3
:root {
    line-height: 1.5;
}

这看起来是一个CSS常识,但他也不会太关注兄弟元素定义同样的事情。这也让你发现,有一些代码产生重复。其实这并不可怕,因为我们只需要花点时间重新重构代码,但这样保持了CSS的代码处理健康状态。

澳门微尼斯人手机版 19

在树支上写样式,而不应该在树叶上写样式

夸张

卡通片以夸张或难以置信的物理特性著称。一个卡通人物可以变形成任何形状然后在恢复正常。在很多应用场景中,通过夸张来突出,让动画富有活力。否则看起来会很平淡。

尽管如此,使用夸张效果时需要谨慎。迪士尼有一个符合现实原则的方法,但稍微推进了一步。想象一个角色朝墙里跑,它的身体会被压扁的特别夸张,用来强调碰撞的力量。

我们使用挤压和拉伸的夸张手法让小球对地面的撞击更加明显。我还为动画添加了更精致的摇晃。最后,我们在球的弹跳过程中拉伸小球来突出速度感。

就像之前添加动画的做法一样,我们再添加一个 div
元素,这个元素使小球撞击地面时同时产生摇晃。

CSS

@-webkit-keyframes wobble { 0%, 24%, 54%, 74%, 86%, 96%, 100% {
-webkit-transform: scaleX(1.0); /* Make the ball a normal size at these
points */ } 25%, 55%, 75% { -webkit-transform: scaleX(1.3) scaleY(0.8)
translateY(10px); /* Points hitting the floor: squash effect */ } 30%,
60%, 80% { -webkit-transform: scaleX(0.8) scaleY(1.2); /* Wobble
inwards after hitting the floor */ } 75%, 87% { -webkit-transform:
scaleX(1.2); /* Subtler squash for the last few bounces */ } 97%
-webkit-transform: scaleX(1.1); /* Even subtler squash for last bounce
*/ } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@-webkit-keyframes wobble {
 
0%, 24%, 54%, 74%, 86%, 96%, 100% {
   -webkit-transform: scaleX(1.0);
/* Make the ball a normal size at these points */
}
 
25%, 55%, 75% {
   -webkit-transform: scaleX(1.3) scaleY(0.8) translateY(10px);
/* Points hitting the floor: squash effect */
}
 
30%, 60%, 80% {
   -webkit-transform: scaleX(0.8) scaleY(1.2);
/* Wobble inwards after hitting the floor */
}
 
75%, 87% {
   -webkit-transform: scaleX(1.2);
/* Subtler squash for the last few bounces */
}
 
97% -webkit-transform: scaleX(1.1);
/* Even subtler squash for last bounce */
}
 
}

这段代码看起来比之前复杂了不少。这是简单的试错。在找到合适的效果钱需要反复尝试。

查看夸张效果

总结

这些都是好东西,当然并不是强迫大家使用。我想说,这些小技巧,简单实用,让你的Web站点能获取最大的好处。即使你使用一个CSS预处理器,他们也不会有损代码的输出量减少,甚至可以少设置几个变量。

也适合单一类名,比如像Tachyons。或许还能减少复杂性和所需的类。

另外一个有趣的事情即将到来,那么在CSS中也可以自定义属性,也就是CSS变量。与预处理器不同,覆盖自定义属性时,它只会影响当前的选择范围。所以从某种意义上来说,他们是“层叠变量”。但我还是想试试,看看它是如何工作的。

1 赞 5 收藏
评论

澳门微尼斯人手机版 15

辅助动画

辅助动画是让动画显得更加真实的微妙之处。辅助动画致力于细节。打个比方,如果有一个留着长发的人行走,主动作是行走,辅助动作是头发的摆动,或者也可能是衣服的褶皱随风变化。

我们的例子和这个非常相似。为了增加小球的更多细节,我们制作小球纹理的辅助动画。这样就造成了小球是被扔进来的错觉。

这次不再为这个动画添加另一个div元素,我们添加一个 img
图像元素充当小球的纹理。

CSS

.ball img { -webkit-animation: spin 2.5s; } @-webkit-keyframes spin { 0%
{ -webkit-transform: rotate(-180deg); } 100% { -webkit-transform:
rotate(360deg); } }

1
2
3
4
5
6
7
8
.ball img {
-webkit-animation: spin 2.5s;
}
 
@-webkit-keyframes spin {
   0% { -webkit-transform: rotate(-180deg); }
   100% { -webkit-transform: rotate(360deg); }
}

查看辅助动画

技巧三

使用动态值,比如currentColorem

有时候文本颜色也会使用在其他属性上。比如说borderbox-shadow或者SVG图标中的fill上。定义相同颜色有一个替代方案,可以直接使用currentColor。默认情况下,color是可以继承的,你只需要在一个地方修改就可以改变其他属性的颜色。

同样的,给font-size属性使用em单位,允许你只修改:rootfont-size就可以改变元素的盒模型大小。

有关于这方面更多的细节,可以查阅《使用字符串(STRINGS)设置样式》一文。

澳门微尼斯人手机版 21

发表评论

电子邮件地址不会被公开。 必填项已用*标注