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

CSS过渡、动画、变换，综合实例

2017-03-25 22:14 447 查看
过渡是出去后不会回来，动画是可以回来的，当然也可以不回来，动画功能比较多

一、过渡

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡练习2</title>
<style type="text/css">
.class1{
width:100px;
height: 100px;
background-color: aqua;
}
.class1:hover{/*代表鼠标触发后的变换*/
width:200px;
height:200px;
background-color: brown;
transition-delay: 200ms;
transition-duration: 1000ms;
transition-timing-function: ease;
}

</style>
</head>
<body>
<p class="class1"></p>
</body>
</html>




二、动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿水的阿里</title>
<style type="text/css">
.class1{
width:100px;
height: 100px;
background-color: bisque;
}
.class1:hover{
animation-delay: 200ms;/*延迟时间*/
animation-duration: 1000ms;/*动画总时间*/
animation-iteration-count: 4;/*动画来回次数*/
animation-direction: alternate;/*有去有回*/
animation-name: ashui;
}
@keyframes ashui {/*这里to是必须的，代表最后的状态，其他都是中间过程*/
from{
width:100px;
height: 100px;
background-color: bisque;
}
50%{
width:150px;
height: 150px;
background-color: aquamarine;
}
75%{
width: 240px;
height: 240px;
background-color: aliceblue;
}

to{
width:300px;
height:300px;
background-color: burlywood;
}
}
</style>
</head>
<body>
<div align="center">
<p class="class1"></p>
</div>
</body>
</html>




这里动画注意：@keyframs 自定义名字{}里面还有要to{}，自定义名字在hover中animation-name：自定义名字，里面定义

三、变换

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变换练习</title>
<style type="text/css">
.class1{
width: 100px;
height: 100px;
background-color: brown;
}
.class1:hover{
width:100px;
height: 100px;
background-color: brown;
transform: rotate(45deg);/*转动的角度*/
transform-origin: top right;/*绕哪点转，若要绕重心转，这句就不用写了*/
}
</style>
</head>
<body>
<p class="class1"></p>
</body>
</html>




注意：变换使用transform, transform-rotate(45deg);代表转的角度，顺逆时针，用数的正负即可，transform-origin:top right;代表绕哪点转，若绕重心转，则这句不用写了

综合实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿水的阿里</title>
<style type="text/css">
div{
text-align: center;
}

.class1{
width: 300px;
height: 300px;
border-style: solid;
border-radius: 20px/20px;
margin-top:130px ;/*与div上边距相差像素*/
}
html:hover .class1{
animation-delay: 200ms;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-name: ashui;
}
@keyframes ashui {
to{
width: 40px;
height: 40px;
margin-top: 0px;
}
}

p{
font-family: 微软雅黑;
font-size: 40px;
text-shadow: 1px 1px 2px #b0b0b0;
opacity:1;
}
html:hover p{
transition-delay: 200ms;
transition-duration: 1s;
font-family: 微软雅黑;
font-size: 10px;
text-shadow: 1px 1px 2px #b0b0b0;
opacity: 0;
}

</style>
</head>
<body>
<div>
<img src="github1.jpg" class="class1">
<p>阿水的阿里</p>
</div>
</body>
</html>




实例使用了前面的很多内容，有一点注意：html:hover .class{}和html:hover p{},代表鼠标指针触及网页页面就会变化，因为我这里用p标签和img很难同时实现，所以这样省时省力。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航