通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。 Chrome 和 Safari 需要前缀 -web ...
分类：
Web程序 时间：
2017-04-28 10:24:28
阅读次数：
266
无论transition还是keyframes，如何让变化更自然，这是前端应该考虑的问题。 这里，我简单总结下自己的方法。 以实践为例子。 1。图像渐变 效果如下： 2.颜色渐变 代码如下 效果如下 ok ,相信大家已经看出了其中的技巧：对称设置 (很奇怪，发布后为什么没有效果了呢？？？？) ...
分类：
Web程序 时间：
2017-04-27 13:28:03
阅读次数：
202
这是一组效果很炫酷的纯CSS3 Loading载入动画特效。这组loading动画共同拥有27种不同的效果。每一种loading动画都是通过CSS3的keyframes帧动画来完毕的，每个载入动画都构思新颖。效果很的酷。 效果演示：http://www.htmleaf.com/Demo/201503 ...
分类：
Web程序 时间：
2017-04-18 14:22:52
阅读次数：
179
1.边框圆角,边框阴影 2.背景图片的大小 3.文本效果 4.字体@font-face用的少，毕竟引入字体文件都是比较大的，得不偿失。（非必要情况勿用） 5.元素2D 移动、旋转、放大/缩小、翻转；3D X轴旋转、Y轴旋转 6.过渡效果transition 7.动画@keyframes、animat ...
分类：
Web程序 时间：
2017-03-30 18:45:35
阅读次数：
288
animation：通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器： 规定动画的名称 规定动画的时长 @keyframes：请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 animation-duration：默认值是 0 2s ...
分类：
其他好文 时间：
2017-03-30 16:13:18
阅读次数：
325
块级元素 display: block 特点： 默认宽度为父元素宽度 可以设置宽高 换行显示（前后都换行） CSS3新特性：圆角、阴影（box-shadow）、渐变、媒体查询、动画(@keyframes、animation、animation-duration等动画相关的所有属性) 、背景（back ...
分类：
Web程序 时间：
2017-03-14 13:30:10
阅读次数：
230
@keyframes film_out{ from{ transform: scale3d(1,1,1) rotate(0); opacity: 1; } to{ transform: scale3d(0.7,0.7,0.7) rotate(90deg); opacity: 0; } } div { ...
分类：
Web程序 时间：
2017-03-09 12:55:38
阅读次数：
210
第一种： css部分： <style> #foxtail{ background: url(../img/foxtail.png) 0 0 no-repeat; width: 156px; height: 156px; } @keyframes playfox{ 0%{background-posi ...
分类：
Web程序 时间：
2017-02-21 17:45:43
阅读次数：
316
CSS3 @keyframes 规则 实例 使一个div元素逐渐移动200像素： @keyframes mymove { from {top:0px;} to {top:200px;} }@-webkit-keyframes mymove /* Safari and Chrome */ { from ...
分类：
Web程序 时间：
2017-02-19 12:30:45
阅读次数：
309
<style type="text/css"> .demo{ animation-name: demoAnimation; 定义关键帧动画的名称 名称为我们使用@keyframes定义的动画 animation-duration: 2s;动画持续时间 animation-delay: 2s;设置动画 ...
分类：
其他好文 时间：
2017-02-15 13:46:58
阅读次数：
135
