<style> body{height:400px;border:1px solid #000;} .box{width:90px;height:30px;border:1px solid;border-radius:8px;background:linear-gradient(to top,red,orange);margin:200px auto;stransform:2s;-webkit-transform-origin:right,bottom;} .box a{text-decora…

14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现.此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的. 1.线性渐变 语法: background: linear-gradient(direction, color-stop1, color-stop2, ...); 说明: direction:默认为to…

css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值可为小数,不可为负值: 4.旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针: 5.倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜 2d转换的属性: transform transform-origin 用法: 例如: div { transform:…

transform:translate(x,y): 过度  鼠标悬浮 在2s内完成所有变化 div { width:100px; height:100px; background:red; transition: 2s; -webkit-transition: 2s; /* Safari */ } div:hover { width:300px; height:200px; } CSS3 动画 当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果. 指定至少这两个C…

在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和宽度,还有深度.我们将首先讨论元素在2D平面如何变换,然后我们在进入3D变换的讨论. CSS3 2D变换让Web设计师有了更多的自由来装饰和变形HTML组件.同时让设计师有更多的功能装饰文本和更多动画选项来装饰Div元素.在CSS3 2D变形中主要包含的一些基本功能如下. 位移translate()…

作者:Alex Rose Unity最近宣布推出额外的2D游戏支持,添加了Box 2D物理和一个精灵管理器. 但这里还是有些技巧需要牢记在心.逐帧更改图像只是动画制作的冰山一角,若要让你的游戏出色运行,你还得使用转换和旋转等功能. 现在让我们先从基本技巧开始. 更改帧 如果你已经准备好了制作动画的纹理,你可能会使用SpriteManager脚本的付费版本,或者Unity的新版本.假设你使用的是2D位面和纹理.这就是一个低效率的方法,但如果你是在制作一个game jam的项目,你可能会想塞入一些可…

通过css3的transform  transition可以实现平移,旋转,缩放,拉伸等效果 1.缩放 -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); 2.平移 -webkit-transform: translate(0px, 0px); -moz-transform: translate(0p…

本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一些比较特别的动画. 太阳系最终的效果图如下: css3的animation是通过关键帧的形式做出来的,首先设定一个动画的运行时间,然后在这个时间轴上的若干位置处插入关键帧,浏览器根据关键帧设定的内容做过渡动画.animation常结合transform属性进行制作.以一个简单的例子说明,以一个div…

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这些我想足以让大家激动了一阵子,今天我们趁着这个热劲继续第三个动画属性Animation的学习,单从Animation字面上的意思,我们就知道是“动画”的意思.但CSS3中的Animation与HTML5中的Canvas绘制动画又不同,Animation只应用在页面上已存在的DOM元素上,而且他跟Fl…

一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡出淡出效果,如果你想快速的整合各种CSS3动画特效的话,使用它即可方便的实现. 查看演示: https://daneden.github.io/animate.css/ github地址: https://github.com/daneden/animate.css 二.magic.css动画库 查…