CSS3过渡和动画
来源:互联网 发布:谷歌访问助手mac版 编辑:程序博客网 时间:2024/05/12 04:45
例子:
div
{
transform:translate(50px,100px);-ms-transform:translate(50px,100px);//IE9
-webkit-transform:translate(50px,100px);//Safari and Chrome
-o-transform:translate(50px,100px);//Opera
-moz-transform:translate(50px,100px);//Firefox
}
2D转换:
translate(50px,100px);//元素从其当前位置移动,参数为left和top值
rotate(30deg); //元素顺时针旋转30度
scale(2,4); //元素尺寸增大或减小,参数为宽度和高度,宽度*2,高度*4
skew(30deg,20deg);//元素2D翻转,沿X轴翻转30度,Y轴翻转20度
3D转换:
rotateX(120deg);//元素沿X轴3D旋转120度
rotateY(120deg);//元素沿Y轴3D旋转120度
注意:
1、CSS3变换时可以使用transform-origin:0 0 0;来调整变换是基于哪个点,默认是基于中心点transform-origin:50% 50% 0;
2、使用rotate旋转时,可能会造成部分浏览器出现锯齿的情况,加上translateZ(0)可以解决
元素动画过渡效果:
例子:
div
{
width:100px;
height:50px;
transition:width 2s, height 2s, transform 2s;
}
div:hover
{
width:300px;
height:200px;
transform:rotate(360deg);
}
transition:width 2s linear 3s;//参数依次为属性名、动画时间、速度、延时
规定速度的参数:
匀速:linear
慢-快-慢:ease
慢-快:ease-in
快-慢:ease-out
慢速开始和结束:ease-in-out
动画效果:
例子:
div
{
background-color:red;
position:relative;
animation:myfirst 5s;//规定动画的名称和时长
}
@keyframes myfirst
{
from {background-color:red;}
to {background-color:yellow;}
}
也可以:
@keyframes myfirst
{
0% {background-color:red; left:0px; top:0px;}
25% {background-color:blue; left:200px; top:0px;}
50% {background-color:yellow; left:200px; top:200px;}
75% {background-color:black; left:0px; top:200px;}
100% {background-color:green; left:0px; top:0px;}
}
animation:myfirst 5s linear 2s infinite alternate;
参数依次代表:动画名称、动画时长、速度、延时、次数(默认是1,这里是无限重复)、下一周期逆向播放
注意浏览器支持:
注意浏览器支持:
文本创建多列:
column-count:3;//文本分隔为三列
column-gap:40px;//列之间的间隔
column-rule:2px outset #ff0000;//列之间的样式和颜色
用户界面:
div
{
resize:both; //规定该元素可由用户调整大小
overflow:auto;
}
绘制轮廓:
div
{
border:1px solid red;
outline:2px solid red;
outline-offset:10px;//该元素边框外10像素绘制轮廓(轮廓不占用空间)
}
0 0
- CSS3过渡和动画
- CSS3过渡和动画
- CSS3过渡、变形和动画
- CSS3 转换、过渡和动画
- CSS3 3 过渡和动画
- CSS3的过渡和动画
- 平滑的 CSS3 和 jquery 过渡动画
- 【CSS3】transition过渡和animation动画
- 【CSS3】transition过渡和animation动画
- CSS3动画-过渡
- css3过渡动画transition
- css3-过渡动画效果
- css3 过渡/旋转/动画
- css3动画过渡
- css3动画以及过渡
- HTML5&CSS3笔记:CSS3过渡、变形和动画
- CSS3-过渡属性,CSS3-动画
- css3的转换效果过渡效果动画效果和列
- IE6、7下overflow:hidden失效
- 经典排序算法之冒泡排序
- UVA 216 Getting in Line
- 数组概述+数组排序+数组查找-第5天
- 单例模式的两种实现方式
- CSS3过渡和动画
- jquery获取屏幕高度
- js运算符|| &&
- OC语言中的通知
- MyEclipse 创建基于maven的Web Project工程的若干问题解决方法
- HALCON初步:文件夹遍历,文件筛选,文件名拆分,图片读取及保存
- Android studio使用greenDao
- UVa 11059 最大乘积(枚举)
- ThinkPHP的RBAC权限控制