前沿

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

示例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);
}
}

css3 动画效果实现的更多相关文章

  1. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  2. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

  3. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  4. CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码

    CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...

  5. 鼠标悬停css3动画效果

    下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  6. 第八十三节,CSS3动画效果

    CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一.动画简介     CSS3提 ...

  7. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  8. 35个让人惊讶的CSS3动画效果

    1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero 4. Animated Pricing Column 5. Slick jQuery  ...

  9. Css3动画效果,彩色文字效果,超简单的loveHeart

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...

  10. 第 26 章 CSS3 动画效果

    学习要点: 1.动画简介 2.属性详解 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 的动画效果,可以通过类似 Flash 那样的关键帧模式控制运行. 一.动画简介 CSS ...

随机推荐

  1. Jersey常用注解解释 @DET、@PUT、@POST 、@DELETE等

    uri : ... /resource/{id} public voide method(@PathParam("id") String userId){} uri :  .../ ...

  2. mac系统如何在当前目录下打开终端

    给大家推荐一个好用的终端工具 Go2Shell:https://itunes.apple.com/cn/app/go2shell/id445770608?mt=12 在没有这个工具之前 找了好多在当前 ...

  3. 17秋 软件工程 团队第五次作业 Alpha 用户反馈

    用户反馈 Bug 测试对不同机型进行了测试,包括: 小米NOTE, MIUI 8.5 稳定版 [已修复]点登录按钮之后自动退出: [已修复]登录界面的背景图片没有显示. 小米4 [已修复]闪退,无法打 ...

  4. 团队Alpha博客链接目录

    Dipper团队Alpha博客链接目录 团队Alpha冲刺博客 第一次冲刺 第二次冲刺 第三次冲刺 第四次冲刺 第五次冲刺 第六次冲刺 第七次冲刺 第八次冲刺 第九次冲刺 第十次冲刺 第十一次冲刺 第 ...

  5. java通过传入的日期,获取所在周的周一至周日

    public static void main(String[] args) { try { SimpleDateFormat sdf=new SimpleDateFormat("yyyy- ...

  6. 高精度(x ,/, +, -, %)良心模板

    该模板不是本人的,但是该是加了个头文件哒.不然在某个oj上编译错误. #include <iostream> #include <string> #include <cs ...

  7. LeetCode - 排列相关题目

    1.获取全排列 https://leetcode.com/problems/permutations/submissions/ 按字典序输出: 这里用的是vector<int>,不是引用. ...

  8. 0 ardunio processing 显示三轴数据

    http://blog.csdn.net/Fortware/article/details/38307799 /** * Mixture * by Simon Greenwold. * * Displ ...

  9. 20145203盖泽双 《网络对抗技术》实践1—— MAL_逆向与Bof基础

    20145203盖泽双 <网络对抗技术> MAL_逆向与Bof基础 实践目标 (1)我们要通过修改程序代码,使得程序运行其自身中本不该运行的代码片段. (2)在这里,我们有一个名为2014 ...

  10. WebService基础入门 CXF(WS + RS)

    一.基本介绍 Web Services是一个软件接口,它描述了一组可以在网络上通过标准化的 XML 消息传递访问的操作.它使用基于 XML 语言的协议来描述要执行的操作或者要与另一个 Web 服务交换 ...