css3动画效果
程序员文章站
2022-03-19 09:55:46
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet/less" type="text/css" href="css/demo2.less"/>
<script src="js/less-1.3.3.min.js" type="text/javascript"></script>
</head>
<body>
<!--div.container>figure*9>img+figcaption-->
<div class="container">
<figure>
<img src="images/pic1.jpg"/>
<figcaption>
<h1>平移动画</h1>
<p>最简单的平移动画</p>
</figcaption>
</figure>
<figure>
<img src="images/pic2.jpg"/>
<figcaption>
<h1>延迟动画</h1>
<div>
<p>多条文字简介文字</p>
<p>逐一飞入动画</p>
<p>通过动画延时实现</p>
</div>
</figcaption>
</figure>
<figure>
<img src="images/pic3.jpg"/>
<figcaption>
<h1>底部滑出动画</h1>
<div>
translate属性可以制作多种动画，一个简单的位置移动可以制作出多种效果，重要看制作师们能否开动想象力。
</div>
</figcaption>
</figure>
<figure>
<img src="images/pic4.jpg"/>
<figcaption>
<h1>旋转显示额外信息</h1>
<div></div>
<p>
<span>info1</span>
<span>info2</span>
</p>
</figcaption>
</figure>
<figure>
<img src="images/pic5.jpg"/>
<figcaption>
<h1>旋转飞入飞出</h1>
<div></div>
<p>通过旋转和位移制作</p>
</figcaption>
</figure>
<figure>
<img src="images/pic6.jpg"/>
<figcaption>
<h1>扭曲飞入飞出</h1>
<div>
<p>通过扭曲和位移，制作出飞入的效果</p>
<p>扭曲属到达90度。元素就看不见了</p>
</div>
</figcaption>
</figure>
<figure>
<img src="images/pic7.jpg"/>
<figcaption>
<h1>缩放动画</h1>
<p>通过简单的缩放达到效果</p>
</figcaption>
</figure>
<figure>
<img src="images/pic8.jpg"/>
<figcaption>
<h1>绘制线条效果</h1>
<span>通过缩放属性绘制边框线条</span>
<div>
<p></p>
<p></p>
</div>
</figcaption>
</figure>
<figure>
<img src="images/pic9.jpg"/>
<figcaption>
</figcaption>
</figure>
</div>
</body>
</html>@baseWidth:1240px;
*{
padding:0;
margin:0;
}
.container{
width:@baseWidth;
margin:0 auto;
box-shadow:0 0 5px #f00;
figure{
float:left;
width:33.3333%;
height:400px;
overflow:hidden;
position: relative;
img{
display: block;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
figcaption{
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
h1{
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
position: absolute;
bottom:200px;
left:20px;
color:#fff;
-webkit-transform: translate(-200px,0);
-moz-transform: translate(-200px,0);
-ms-transform: translate(-200px,0);
-o-transform: translate(-200px,0);
transform: translate(-200px,0);
}
p{
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
div{
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
span{
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
}
&:nth-child(1){
figcaption{
p{
position: absolute;
bottom:60px;
left:20px;
color:#fff;
-webkit-transform: translate(0,80px);
-moz-transform: translate(0,80px);
-ms-transform: translate(0,80px);
-o-transform: translate(080px);
transform: translate(0,80px);
}
}
}
&:nth-child(2){
figcaption{
div{
position: absolute;
bottom:60px;
left:20px;
p{
background-color: #fff;
color:#000;
margin-bottom:10px;
-webkit-transform: translateX(-250px);
-moz-transform: translateX(-250px);
-ms-transform: translateX(-250px);
-o-transform: translateX(-250px);
transform: translateX(-250px);
&:nth-child(1){
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
&:nth-child(2){
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
&:nth-child(3){
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
}
}
}
}
&:nth-child(3){
figcaption{
div{
width:100%;
height:60px;
line-height:30px;
text-indent: 32px;
position: absolute;
top:340px;
left:0;
background-color: #fff;
color:#000;
-webkit-transform: translateY(65px);
-moz-transform: translateY(65px);
-ms-transform: translateY(65px);
-o-transform: translateY(65px);
transform: translateY(65px);
}
}
}
&:nth-child(4){
figcaption{
div{
width:800px;
height:800px;
background-color: #fff;
position: absolute;
left:0;
top:400px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
}
p{
position: absolute;
right:5%;
bottom:10%;
span{
display: inline-block;
margin-left:50px;
-webkit-transform: translateY(65px);
-moz-transform: translateY(65px);
-ms-transform: translateY(65px);
-o-transform: translateY(65px);
transform: translateY(65px);
&:nth-child(2){
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
}
}
}
}
&:nth-child(5){
figcaption{
p{
position: absolute;
top:50%;
left:20%;
color:#fff;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
div{
border:1px solid #f66;
position:absolute;
top:10%;
right:10%;
bottom:10%;
left:10%;
-webkit-transform:rotate(-720deg) translateY(-600px);
-moz-transform:rotate(-720deg) translateY(-600px);
-ms-transform:rotate(-720deg) translateY(-600px);
-o-transform:rotate(-720deg) translateY(-600px);
transform:rotate(-720deg) translateY(-600px);
}
}
}
&:nth-child(6){
figcaption{
div{
position: absolute;
top:45%;
left:10%;
color:#fff;
p{
-webkit-transform: skew(90deg);
-moz-transform: skew(90deg);
-ms-transform: skew(90deg);
-o-transform: skew(90deg);
transform: skew(90deg);
}
}
}
}
&:nth-child(7){
figcaption{
position: absolute;
top:15%;
right:15%;
bottom:15%;
left:15%;
border:2px solid red;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
p{
position: absolute;
top:40%;
left:10%;
}
}
}
&:nth-child(8){
figcaption{
p{
position: absolute;
border:2px solid #fff;
&:nth-child(1){
top:10%;
right:5%;
bottom:10%;
left:5%;
border-right-width:0;
border-left-width:0;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}
&:nth-child(2){
top:5%;
right:10%;
bottom:5%;
left:10%;
border-top-width:0;
border-bottom-width:0;
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
transform: scaleY(0);
}
}
span{
display: block;
position: absolute;
top:30%;
left:20%;
color:#fff;
opacity: 0;
}
}
}
&:hover{
img{
-webkit-transform: translate(-10px);
-moz-transform: translate(-10px);
-ms-transform: translate(-10px);
-o-transform: translate(-10px);
transform: translate(-10px);
opacity: 0.5;
}
figcaption{
h1{
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
}
}
&:nth-child(1){
p{
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
}
}
&:nth-child(2){
div{
p{
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
}
&:nth-child(3){
div{
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
&:nth-child(4){
div{
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-315deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}
p{
span{
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
}
&:nth-child(5){
p{
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
div{
-webkit-transform: rotate(0) translateY(0);
-moz-transform: rotate(0) translateY(0);
-ms-transform: rotate(0) translateY(0);
-o-transform: rotate(0) translateY(0);
transform: rotate(0) translateY(0);
}
}
&:nth-child(6){
figcaption{
div{
p{
-webkit-transform: skew(0);
-moz-transform: skew(0);
-ms-transform: skew(0);
-o-transform: skew(0);
transform: skew(0);
}
}
}
}
&:nth-child(7){
figcaption{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
&:nth-child(8){
figcaption{
p{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
span{
opacity:1;
}
}
}
}
}
}
上一篇： 万能密码漏洞以及修复
下一篇： css3动画效果