css 从简单到复杂的动态效果，你值得拥有

最新推荐文章于 2019-07-11 23:18:00 发布

weixin_30951231

最新推荐文章于 2019-07-11 23:18:00 发布

阅读量86

点赞数

原文链接：http://www.cnblogs.com/wsz168/p/5243602.html

版权

<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" οnclick="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关键帧动画，可以控制具体每一帧的变化，直接绑定元素就可以让该元素具有动画效果。

以上属于个人学习心得，欢迎拍砖指正。

转载于:https://www.cnblogs.com/wsz168/p/5243602.html

weixin_30951231

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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:unde...
复制链接

扫一扫