transform

动画(CSS3) 动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 语法格式： animation : 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 ; 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意 @keyframes 动画名称 { from { 开始位置 } 0% to { 结束 } 100% } animation-iteration-count:infinite; 无限循环播放 animation-play-state:paused; 暂停动画" 小汽车案例 body { background : white ; } img { width : 200px ; } .animation { animation-name : goback ; animation-duration : 5s ; animation-timing-function : ease ; animation-iteration-count : infinite ; } @keyframes goback { 0% { } 49% { transform : translateX ( 1000px ) ; } 55% { transform : translateX ( 1000px ) rotateY (

< style type = "text/css" > /* 外层旋转 */ @keyframes slowspin { 0 % { transform : rotateX ( - 33.5 deg ) rotateY ( 45 deg ) } 10 % , to { transform : rotateX ( - 33.5 deg ) rotateY ( 225 deg ) } } /* 内层旋转 */ @keyframes fastspin { 0 % { transform : rotateX ( - 33.5 deg ) rotateY ( 45 deg ) } 10 % , to { transform : rotateX ( - 33.5 deg ) rotateY ( - 315 deg ) } } . logo { width : 100 % ; height : 220 px ; position : relative ; overflow : hidden } . cube { width : 100 % ; height : 100 % ; padding : 0 ; margin : - 50 px 0 ; transform - origin : 50 px 50 px ; transform : rotateX ( - 33.5 deg )

2D动画的两个属性： transform：针对一个元素只能用一次不能一次写给多个元素。 transition all 2s 过度效果，写在过度之前的样式里，不能写在hover里 < ! DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > < / title > < style type = "text/css" > div { width : 100 px ; height : 100 px ; background - color : red ; margin - left : 20 px ; text - align : center ; line - height : 100 px ; transition : all 3 s ; } . div1 : hover { transform : rotateZ ( 180 deg ) scale ( 2 , 2 ) ; } < / style > < / head > < body > < ! -- 1 旋转 -- 度 deg > -- > < div class = "div1" > 文字 < / div > < ! -- 2 位移 -- 像素 px > -- > < div class = "div2" style =

transform属性 一、translate属性与其他属性组合导致的特殊问题 scale与translate组合 rotate与translate组合 skew与translate组合 二、其他属性 transform-origin 变换基点 transform-style backface-visibility perspective transform 有四个属性： 位移：translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)   % ——相对于自身宽高的百分比   px 缩放：scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,yz) 旋转：rotate(angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle)、rotate3d(x,y,z,angle)   deg 斜切：skew(x-angle,y-angle)、skewX(angle)、skewY(angle)   deg 如果 translate 、skew 只有一个参数，就代表 translateX 、skewX； 如果scale 只有一个参数，代表 scale (x , y) 一

幸运的数字转盘（Turntable） 示例 HTML CSS JS 示例 HTML < h1 > Give me a whack </ h1 > < div id = " spinner " > < svg xmlns = ' http://www.w3.org/2000/svg ' xmlns: xlink = ' http://www.w3.org/1999/xlink ' viewBox = ' 0 10 20 60 ' id = " clicker " > < path d = " M 3 20 Q 10 0 17 20 Q 10 100 3 20 " fill = " #ddd " /> </ svg > < svg xmlns = ' http://www.w3.org/2000/svg ' xmlns: xlink = ' http://www.w3.org/1999/xlink ' viewBox = ' 0 0 100 100 ' id = " wheel " > < mask id = " splineMask " > < rect x = " 0 " y = " 0 " width = " 100 " height = " 100 " fill = " white " /> < path d = " M48.5 33 Q 50 35 51.5 33 Q 50

css3新特性： 1.css3重要模块： 1.1选择器 1.2盒模型 1.3背景和边框 1.4文字特效 1.5 2D/3D转换 1.6动画 1.7多列布局 1.8用户界面 css3可继承的属性： 字体：font，font-size，font-weight，font-family，font-style，font-variant， 颜色：color。 列表：list-style，list-style-type，list-style-position，list-style-image. 文字：letter-spacing，word-spacing，white-space，line-height，text-decoration，text-transform，text-indent，text-align。 所有元素可继承：visibility和cursor。 2.css3边框 2.1 border-radius//圆角 <div>border-radius</div> div{ border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:30px; border-radius:25px; -webkit-border-radius:25px; -ms-border-radius:25px; -o-border

1.前言 css3这个相信大家不陌生了，是个非常有趣，神奇的东西！有了css3，js都可以少写很多！我之前也写过关于css3的文章，也封装过css3的一些小动画。个人觉得css3不难，但是很难用得好，用得顺手，最近我也在过一遍css3的一些新特性（不是全部，是我在工作上常用的，或者觉得有用的），以及一些实例，就写了这一篇总结！希望，这篇文章能帮到大家认识css3。写这篇文章主要是让大家能了解css3的一些新特性，以及基础的用法，感觉css3的魅力！如果想要用好css3，这个得靠大家继续努力学习，寻找一些讲得更深入的文章或者书籍了！如果大家有什么其他特性推荐的，欢迎补充！大家一起学习，进步！ 看这篇文章，代码可以不用看得过于仔细！这里主要是想让大家了解css3的新特性！代码也是很基础的用法。我给出代码主要是让大家在浏览器运行一下，让大家参考和调试。不要只看代码，只看代码的话，不会知道哪个代码有什么作用的，建议边看效果边看代码。 2.过渡 过渡，是我在项目里面用得最多的一个特性了！也相信是很多人用得最多的一个例子！我平常使用就是想让一些交互效果（主要是hover动画），变得生动一些，不会显得那么生硬！好了，下面进入正文！ 引用菜鸟教程的说法：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。 2-1语法

学了一段时间的HTML、CSS和JS后，给大家做一款漂亮的不像实力派的 HTML 时钟，先看图： 涉及到的知识点有： CSS3动画、DOM操作、定时器、圆点坐标的计算（好多人是不是已经还给自己的老师了~） 接下来，我们用5步来制作它 step1、准备HTML 首先，我们需要准备HTML结构，背景、表盘、指针（时针、分针、秒针）、数字。 <div id="clock"> <div class="bg"> <div class="point"> <div id="hour"></div> <div id="minute"></div> <div id="second"></div> <div class="circle"></div> </div> </div> < /div> step2、准备CSS 定义好指针的颜色和大小，需要说明的是 transform: rotate(-90deg); 用来旋转指针， transform-origin:0 6px; 用来设置旋转中心点。 <style> *{ margin: 0; padding: 0; } #clock{ margin: 5% auto; width: 400px; height: 400px; border-radius: 10px; background: #aaa; position: relative;

1.CSS3边框 border-radius:创建圆角边框 border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */ box-shadow:边框阴影，方向为x，y，z -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */ box-shadow: 10px 10px 5px #888888; border-image:边框图片，IE不支持 2.CSS3背景 background-size:规定背景图片的尺寸，宽、高 background:url(/i/bg_flower.gif); background-size:63px 100px; -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-repeat:no-repeat; background-origin 属性规定背景图片的定位区域。 背景图片可以放置于 content-box、padding-box 或 border-box 区域。 background:url(bg_flower.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit