css3旋转 | 易学教程

Css3 filter图片处理

阅读更多关于 Css3 filter图片处理

CSS3 增加了filter，即过滤功能，此功能非IE得filter 我想光看上面的效果就能吸引你了，要是你自己动手的话，我想您更会感到神奇。细一看，这些效果就像是photoshop整出来的一样，其实是真是这样的，有很多效果都是类似于photoshop中的特效。不过有一点大家需要特别的注意：此处的 CSS3 filter 和 css filter 完全是两样东东。更不是我们一直说的IE滤镜。具体所指的是什么？大家感兴趣的可以点击这里。我就不多说了，因为说也说不清楚，我只想和大家一起探讨的是如休整使用这个“CSS3 Filter”。那我们开始吧。 Filters 主要是运用在图片上，以实现一些特效。（尽管他们也能运用于video上），不过我们在些只来讨论图片上的运用。语法 elm { filter: none | <filter-function > [ <filter-function> ]* } 其默认值是none，他不具备继承性，其中filter-function一个具有以下值可选：其默认值是none，他不具备继承性，其中filter-function一个具有以下值可选： grayscale灰度 sepia褐色（求专业指点翻译） saturate饱和度 hue-rotate色相旋转 invert反色 opacity透明度 brightness亮度

CSS3学习总结

阅读更多关于 CSS3学习总结

CSS3 边框 border-radius 用于创建圆角 box-shadow 用于向方框添加阴影 border-image 可以使用图片来创建边框 CSS3 背景 background-size 规定背景图片的尺寸 background-origin 规定背景图片的定位区域 CSS3 文本效果 text-shadow 可向文本应用阴影 word-wrap 允许强制文本换行 CSS3 @font-face 规则　　在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont) CSS3 2D 转换 2D Transform 方法 transform 向元素应用 2D 或 3D 转换。函数描述 matrix( n , n , n , n , n , n ) 定义 2D 转换，使用六个值的矩阵。 translate( x , y ) 定义 2D 转换，沿着 X 和 Y 轴移动元素。 translateX( n ) 定义 2D 转换，沿着 X 轴移动元素。 translateY( n ) 定义 2D 转换，沿着 Y 轴移动元素。 scale( x , y ) 定义 2D 缩放转换，改变元素的宽度和高度。 scaleX

CSS3 skew倾斜、rotate旋转动画

阅读更多关于 CSS3 skew倾斜、rotate旋转动画

css3出现之前，我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写，脚本代码较为复杂；若需要实现倾斜、旋转之类的动画难度将更高（我还没试过用JavaScript或Jquery如何实现），而且即使能实现估计花的时间代价及维护难度是很大的，很多时候只能依靠画图工具制作此类动画文件；有时候在想如果不用脚本语言，也不用画图工作制作动画文件，就能在网页上实现倾斜、旋转之类的动画效果多好。最近挤出一些业余时间学习CSS3，其中就包含很多动画示例，花了点时间学习和整理今天分享使用html+css3实现skew倾斜、rotate旋转动画，我们先看最终效果图（我这里为了演示效果，就用QQ屏幕截成多张图片，然后制作成gif动画给大家简单展示下，效果不好请大家多多包涵）图1 具体步骤如下： 1、放置两个div，一个作为容器（图1中绿色背景部分 id="warp"），另一个作为动画元素（图1中黄色背景部分 id="box"） HTML代码： <div id="warp"> <div id="box">WEB</div> </div> CSS代码（设置容器及动画元素默认样式）： #warp { width: 320px; height: 320px; background: #6FDE82; margin: 20px auto; } #box { height:

css3可控旋转音乐播放按钮

阅读更多关于 css3可控旋转音乐播放按钮

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <title>星律网在线邀请</title> <style> *{ margin:0; padding:0; list-style:none;} #lanren{ width:44px; position:absolute; z-index:99999; right:0; top:0;} #lanren #audio-btn{width: 44px;height: 44px; margin:10px auto;background-size: 100% 100%;} #lanren .on{background: url('/skin/yqx/images/music.gif') no-repeat 0 0;-webkit-animation: rotating 1.2s linear infinite;animation:

css3中的3种和动画相关的属性:变形（transform）过渡(transtion) 动画(animation)

阅读更多关于 css3中的3种和动画相关的属性:变形（transform）过渡(transtion) 动画(animation)

css3中的3种和动画相关的属性：变形（transform）----描述元素的静态样式，常用于配合后两者使用，实现动画效果过渡(transtion)----常和hover等事件配合使用，由事件触发。只能设定头尾。所有样式属性都要一起变化。动画(animation)----和gif动态图差不多，立即播放。可以设定循环次数。可以设定每一帧的样式和时间。结论：如果要灵活定制多个帧以及循环，用animation. 如果要简单的from to 效果，用 transition. 如果要使用js灵活设定动画属性，用transition. transform：字面上就是变形，改变的意思，定义了元素很多静态样式，只不过通过Transition和Animation指定如何改变不同的属性值，才实现了动画。 Transform包含了旋转rotate：通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。 transform-origin定义旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg): 顺时针转30度。扭曲skew：分为：沿着水平方向缩放：transform:skewX(2) 沿着垂直方向缩放

css3制作立方体

阅读更多关于 css3制作立方体

css3制作旋转立方体一、首先制作一个立方体需要用到2D和3D一些属性和功能函数: 1、2D和3D位移：transform:translate（）；水平移动：向右移动translate(tx,0)和向左移动translate(-tx,0)；垂直移动：向上移动translate(0,-ty)和向下移动translate(0,ty); Z轴位移： translateZ（）； 2、2D和3D旋转：transform:rotate（）； (1)2D旋转 rotateX() ：元素围绕其 X 轴以给定的度数进行旋转 rotateY() ：元素围绕其 Y 轴以给定的度数进行旋转 (2)3D旋转 rotateX()：函数指定一个元素围绕X轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕X轴顺时针旋转；反之，如果值为负值，元素围绕X轴逆时针旋转。 rotateY()：函数指定一个元素围绕Y轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕Y轴顺时针旋转；反之，如果值为负值，元素围绕Y轴逆时针旋转。 rotateZ()函数和其他两个函数功能一样的，区别在于rotateZ()函数指定一个元素围绕Z轴旋转。 rotate3d(x,y,z,a)(建议取值0或1) x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值； y

[CSS]CSS3新增属性

阅读更多关于 [CSS]CSS3新增属性

1.CSS3边框： border-radius： CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid; box-shadow： CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888; border-image： CSS3边框图片。通过 CSS3 的 border-image 属性，您可以使用图片来创建边框。border-image：url(border.png) 30 30 round; 2.CSS3背景： **background-size： ** 规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。 background-origin ：规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。 3.CSS3文字效果： text-shadow：在

CSS工具（Autoprefixer、CSScomb、CSS3 Pie、CSS3 Maker）

阅读更多关于 CSS工具（Autoprefixer、CSScomb、CSS3 Pie、CSS3 Maker）

##### Autoprefixer ：一个以最好的方式处理浏览器前缀的后处理程序。安装grunt-autoprefixer插件 npm install grunt-cli grunt-contrib-watch grunt-autoprefixer Gruntfile.js module.exports = function (grunt) { grunt .initConfig ({ autoprefixer : { dist : { files : { 'build/style.css' : 'style.css' } } }, watch : { styles : { files : ['style.css' ], tasks : ['autoprefixer' ] } } }); grunt.loadNpmTasks('grunt-autoprefixer' ); grunt.loadNpmTasks('grunt-contrib-watch' );}; 启用Grunt的Watch功能 ./node_modules/.bin/grunt watch ##### CSScomb ：CSS属性排序工具 ##### CSS3 Pie ：可以让IE6至IE8版本实现大多数的CSS3修饰特性，如圆角、阴影、渐变等。 ##### CSS3 Click Chart :

css3动画属性有哪些

阅读更多关于 css3动画属性有哪些

transition ：平衡过渡 transition是一种css里的一种过渡效果，完成过渡需要多少秒。延迟几秒开始，过渡的速度（一般有 "linear 匀速" 和“ease 先慢后快再慢结束”及“cubic-bezier( n , n , n , n ) 自己定义的值，可能的值是 0 至 1 之间的数值”等）一般transition通过鼠标事件触发，如（hover）产生动画效果 animation：动画 animation 一般通过@keyframes 规则，创建动画。 animation通过关键帧的名称开始的时间动画的速度（和上一致外还有一个step-end逐帧播放）是否重复播放（infinite）进行根据需求进行修改即可 animation一般通过@keframes关键帧的规则来创建动画，可以通过关键字"from"和“to”,或者通过自己定义的百分比进行动画 0%是开始100%是结束一般在关键帧要进行多个动画效果一般使用百分比 0%和100%之间可以根据自己的要求在分成20%，40%，60%或在细分等 transform：改变元素的大小、位置 translate：移动 translate（x,y）定义2D空间 translate（x,y,z）定义3D空间这个的移动值可以使用像素px支持负值 scale：放大 scale（数值）定义图片放几倍大

transform

阅读更多关于 transform

现在开始正式学习CSS3，我所学习的知识来源于w3cplus，作者是大漠。我开始写这个博客之前征求了大漠的意见，问能否把w3cplus上学到的知识写到我自己的博客上以加深印象，大漠很快的回复了，说知识是用来分享的。大师风范，乐于分享。我也要认真踏实的学。原文在这里 http://www.w3cplus.com/content/css3-transform CSS3制作动画的几个属性：变形(transform) 、转换(transition) 、动画(animation) . 这次学习第一个属性—— 变形transform 。 Transform字面上就是变形、改变的意思。在 CSS3 中 transform 主要包括以下5种：旋转rotate 、扭曲skew 、缩放scale 和移动translate 以及矩阵变形matrix .下面看css3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现。从 transform 的语法开始。 transform : none | < transform-function > [ < transform-function > ]* 也就是： transform : rotate | scale | skew | translate | matrix; none

订阅 css3旋转