分享前端知识
关注
分享
扫一扫
文章平均质量分 92
小艾同学喔
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
02-3D转换及案例分享
一、CSS3-3D转换 1.3D 特点：近大远小，物体和面遮挡不可见 1.1三维坐标系 x 轴：水平向右 – x 轴右边是正值，左边是负值 y 轴：垂直向下 – y 轴下面是正值，上面是负值 z 轴：垂直屏幕 – 往外边的是正值，往里面的是负值 2.3D移动tranlate3d 2.1 语法 transform:translate3d(x,y,z); transform:translat...原创 2020-03-08 19:38:02 · 774 阅读 · 0 评论 -
CSS3之动画(animation)和四个小案例
一、动画(animation) 1.动画概述 可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。 2.语法 1.0%是动画的开始可以用from替代，100%是动画的完成可用to替代。 2.在CSS中用@keyframes中定义动画的样式，在用选择器调用animation调用动画 3.动画是是元素从一种样式逐渐变化成另一种样式的效果。可以任意改变动画节点。 @keyframes...原创 2020-03-08 19:31:26 · 2603 阅读 · 0 评论 -
01-2D转换transform
一、CSS3—2D转换 转换(transform)可以实现元素的位移、旋转、缩放等效果。可以理解为变形。 1. 2D转换之移动translate 可以改变元素的页面中的位置，类似于定位。 1.1语法 transform:translate(x,y); 1.2用法 .box1 { background-color: #f34; /* 前面是x轴，后...原创 2020-03-08 19:06:46 · 324 阅读 · 0 评论 -
04.CSS3 transition属性及5个小案例分享
一、介绍 过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果，经常和 :hover 一起 搭配使用。 二、语法 transition: 要过渡的属性 花费时间 运动曲线 何时开始; transition: property duration timing-func...原创 2020-02-29 17:49:26 · 1618 阅读 · 0 评论 -
保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例
网站:https://www.iconfont.cn/ 阿里巴巴矢量图 一、Unicode和css引入的前期准备工作 1.进入阿里巴巴矢量图网站，将想引入的图标加入购物车。 2.加入购物车成功后点击下载代码。 3.解压下载好的压缩包，并打开demo_index.html文件，复制其中的字体声明代码。 4.把从阿里巴巴矢量图中复制好的字体声明复制到html里的css中。 5.在要引入字体图标的ht...原创 2020-02-28 21:40:33 · 3315 阅读 · 0 评论 -
让子盒子在父盒子中垂直居中的七个方法
一、用padding实现 1.padding-top = (父盒子的高度 - 子盒子的高度) / 2 2.padding-left = (父盒子的宽度 - 子盒子的宽度) / 2 3.由于padding会撑大盒子，所以父盒子的宽高要减去对应的padding值 <!DOCTYPE html> <html lang="zh-CN"> <head> <...原创 2020-02-28 19:34:08 · 7925 阅读 · 0 评论 -
CSS3新特性-结构伪类选择器nth-child（n）
一、nth-child（n） 选择某个父元素的一个或多个特定的子元素 n 可以是数字，关键字和公式 n 如果是数字，就是选择第 n 个子元素， 里面数字从1开始… n 可以是关键字：even 偶数，odd 奇数 n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 ) <!DOCTYPE html> <html la...原创 2020-02-28 18:53:48 · 710 阅读 · 0 评论