小艾同学喔-CSDN博客

原创 less预处理器

一、less预处理器Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。1.插件安装安装Easy LESS插件就能使写入的.less文件保存时自动生成.css文件2.用法1.less中的语法完全兼容css语法。2.HTML引入时，需要引入的是CSS文件。3.less自动生成为css文件后，不能直接修改生成的css文件，因为less文...

2020-03-08 19:41:03 590 1

原创 02-3D转换及案例分享

一、CSS3-3D转换1.3D特点：近大远小，物体和面遮挡不可见1.1三维坐标系x 轴：水平向右 – x 轴右边是正值，左边是负值y 轴：垂直向下 – y 轴下面是正值，上面是负值z 轴：垂直屏幕 – 往外边的是正值，往里面的是负值2.3D移动tranlate3d2.1 语法transform:translate3d(x,y,z);transform:translat...

2020-03-08 19:38:02 661

原创 CSS3之动画(animation)和四个小案例

一、动画(animation)1.动画概述可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。2.语法1.0%是动画的开始可以用from替代，100%是动画的完成可用to替代。2.在CSS中用@keyframes中定义动画的样式，在用选择器调用animation调用动画3.动画是是元素从一种样式逐渐变化成另一种样式的效果。可以任意改变动画节点。@keyframes...

2020-03-08 19:31:26 2430

原创 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 244

原创 04.CSS3 transition属性及5个小案例分享

一、介绍过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果，经常和 :hover 一起搭配使用。二、语法transition: 要过渡的属性花费时间运动曲线何时开始;transition: property duration timing-func...

2020-02-29 17:49:26 1216

原创保姆级css引入字体图标的三种方式——以阿里巴巴矢量图为例

网站:https://www.iconfont.cn/阿里巴巴矢量图一、Unicode和css引入的前期准备工作1.进入阿里巴巴矢量图网站，将想引入的图标加入购物车。2.加入购物车成功后点击下载代码。3.解压下载好的压缩包，并打开demo_index.html文件，复制其中的字体声明代码。4.把从阿里巴巴矢量图中复制好的字体声明复制到html里的css中。5.在要引入字体图标的ht...

2020-02-28 21:40:33 2132

原创让子盒子在父盒子中垂直居中的七个方法

一、用padding实现1.padding-top = (父盒子的高度 - 子盒子的高度) / 22.padding-left = (父盒子的宽度 - 子盒子的宽度) / 23.由于padding会撑大盒子，所以父盒子的宽高要减去对应的padding值<!DOCTYPE html><html lang="zh-CN"><head> <...

2020-02-28 19:34:08 7030

原创 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 480

al654123的博客