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

css3 动画效果实现

2017-09-02 15:04 274 查看

前沿

在工作中，经常有一些需要切换的交互样式。如果直接在两种状态之间切换，就显得有点生硬。加上一些动画效果就会好很多。

示例1：点击的三角切换

实现过程

  • 第一步实现这个三角形
    用的svg 的多边形画法
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
width=14
height=7
>
<polygon
points="0,0 14,0 7,7"
style={{ fill: '#999', stroke: '#999', strokeWidth: 1 }}
/>
</svg>
  • 第二步实现动画效果
    css3 的animation: 自定义的每帧动画效果 时间；
    使用@keyframs 定义每帧的动画效果
    可以只定义最初的状态from, 和最终的状态to；也可以定义每个时间节点的状态，比如：10%（经过10%时间的时候） ， 50%（经过50%时间的时候）
animation: up 0.5s;
@keyframs up {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航