本篇文章是上一篇讲box-shadow基础知识的延伸，建议先花几分钟阅读那篇文章，点击阅读，再来看这篇。 除了box-shadow属性知识外，制作动画，还需要对CSS3的animation, @keyframes制作动画有所了解。 接下来，还是那张图。。 基本思路如下： 1.写好一个div，<div ...
分类：
Web程序 时间：
2018-12-20 00:57:48
阅读次数：
217
CSS 动画 一、使用 animation 和 @keyframes 二、使用 transition 属性 /** * css3 动画 * 使用 @keyframes规则与 animation * @keyframes规则用于创建动画，在 @keyframes中规定某项 css样式，就能创建由当前样 ...
分类：
Web程序 时间：
2018-12-15 13:35:17
阅读次数：
218
Keyframes介绍 Keyframes被称为 关键帧 ，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background: ...
分类：
Web程序 时间：
2018-12-07 21:56:55
阅读次数：
277
:link:visited:active:hover :focus 获取焦点的时候 animation:名称 持续时间 过渡类型 延迟时间 循环次数 是否反向;@keyframes 定义动画详情 ...
分类：
Web程序 时间：
2018-12-05 20:45:26
阅读次数：
295
一、@keyframe 目前浏览器都不支持 @keyframes 规则。 Firefox 支持替代的 @-moz-keyframes 规则。 Opera 支持替代的 @-o-keyframes 规则。 Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。 1.定义 ...
分类：
Web程序 时间：
2018-12-02 19:21:52
阅读次数：
901
animation-name:指定由@keyframes描述的关键帧； animation-duration:设置动画完成一个周期的时长； animation-timing-function:设置动画速度； animation-direction:设置动画是否反向播放；注意animation-dir ...
分类：
Web程序 时间：
2018-11-29 23:21:46
阅读次数：
463
.textShadowChange { animation: bilingbiling 2s ease infinite alternate; } @keyframes bilingbiling { from { text-shadow: 0 0 1px white, 0 0 2px white,.... ...
分类：
其他好文 时间：
2018-11-23 20:41:38
阅读次数：
200
动画 使元素从一种样式逐渐变化到另一种样式的 原理 人眼在看到画面的0.34 秒内，画面不会消失 在一幅画面还没消失之前，播放下一张画面 关键帧 @keyframes /* 动画的名称 */@keyframes animationname { keyframes-selector { /* （关键帧 ...
分类：
Web程序 时间：
2018-11-14 15:38:27
阅读次数：
233
我们经常会看到CSS3能制作出很炫酷的动画效果，但是自己却只能做一些简单的。原因是对CSS3动画只知其一，不知其二。最近正好有做动画的项目，于是花时间将css3动画做了一个探究之旅，记录在册。 动画是使元素从一种样式逐渐变化为另外一种效果，CSS3动画的生成，主要依赖 定义动画， 执行动画。 @ke ...
分类：
Web程序 时间：
2018-11-06 14:35:06
阅读次数：
511
