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 从简单到复杂的动态效果,你值得拥有的主要内容,如果未能解决你的问题,请参考以下文章

Libevent使用例子,从简单到复杂

Libevent使用例子,从简单到复杂

[z]Libevent使用例子,从简单到复杂

awk从简单到复杂

iOS 面试大全从简单到复杂(简单篇

从简单到复杂:Apache Kafka应用实例详解