CSS3 实现人物赛跑动画

Create at 2015 05 217 min read技术CSS3奔跑

最近公司的一个手机项目里面有一个动画,就是一个人在跑道上跑步。为了能在手机端发挥更好的性能,选择了全部用 CSS3 来做一个动画。 因为是第一次做,碰到了很多问题,记录下来。

效果图是这样的: All

分析

拿到效果图先分析一下,可以看到动画分为一下四个部分:

  • 跑动的小人
  • 运动的路
  • 左边的路牌
  • 收益的牌子

小人

小人很好解决,通过使用一张跑步的分解图片, person 然后通过逐帧的变动它的`background-position'就可以了,真是简单啊。

.person {
    width: 62px;
    height: 110px;
    background: url(../imgs/p

翘边阴影制作方法

Create at 2015 01 262 min read技术CSS3

一些特殊阴影的制作方法,其实就是将多个图形叠加在一起,然后通过z-index调整前后顺序,最后实现效果翘边阴影

HTML:

<li><img src="img/1.gif" alt="img" /></li>

CSS:

li::after {
  content: "";
  width: 90%;
  height: 80%;
  left: 1.6%;
  bottom: 4.6%;
  position: absolute;
  background-color: transparent;
  box-shad

css3选择器整理

Create at 2015 01 225 min read技术CSS3学习笔记

属性选择器

  • E[att^="val"]:选择att属性值以val开头的 E 元素。
  • E[att$="val"]:选择att属性值以val结尾的 E 元素。
  • E[att*="val"]:选择att属性值包含val的 E 元素。

结构性伪类选择器

:root: 根选择器,匹配元素所在文档的根元素。在HTML中,根元素始终为<html>:not : 否定选择器,选择某元素以外的所有元素。下面的代码,最终会为

前端开发学习笔记五

Create at 2015 01 012 min read技术学习笔记JavaScriptCSS3

幽灵按钮最近很流行,就寻思着做了一个,它有如下一些效果。 5-1

其中按钮上的线条和图标的旋转完全用CSS3中的transtiontransform来实现,其中图标的旋转效果实现过程如下:

.link .img{
    display: block;
    width:180px;
    height:180px;
    margin-bottom: 20px;
    -webkit-transition:all 0.5s cubic-bezier(0, .18, 0, .97);    //为了兼容chrome和Safari
    transition:all 0.5s cubic-bezier(0, .18, 0, .97);        //定义动画属性,包括要变化的属性,时间,以及变化曲线(linear、ease、ease-out或者自定义等)
}