CSS
风痕依旧
坚持不懈、追求技术巅峰!!!
展开
-
CSS(四) 图片切片动画
切片动画是将一张图切成若干部分,由散而聚这里的切图是假切图,图片本身大小不变,切多少部位就需要多少张图片步骤:1 创建需要的切片let image = require("../image/test.png").default let scale = 200 let columncount = 1200/scale let rowcount =...原创 2020-03-05 18:25:36 · 753 阅读 · 0 评论 -
CSS(三) 旋转三棱柱滚筒组件
设计思路:1、div相对路径下包含3个div绝对路径设置背景图,进行旋转2、旋转首先定义一个中心点 transform-origin3、判断需求要绕哪个轴旋转,注意:与旋转面垂直的轴即为旋转轴4、定义初始位置5、定义动画规则,进行旋转代码如下:js:import React from 'react'import styles from '../css/gundong.scss'...原创 2020-03-03 15:44:59 · 715 阅读 · 0 评论 -
CSS(二)动画
动画方式分两种1 transform transition组合 适用于触发式,比如绑定鼠标进入此例子是鼠标进入组件由-100px通过2s到达300px,transition可是设置进入方式,比如匀速,先快后慢.testclass{ transform:translateX(-100px); transition:transform 2s;}.testclass:hover{ t...原创 2020-03-01 09:46:10 · 162 阅读 · 0 评论 -
CSS浮动
浮动DIV多行多列时需要用浮动进行对齐,左侧为float:left,右侧为float:right多行多列下面的DIV必须要清除浮动,clear:both 否则不能正常显示原创 2019-12-07 16:26:13 · 117 阅读 · 0 评论