今天与大家来分享一下我做的css3动画案例。 　　在展示我的案例之前先给大家说说实现这个案例所需要的一些属性。 　　transform 属性允许我们对元素进行旋转、缩放、移动或倾斜。 　　通过 CSS3 2D转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸 ...

　　最终效果如图一，gif图片稍微有点卡顿，事实上代码在浏览器里执行得很流畅。这里面用到的css3技术非常简单，分别是border-radius、伪元素、css3关键帧以及animation动画。 　　首先整理一下大概的思路：整个圆分为AB两部分，左右都是半圆，上面盖了一个背景色为白色 ...

ul{width: 300px;border: red;}ul li{width: 300px;height: 70px;line-height: 70px;background: #fff;text ...

定义： 通过 @keyframes 规则，能够创建动画。 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。 在动画过程中，可以多次改变这套 CSS 样式。 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 0% 是动画 ...

在这之前，先来看一边animation的属性： @keyframes 创建一个动画 animation 属性是一个简写属性，用于设置动画属性 html代码： <div class="div"></div> css代码： .div{ width: 100 ...

我只是想实现一个类似迪士尼早期动画那样，一张图片从一个逐渐扩大的圆中钻出来的效果，没想到实际做起来却很复杂。 　自己研究半天，结果除了一个土办法之外，其他的统统不合适，我没有在原生css中找到一个可以“击穿”其他元素的方式。后来网上看到一个办法，他投机取巧地把border改得很大，起到一个 ...

会动的汉克狗： 小兔子动画： 自定义属性必须遵循CSS级联规则，使用:root 作用域来定义全局变量，由于自定义属性是全局的，为了避免冲突，最好按照统一的约定来命名变量，如果想让某个变量只在部分元素/组件下可见，只需要在特定的元素 ...

Css3文本与字体 文本阴影 word-break换行： word-wrap换行(中文无效)： 文本溢出时处理： 自定义字体 .ttf最常见字体，RAW格式，不做优化 .otf格式 .woff格式，web最佳格式，压缩版 ...