[React] Animate your user interface in React with styled-components and "keyframes"
In this lesson, we learn how to handle CSS keyframe animations in styled-components, via the 'keyframes' helper.
import React from "react";
import styled, { keyframes } from "styled-components"; const morph = keyframes`
% { border-radius: 5px; }
% { border-radius: %; }
% { border-radius: 5px; }
`; const spin = keyframes`
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
`; const Ball = styled.div`
width: 64px;
height: 64px;
border-radius: %;
margin: auto;
background-color: #08aeea;
background-image: linear-gradient(0deg, #08aeea %, #2af598 %);
animation: ${morph} 1s linear infinite, ${spin} 1s ease-in-out infinite;
`; const App = () => <Ball />; export default App;
[React] Animate your user interface in React with styled-components and "keyframes"的更多相关文章
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- [React] Intro to inline styles in React components
React lets you use "inline styles" to style your components; inline styles in React are ju ...
- React系列(一):React入门
React简介 1.由来 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. 2.React的优势 解决大规模项目开发中数据 ...
- React Native是一套使用 React 构建 Native app 的编程框架
React Native是一套使用 React 构建 Native app 的编程框架 React Native at first sight what is React Native? 跟据官方的描 ...
- react.js 从零开始(七)React (虚拟)DOM
React 元素 React 中最主要的类型就是 ReactElement.它有四个属性:type,props,key 和ref.它没有方法,并且原型上什么都没有. 可以通过 React.create ...
- 如何使用TDD和React Testing Library构建健壮的React应用程序
如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...
- React环境配置(第一个React项目)
使用Webpack构建React项目 1. 使用NPM配置React环境 NPM及React安装自行百度 首先创建一个文件夹,the_first_React 进入到创建好的目录,npm init,然后 ...
- React入门介绍(2)- React Component-React组件
React Component-React组件 允许用户自由封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass方法就是用来创 ...
- react的类型检查PropTypes自React v15.5起已弃用,请使用prop-types
最近使用React的类型检查PropTypes时,遇到错误:TypeError: Cannot read property 'array' of undefined 看了下自己的React版本: ...
随机推荐
- 【使用uWSGI和Nginx来设置Django和你的Web服务器】
目录 安装使用uWSGI 配置Nginx结合uWSGI supervisor Django静态文件与Nginx配置 @ *** 所谓WSGI . WSGI是Web服务器网关接口,它是一个规范,描述了W ...
- 小米开源便签Notes-源码研究(2)-定时提醒的便签
本篇讲述小米便签中的定时提醒功能. 便签,可以理解为一件事情,一项任务,有个定时提醒的功能,还是蛮不错的~ 小米便签定时功能,是当编辑便签的时候,有个菜单项,选了之后,就弹出一个"日 ...
- 【Henu ACM Round #13 E】Spy Syndrome 2
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 对m个串建立一棵字典树. 然后对主串. 尝试从第一个位置开始.在字典树中尝试匹配 如果匹配到了位置i 就再从位置i+1开始尝试匹配 ...
- ognl.OgnlException: target is null for setProperty(null,"XXXX"...)
今天遇到了这个奇葩问题,最后来回比对了一下前辈写过的一段完整代码后才发现问题. Error大概描写叙述为: 警告: Error setting expression 'XXX' with value ...
- Cocos2d-x学习笔记(20)(TestCpp源代码分析-4)
本章主要介绍testResource.h与tests.h,当中tests.h主要是存放全部用到的头文件.与菜单相相应的宏定义以及菜单数组,testResource.h主要用是资源文件定义. //tes ...
- 网页中插入javascript的几种方法
网页中插入javascript的方法常见的有两种: 一.直接使用html标记 JavaScript 可以出现在 html的任意地方.使用标记<script>…</script> ...
- 量化派基于Hadoop、Spark、Storm的大数据风控架构--转
原文地址:http://www.csdn.net/article/2015-10-06/2825849 量化派是一家金融大数据公司,为金融机构提供数据服务和技术支持,也通过旗下产品“信用钱包”帮助个人 ...
- Ansible学习记录六:Tower安装
0.特别说明 1. 本文档没有特殊说明,均已root用户安装 2. 本文档中ftp传输文件的工具采用filezilla. 3. 本文档中的执行命令必须严格按照顺序而来. 4. 本文档中所用浏览器为Go ...
- 托管非托管Dll动态调用
原文:托管非托管Dll动态调用 最近经常看到有人问托管非托管Dll调用的问题.对于动态库的调用其实很简单.网上很多代码都实现了Dll的静态调用方法.我主要谈论下动态库的动态加载. 对于托管动态库,实现 ...
- 关于multiprocessing,我也来聊几句
起因:近期须要从hbase中向 ES中导一批数据.使用multiprocessing 启动多个程序同一时候向ES导数据.能够大大提高效率.由于导数的任务是能够依照时间切割的. 一段简单的代码例如以下: ...