[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版本: ...
随机推荐
- vue抽取公共方法———方法一
方法一:Vue插件 1.概述 作用:满足vue之外的需求,特定场景的需求 比如说,让你在每个单页面组件里,都可以调用某个方法(公共方法),或者共享某个变量等 2.使用方法 [声明插件]- [写插件]- ...
- Struts2的token标签
“token标签的实现原理是在表单中增加一个隐藏域,每次加载该页面时,该隐藏域的值都不相同.而TokenInterceptor拦截器则拦截所有用户请求,如果两次请求时该token对应隐藏域的值相同(前 ...
- 使用Spring Mvc 转发 带着模板 父页面 之解决方法 decorators.xml
周末了,周一布置的任务还没完毕,卡在了页面跳转上,接手了一个半截的项目要进行开发,之前没有人给培训.全靠自己爬代码,所以进度比較慢.并且加上之前没实用过 Spring Mvc 开发项目.所以有点吃力, ...
- 【Tika基础教程之中的一个】Tika基础教程
一.高速入门 1.Tika是一个用于文本解释的框架.其本身并不提供不论什么的库用于解释文本,而是调用各种各样的库,如POI,PDFBox等. 使用Tika.能够提取文件里的作者.标题.创建时间.正文等 ...
- LightOJ 1070 Algebraic Problem (推导+矩阵高速幂)
题目链接:problem=1070">LightOJ 1070 Algebraic Problem 题意:已知a+b和ab的值求a^n+b^n.结果模2^64. 思路: 1.找递推式 ...
- amaze ui和bootstrap有哪些差别?
amaze ui和bootstrap有哪些差别? 问题 我最近在学amaze ui,感觉如果单从功能性来看和bootstrap最大差别也就是扁平化,不过妹子ui号称对国产本土化支持更好,这个具体表现在 ...
- LinkCutTree详解
LCT详解 没有比这再详细的了, 相信我
- java接口理解(转载)
今天和同事好好的讨论了java接口的原理和作用,发现原来自己的对接口的理解仅仅是局限在概念的高度抽象上,觉得好像理解了但是不会变化应用其实和没有理解差不多.以前看一个帖子说学习一个东西不管什么时候都要 ...
- 使用dockerfile构建镜像(docker build)
Docker buidl . 找出当前文件夹下的Docker build文件名的文件 Docker build -t centos(镜像名) . 在当前目录下找centos的镜像文件 Docker ...
- 车牌识别--S5PV210測试第二次优化
优化: 1.RGB转HSV 浮点运算改成定点运算: 2.匹配模板由图片改成C语言数组: 3.优化測试BMP车牌图片读取(两层for循环改为一层for循环). 总体相比优化之前时间降低110ms左右. ...