一,实现div或者文字的当鼠标浮于其上时的动画效果:
1,transition加在div中,实现动画效果的过渡效果,transition: all 3s;其中all表示所有样式都参与过渡,3s表示实现效果的时间;linear为使动画匀速进行;
2,transform放在hover中实现动画效果,translate表示位置的移动;scale表示缩放,其中的值为原大小的几倍;rotate表示旋转,其中旋转的度数单位为deg。
<html>
<head>
<meta charset="utf-8">
<style>
div{
width: 300px;
height: 300px;
background: skyblue;
/* 动画过渡效果 */
transition: all 3s linear;
}
div:hover{
background: rgb(0, 47, 167);
/* transform 2d动画;translate 位置移动 */
/* scale 缩放 */
/* rotate 旋转;deg表示度数 */
/* transform: rotate(60deg); */
transform: translate(50px) scale(0.5) rotate(360deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
二,实现自定义动画效果:
1,自定义动画效果为设置一个keyframes关键字用来定义此动画效果,
@keyframes abc {
20%{
}
40%{
}
60%{
}
80%{
}
100%{
}
}
其中abc为此动画的名字,百分数为该动画效果每时间段内的样式,
2,调用定义好的动画效果:animation: abc 1s infinite linear;
abc为动画名,1s为动画时间,infinite使动画循环进行,linear为使动画匀速进行。
例子代码:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-color: black;
}
div{
width: 800px;
height: 100px;
line-height: 100px;
background: skyblue;
margin: 50px auto;
color: white;
font-size: 60px;
font-weight: bold;
text-align: center;
animation: abc 1s infinite linear;
}
@keyframes abc {
20%{
background-color: blue;
color: white;
}
40%{
background-color: gold;
color: black;
}
60%{
background-color: red;
color: green;
}
80%{
background-color: green;
color: purple;
}
100%{
background-color: purple;
color: yellow;
}
}
</style>
</head>
<body>
<div>
到沈阳了,指定没你好果汁吃
</div>
</body>
</html>
更多推荐
[HTML/CSS]动画效果以及自定义动画效果
发布评论