- 博客(11)
- 收藏
- 关注
RSS订阅原创 解决text-shadow和text-fill-color的冲突
前言今天在写样式是有一组文字既要文字渐变，又要文字阴影，但是有文字阴影的话，文字渐变就会沉底，阴影会在文字的上面.front-text{width: 325px;height: 105px;font-size: 140px;font-family: PingFang SC;font-weight: bold;color: #FFFFFF;text-shadow: 0px 4px 0px #D52A03;background: linear-gradient(180deg, #FFFFFF
2021-02-23 16:49:19
850
2
原创 基于react hook的红包雨动画
文章目录前言一、html二、css三、ts实现效果前言红包雨动画，下面的盒子不断移动接住红包提示：以下是本篇文章正文内容，下面案例可供参考一、html <div className={style["wrap"]} style={{ background: `url("${Bj}") no-repeat`, backgroundSize: "100% 100%" }}> <div className={style["box"]} ref={boxRef}
2021-02-03 16:48:05
419
原创 基于react hook的砸金蛋动画
产品的任务罢了文章目录前言一、html结构二、动画实现三、实现效果总结前言9个蛋，其中一个蛋晃动，同时晃动的蛋壳上出现红包，锤子移动过去落下，蛋晃动几下；如此反复，直到被用户点击打断，用户点击金蛋，金蛋晃动并破裂，弹中奖弹窗或未中奖图标，活动页面如下一、html结构结构设计很简单，先整一个正方形的大盒子，然后在里面放一个宽100%高100%的小盒子和一个绝对定位的锤子，再在小盒子里面放九个宽为33.33%高为33.33%的金蛋图片，小盒子为弹性盒子flex，两端对齐 justify-co
2020-12-14 12:43:30
637
3
原创 css实现shake动画
html：<div className={style.shake} style={{ position: "fixed", top: 0, bottom: 0, left: 0, right: 0, margin: "auto", width: 100, height: 150, backgroundColor: 'red' }}></div>css:.shake { animation: shake 2s linear infinite;}@keyframes sh
2020-08-25 10:36:38
1681
原创 css实现bounce动画
html:<img className="bounce" src="https://avatar.csdnimg.cn/7/1/5/3_weixin_44207333.jpg" alt=""/>css:.bounce { animation: bounce 2.5s infinite 0.5s both; transform-origin: center bottom;}@keyframes bounce { 0%, 7%, 25%, 36%, 45%,
2020-08-25 10:26:16
1520
原创 在react+typescript中使用swiper
基于react脚手架使用swiper官方地址：swiper官方API文档安装：npm i swiper -S引入js和css样式：（地址不对就自行去node_modules里找swiper文件夹，修改到相应的css路径）import Swiper from 'swiper';import 'swiper/css/swiper.min.css'html:<div classNa...
2020-01-06 17:12:28
2300
原创 react+typescript中使用wangeditor的坑
在react+typescript中使用富文本wangeditor第一步：安装npm install wangeditor --save-dev第二步：引入import E from 'wangeditor'这里会提示你要安装 npm install @types/wangeditor，执行这行代码一直报404找不到这个依赖包，这个时候我们就要去 .d.ts 文件中去适配第三步：配...
2019-12-30 11:38:13
2280
3
原创 react-loadable的使用(封装)
react-loadable的使用(封装)当组件还在加载中的时候显示一个页面，一般是一张动图gif表现出加载中的效果asyncLoader.tsximport Loadable from 'react-loadable';// import Toast from '_component/toast'import * as React from 'react';import PageLo...
2019-12-30 11:20:34
729
原创 reac+typescript组件的简单封装
reac+typescript组件的简单封装这是一个最简单的用来代替h1的组件props带问号就是可传可不穿，如果没有带问号就是一定要传入该参数，否则就会报错titleStyle表示该组件的行内样式，titleClass表示该组件的类名import * as React from 'react';import classnames from 'classnames';import * ...
2019-12-30 11:00:29
893
原创 react+typescript在create-react-app中的页面模板
react+typescript在create-react-app中的页面模板import React, { Component } from 'react';import "./style.css"interface Props {}interface state {}class template extends Component<state, Props> {...
2019-12-30 10:48:33
481
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人