css 从简单到复杂的动态效果，你值得拥有
Posted a露露
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 从简单到复杂的动态效果，你值得拥有相关的知识，希望对你有一定的参考价值。
<html>
<head>
<style>
.tip{
height:10px;
padding-left:20%;
background-color:#FFFFFF;
text-align:center;
line-height: :10px;
color:#dddcdc;
font-size:15px;
}
p:active{
text-decoration:underline;
color:#81A9C3;
}
.dp{
margin:0 auto;
text-align:center;
}
/* 元素按比例放大，不会对周围元素照成影响，瞬间完成*/
/*
img{
width:30px;
height:30px;
}
img:hover{
transform:scale(2);
}
*/
/*带过渡动画效果的变化，可以控制时间,会对周围元素照成影响,由元素属性变化引起动画效果*/
/*
img{
width:30px;
height:30px;
transition:height 2s linear 2s;
}
img:hover{
height:50px;
}
*/
/*元素高度发生变化，会对周围元素照成影响，瞬间完成*/
/*
img{
width:30px;
height:30px;
}
img:hover{
height:50px;
}
*/
/*关键帧动画*/
/*关键字@keyframes 来定义动画*/
@keyframes demo{
0%{width:50px;height:30px}
50%{width:30px;height:50px}
100%{width:30px;height:30px}
}
/*动画定义完了，现将该动话绑定到元素上*/
img:hover{
animation:demo 2s;
}
</style>
</head>
<body>
<script>
</script>
<div>
<p class="tip" >还没账号？戳这里进行注册</p>
</div>
<div class="dp">
<img src="tj28.png" onclick="strartdemo()"/>
</div>
<div>
<p class="tip" >还没账号？戳这里进行注册</p>
</div>
</body>
</html>
直接贴代码。
1最简单的动态效果就是
img:hover{
height:50px;
}通过动态伪类来实现
2通过动态伪类触发事件，由transform 来完成动态效果，当然transform 的效果比前者好多了
img:hover{
transform:scale(2);
}
3过渡动画，这个是通过绑定元素属性，由于元素属性变化来触发的，动画 可控性比transform高很多，但只能设置开始和结尾两帧。
4关键帧动画，可以控制具体每一帧的变化，直接绑定元素就可以让该元素具有动画效果。
以上属于个人学习心得，欢迎拍砖指正。
以上是关于css 从简单到复杂的动态效果，你值得拥有的主要内容，如果未能解决你的问题，请参考以下文章