您的位置：首页 > Web前端 > CSS

CSS3动画笔记

2015-09-10 17:21 627 查看
没事看慕课，最近又看了看慕课，看到了几个比较有意思的课程，也就记录了下来

慕课链接

transform属性，CSS3新属性，用于元素变形处理

其中包含参数有 translate平移， Rotate旋转， scale缩放， skew斜切

兼容性IE6-8不兼容

transform-translate:指定对象的2D translation（2D平移）

第一个参数对应x轴，第二个参数对应y轴，如果第二个参数没有提供则为0

transform:translate(10px,10px)


transform-Rotate:指定对象的2Drotation（2D旋转），需要有transform-origin属性定义

transform-origin属性用来设计旋转中心点，默认中心，

transform:rotate(90deg)


transform-scale:控制2D缩放，第一个参数对应x轴，第二个参数对应y，没有提供第二个参数，默认取第一个参数的值，也可以设置圆心点

transform:scale(0.5,0.5)


transform-skew:指对象斜切扭曲，第一个参数对应x轴，第二个参数对应y轴，如果第二个参数提供默认为0

transform:skew(50deg,50deg)


transition为CSS属性，主要用于过渡动画处理，拥有4个参数

property, duration, timing-function, delay

IE10以上才支持

属性详解

property:检索或设置对象中参与过渡的属性。

duration:过渡动画持续时间。

timing-function:动画过渡类型分为5种，分别为Linear, ease, ease-in, ease-out, ease-in-out

delay:检索或设置对象延迟过渡时间。

div:hover{
transition:all 3s ease-in 2s;//all代表之后所有的都用动画表示，包括transform和background
transform:translate(100px);
background: #0000ff;
}


媒体查询: 达到某些条件时执行或者倒入CSS文件

原谅我可耻的盗了一下慕课的图，对就是这个！！



接下来我也照着慕课教程敲了敲，感觉还不错,不过兼容太恶心了~~~

下面附上代码

HTML

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>H5+CSS3介绍</title>
</head>
<body>
<figure class="test1">
<img src="suolong.jpg">
<figcaption>
<h2>图片标题</h2>
<p>图片注解</p>
<p>图片注解</p>
<p>图片注解</p>
</figcaption>
</figure>
<figure class="test2">
<img src="suolong.jpg">
<figcaption>
<h2>旋转小陀螺</h2>
<p>飞呀飞，飞呀飞</p>
<div></div>
</figcaption>
</figure>
<figure class="test3">
<img src="suolong.jpg">
<figcaption>
<h2>索隆大神</h2>
<p>罗罗诺亚·索隆（Roronoa Zoro）能够自由操纵三把刀战斗。爱喝酒，爱睡觉，讲义气，海贼第一超级大路痴。为了小时候与挚友的约定而踏上了前往世界第一剑士的道路，随后成为主角蒙奇·D·路飞的第一个伙伴。在初次败给世界第一剑士“鹰眼米霍克”后向路飞发誓永不再败，并且更加努力的锻炼自己。两年后的他成功与伙伴们汇合，并且为了实现自己的梦想，奔赴强者如云的新世界。</p>
</figcaption>
</figure>
<figure class="test4">
<img src="suolong.jpg">
<figcaption>
<h2>旋转小陀螺</h2>
<p>飞呀飞，飞呀飞</p>
<div></div>
</figcaption>
</figure>
</body>
</html>


CSS含大批兼容

body,figure,figcaption,h2,p{margin: 0;padding: 0;}
//其他标签动画设计
figure figcaption p,h2,span,div{-webkit-transition:all,0.35s;transition:all,0.35s;}

figure img{opacity:0.9;filter:alpha(opacity=90);-webkit-transition:all,0.35s;transition:all,0.35s;}//img动画设计

figure{position: relative;width: 33.333%;overflow: hidden;height: 486px;float: left;}

figcaption{position: absolute;top: 0;left: 0;color: #fff;font-family: "微软雅黑";}

@media screen and (max-width:700px){//媒体查询，响应式
figure{width:100%}
}
@media screen and (min-width:701px) and (max-width:1319px){
figure{width:50%}
}
@media screen and (min-width:1320px){
figure{width:33.333%}
}
.test1 figcaption p{background: #FFF;color: #444;text-align: center;margin: 5px;
font-family: "微软雅黑";font-weight: bold;font-size: 20px;transform:translate(-141px,0px);
-webkit-transform:translate(-141px,0px);
}

/*--------平移-----------*/
.test1{background: #030}
.test1 figcaption{padding: 50px;}
.test1:hover figcaption p{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}
.test1 figcaption p:nth-of-type(1){transition-delay:0.05s;-webkit-transition-delay:0.05s;}
.test1 figcaption p:nth-of-type(2){transition-delay:0.10s;-webkit-transition-delay:0.10s;}
.test1 figcaption p:nth-of-type(3){transition-delay:0.15s;-webkit-transition-delay:0.1.5s;}
.test1:hover img{transform:translate(-50px,0px);-webkittransform:translate(-50px,0px);
opacity:0.7;filter:alpha(opacity=70);}

/*--------旋转-----------*/
.test2{background: #800000;}
.test2 figcaption{width:100%;height:100%;}
.test2 figcaption h2{margin: 12% 0 0 15%}
.test2 figcaption p{margin: 0 0 0 15%;-webkit-transform:translate(0px,50px);
transform:translate(0px,50px);opacity:0;filter:alpha(opacity=0);}

.test2 figcaption div{border: 2px solid #fff;width:80%;height:80%;position: absolute;top:10%;left: 10%;
transform:translate(0px,-441px) rotate(0deg);-webkit-transform:translate(0px,-441px) rotate(0deg);}

.test2:hover figcaption div{transform:translate(0px,0px) rotate(360deg);
-webkit-transform:translate(0px,0px) rotate(360deg);}
.test2:hover img{opacity:0.7;filter:alpha(opacity=70);}
.test2:hover figcaption p{-webkit-transform:translate(0px,0px);transform:translate(0px,0px);
opacity:1;filter:alpha(opacity=100);}

/*--------斜切-----------*/
.test3{background: #0088A8;}
.test3 figcaption{top:15%;left: 5%;}
.test3 figcaption p{transform:skew(90deg);transition-delay:0.3s;-webkit-transform:skew(90deg);transition-delay:0.3s;}
.test3 figcaption h2{transform:skew(90deg);-webkit-transform:skew(90deg);}
.test3:hover img{opacity:0.7;filter:alpha(opacity=70);}
.test3:hover figcaption p{transform:skew(0deg);-webkit-transform:skew(0deg);}
.test3:hover figcaption h2{transform:skew(0deg);-webkit-transform:skew(0deg);}

/*--------缩放-----------*/
.test4{background:  #5500FF }
.test4 figcaption{width:100%;height:100%;}
.test4 figcaption h2{margin: 12% 0 0 15%;opacity:0;filter:alpha(opacity=0);-webkit-transform:scale(1.2,1.2);
transform:scale(1.2,1.2);}
.test4 figcaption p{margin: 2% 0 0 15%;opacity:0;filter:alpha(opacity=0);-webkit-transform:scale(1.2,1.2);
transform:scale(1.2,1.2);}
.test4 figcaption div{border: 2px solid #fff;width:80%;height:80%;position: absolute;top:10%;left: 10%;
-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2);opacity:0;filter:alpha(opacity=0);}
.test4:hover figcaption div{-webkit-transform:scale(1,1);transform:scale(1,1);opacity:1;filter:alpha(opacity=100);}
.test4:hover img{opacity:0.5;filter:alpha(opacity=50);-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2);}
.test4:hover figcaption p{-webkit-transform:scale(1,1);transform:scale(1,1);opacity:1;filter:alpha(opacity=100);}
.test4:hover figcaption h2{-webkit-transform:scale(1,1);transform:scale(1,1);opacity:1;filter:alpha(opacity=100);}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航