css3
关注
分享
扫一扫
云杰8了
一入前端深似海
展开
-
meta charset=“UTF-8“字符集、空白折叠现象、多行文字省略号
设置文件的编码格式为UTF-8常见的编码格式：gb2312 只包含简体和一些特殊字符gbk 包含简体与繁体，还有古汉语文字，还有日本片假名 特殊字符。 **UTF-8 几乎包含所有人类语言。** gb2312与uft-8 比较 uft-8 更臃肿，**加载更慢** gb2312 更小巧，加载速度更快 **同样显示5000个汉字，uft-8会比gb2312多5kb。** 假如： 你们公司做中文网页，追求网页的加载速度，要使用gb原创 2020-12-25 19:17:09 · 1376 阅读 · 0 评论 -
原生CSS制作轮播图
原生CSS制作轮播图label+inut标签制作手动轮播图animation制作自动轮播图label+inut标签制作手动轮播图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2020-12-24 23:21:26 · 2580 阅读 · 3 评论 -
CSS单位与sass入门
CSS单位CSS单位emremvw和vh应用sass入门安装教程CSS单位em它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；如果当前元素有大小就是按照当前元素大小remrem是相对于html字体大小而计算的。rem：相对单位 root em。 参考值为：HTML根标签的font-size的值。 iPhone5 320px 上面有640个像素点。 1px=1个物理像素点 1px=2个物理像素点。 160/原创 2020-12-24 20:45:27 · 299 阅读 · 1 评论 -
前端页面布局方式与响应式布局
前端页面布局方式前端页面布局方式PC端布局圣杯布局双飞翼布局弹性盒子布局前端页面布局方式内容区域内容区域一般有三种形式:1 列：一般用于移动端2 列：一般用于平板设备3 列：一般用于 PC 桌面设备PC端布局两边宽固定，中间自适应，中间区域在HTML先行书写，便于先行渲染。圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。圣杯布局中心三栏布局，center，left，right全部浮动，父盒子设置清原创 2020-12-24 13:25:54 · 534 阅读 · 0 评论 -
CSS弹性盒子
兼容性问题弹性盒子介绍弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。direction 属性ltr从左向右排列.body { directi原创 2020-12-22 09:02:06 · 587 阅读 · 0 评论 -
CSS 绘制太阳系各个行星运行轨迹
效果图原理行星沿着自身轨道旋转。设置盒子，宽高均为800px，采用相对定位。太阳绝对定位到盒子中间。地球轨道盒子，宽高250px为圆形，背景色透明，加一个灰色边框，就是地球轨道，绝对定位，left=400px-250px/2=275px，top=400px-250px/2=275px。地球设置为圆形宽高18px，绝对定位，要想地球在轨道上，left值就等于轨道的left值减去半径在加上边框半径的一半。275+0.5-9=266.5pxtop值等于400px-9px=391px。旋转中原创 2020-12-20 15:54:12 · 1023 阅读 · 0 评论 -
CSS3滤镜
CSS3滤镜Filter 函数blur(px)模糊图像brightness(%，num)亮度contrast() 图像的对比度drop-shadow()图像后方应用投影grayscale()将图像转为灰度图hue-rotate()改变图像的整体色调invert()反转图像颜色opacity()改变图像透明度saturate()超饱和或去饱和输入的图像sepia()将图像转为棕褐色所以滤镜实例如下，图片自己添加即可。Filter 函数filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用原创 2020-12-20 00:18:48 · 478 阅读 · 2 评论 -
渐变边框动画效果
效果图实现原理给字体盒子添加伪元素::after,通过定位定在盒子上，设置宽高，添加背景色为渐变色，添加动画，移动渐变色背景的background-position.代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=原创 2020-12-19 17:42:17 · 412 阅读 · 4 评论 -
走马灯相册（CSS3D效果）
如下效果图实现原理1.新建一个ul盒子，然后放置12个li，li的背景图设置为图片，绝对定位给图片定位到一起。’2.利用CSS3D转换，给图片位移至指定位置。首先看结构，它相当于一个12边形。...原创 2020-12-18 23:51:03 · 910 阅读 · 2 评论 -
CSS3实现小球加载效果
实现原理。设置大盒子居中.box1与box2定位在一起，给小球定位到左上，右上，右下，右下， box2旋转45deg，盒内小球跟着旋转，错开位置，呈现出八个小球给初始色设置透明度变小,动画执行时,透明度变成1,看起来就是亮了一样 。设置动画名称load,执行时间为1秒,次数为无限次infinite。8个小球,一起执行,设置延迟时间,最大延迟等于执行时间,当动画执行12.5%时,也就是执行了0.125秒时小球的透明度为1,然后剩下的87.5%剩下的处于透明度为0.3.相当原创 2020-12-18 10:40:40 · 513 阅读 · 0 评论 -
CSS3D旋转与动画
CSS3D旋转与动画转换属性transform属性定义2D与3D旋转。transform-origin定义旋转中心点2D旋转默认是中心旋转，3D旋转可以自己设置。语法transform-origin:x y z；默认值transform-origin:50% 50% 0；也就是2D旋转的中心位置。单位transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。属性值详解默认值以自身原点原创 2020-12-17 19:11:13 · 1578 阅读 · 0 评论 -
CSS3渐变色与过渡效果
CSS3渐变色与过渡效果（2D）##CSS渐变色介绍CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向。原创 2020-12-16 09:41:59 · 1796 阅读 · 2 评论 -
CSS3（background）背景属性与文字阴影
CSS（background）背景属性CSS 背景属性用于定义HTML元素的背景。CSS 属性定义背景效果:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position背景颜色background-color 属性定义了元素的背景颜色.CSS中，颜色值通常以以下方式定义:十六进制 - 如："#ff0000"RGB - 如：“rgb(255,0,0)”颜色名称原创 2020-12-14 14:45:02 · 1917 阅读 · 2 评论