![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
分享前端知识
文章平均质量分 92
小艾同学喔
这个作者很懒,什么都没留下…
展开
-
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 · 664 阅读 · 0 评论 -
CSS3之动画(animation)和四个小案例
一、动画(animation)1.动画概述可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果。2.语法1.0%是动画的开始可以用from替代,100%是动画的完成可用to替代。2.在CSS中用@keyframes中定义动画的样式,在用选择器调用animation调用动画3.动画是是元素从一种样式逐渐变化成另一种样式的效果。可以任意改变动画节点。@keyframes...原创 2020-03-08 19:31:26 · 2439 阅读 · 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 · 244 阅读 · 0 评论 -
04.CSS3 transition属性及5个小案例分享
一、介绍过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果,经常和 :hover 一起 搭配使用。二、语法transition: 要过渡的属性 花费时间 运动曲线 何时开始;transition: property duration timing-func...原创 2020-02-29 17:49:26 · 1236 阅读 · 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 · 2207 阅读 · 0 评论 -
让子盒子在父盒子中垂直居中的七个方法
一、用padding实现1.padding-top = (父盒子的高度 - 子盒子的高度) / 22.padding-left = (父盒子的宽度 - 子盒子的宽度) / 23.由于padding会撑大盒子,所以父盒子的宽高要减去对应的padding值<!DOCTYPE html><html lang="zh-CN"><head> <...原创 2020-02-28 19:34:08 · 7086 阅读 · 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 · 494 阅读 · 0 评论