前沿

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

示例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. django静态文件

    django静态文件(js脚本.CSS.图片等) 默认统一放在每一个app的static文件夹下, 通过收集静态文件命令,自动将每一个app下static文件夹下的文件复制到根目录的static文件夹 ...

  2. [PC]两个蓝牙耳机同时输出相同音源

    需求:和老婆一起玩双人同屏游戏(以撒的结合:抗生),但需要带上蓝牙耳机玩. 设备:2个蓝牙耳机.1个蓝牙接收器.1台Win10系统电脑. 通过关键字搜索出一个解决方案(Output audio to ...

  3. Java关于远程调试程序教程

    本节尝试一下Java远程调试的东西,记录一遍简单入门的东西.也就算是使用记录吧! 写一个简单程序打成jar丢到远程服务器运行,模拟远程Server在运行.就拿Java调用shell脚本提交作业程序为例 ...

  4. centos 切换nginx跟apache环境

    启动nginx的启动 nginx -c /etc/nginx/nginx.conf 停止nginx的方法切换到apache. pkill -9 nginx 直接杀死运行中的程序,关闭nginx ser ...

  5. django -- 推荐商品算法

    协同过滤算法之基于物品的推荐算法 目前有关个性化推荐算法主要分为三大类:1.基于协同过滤的推荐:2.基于内容过滤的推荐和3.社会化推荐. 本文主要讨论基于协同过滤的推荐,而该算法也可以划分为两类: 1 ...

  6. sw-stream

    https://github.com/kumavis/sw-stream ServiceWorkerStream and ServiceWorkerGlobalListener This a util ...

  7. linux shell脚本调用java main方法 代码

    #!/bin/sh # #该脚本为Linux下启动java程序的通用脚本.即可以作为开机自启动service脚本被调用, #也可以作为启动java程序的独立脚本来使用. # #Author: tuda ...

  8. 在 Linux 上安装 Oracle 数据库 11g

    http://www.oracle.com/ocom/groups/public/@otn/documents/webcontent/229016_zhs.htm

  9. Nginx-PHP优化设置 + lnmp调优的关键影响因素 + php-fpm + nginx返回码 + tcp调优 + 最大文件描述符

    https://www.cnblogs.com/zengkefu/p/5602473.html最大文件描述符 https://blog.csdn.net/fanren224/article/detai ...

  10. python中#!/usr/bin/python与#!/usr/bin/env python的区别

    目的是在运行python脚本的时候告诉操作系统我们要用python解释器去运行py脚本 所以我们在第一句往往会写如下两句中的其中一句: #!/usr/bin/python 或 >#!/usr/b ...