css
关注
分享
扫一扫
云杰8了
一入前端深似海
展开
-
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 · 1642 阅读 · 0 评论 -
CSS弹性盒子
兼容性问题弹性盒子介绍弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。direction 属性ltr从左向右排列.body { directi原创 2020-12-22 09:02:06 · 627 阅读 · 0 评论 -
渐变边框动画效果
效果图实现原理给字体盒子添加伪元素::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 · 459 阅读 · 4 评论 -
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 · 504 阅读 · 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 · 547 阅读 · 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 · 1108 阅读 · 0 评论 -
CSS动画2D转换
transform 属性。缩放，位移，旋转，倾斜缩放 transform放大缩小。格式transform：scale(x,y);x:代表水平方向的缩放倍数y：代表垂直方向的缩放倍数。如果只写一个值，代表等比例缩放。不会改变真实宽高，也不会旁边的盒子造成影响。位移 translate格式：tramsform：translate（水平位移，垂直位移）属性值：px 正值：向右或向下。百分比 是按照盒子本身的宽高。只写一个值时，是水平位移。旋转：rotate格式： transfor原创 2020-12-16 20:43:57 · 127 阅读 · 0 评论 -
走马灯相册（CSS3D效果）
如下效果图实现原理1.新建一个ul盒子，然后放置12个li，li的背景图设置为图片，绝对定位给图片定位到一起。’2.利用CSS3D转换，给图片位移至指定位置。首先看结构，它相当于一个12边形。...原创 2020-12-18 23:51:03 · 1038 阅读 · 2 评论 -
CSS盒子模型与浮动
CSS盒子模型与浮动CSS盒子模型说明css盒子模型就像一个盒子，就像下边的相框。最常见的盒子div 和span。css有两种， IE 盒子模型、W3C 盒子模型；（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；（3）区 别： IE的content部分把 border 和 padding计算了进去;[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gOkduulL-1607515292887)(C:\U原创 2020-12-09 20:02:00 · 451 阅读 · 2 评论 -
伪元素before、after和定位
伪元素before、after和定位伪元素before和after:before 选择器向选定的元素前插入内容。使用content 属性来指定要插入的内容。<!DOCTYPE html><html><head><meta charset="utf-8"> <title>教程</title> <style>p::before{ content:"Read this -";}</style>原创 2020-12-10 22:12:01 · 7745 阅读 · 1 评论 -
CSS样式优先级
CSS继承性与层叠性、文字和文本样式CSS继承性说明：代码如下：CSS层叠性说明：CSS 文字样式（font）font-style属性font-weight 属性font-size 属性font-family 属性line-hight(行高)CSS文本样式（text）color属性text-align属性text-decoration属性text-indent属性text-overflow 属性word-spacing 属性letter-spacing属性text-transform属性vertical-.原创 2020-12-08 19:43:10 · 257 阅读 · 0 评论 -
文字样式与文本样式
文字样式与文本样式font简写属性font-style字体样式font-variantfont-weight 字体粗细font-size 字体大小line-hight(行高)font-family 字体款式CSS文本样式（text）color属性text-align文=文本对齐text-decoration下划线，上划线等等text-indent文本缩进单行文本省略号与多行文本省略号word-wrapword-spacing 字体间距letter-spacing属性text-transform属性verti原创 2020-12-26 16:01:42 · 917 阅读 · 0 评论 -
使用padding制作高度可控的分隔线
代码如下：调整做上内边距和下内边距可随便调整高度。 <style> span { padding: 6px 6px 6px; margin-left: 12px; border-left: 2px solid #333; font-size: 0; vertical-align: middle; } p {.原创 2020-12-20 21:54:45 · 174 阅读 · 0 评论 -
CSS属性文本的垂直对齐方式与图片文字对齐。
line-height属性1、 如果在一个盒子中只有行内元素，或者文字。字体大小为默认大小，所有文字默认居中对齐。 <style> div { width: 600px; height: 50px; line-height: 50px; border: 1px solid red; font-size: 16px; } </原创 2020-12-16 19:38:32 · 1396 阅读 · 0 评论 -
行内元素之间右间隙解决方法
问题如下：1、两个行内元素之间有间隙。原因是书写代码时，两个行内元素之间有空格，因为html会把之间所有的空格合并为一个空格，空格默认为一个字符，所有中间有空隙。2、上下没有对齐。解决方案如下：1、给父元素设置字体大小为0.间隙消失。 /* font-size: 0; */效果如下。2、给行内元素设置，中心对齐。上下就对齐了。 /* vertical-align: middle; */效果如下。...原创 2020-12-13 12:33:24 · 513 阅读 · 0 评论 -
CSS属性选择器与基础选择器
CSS选择器详解文章目录CSS选择器详解前言1、id选择器2 、类选择器3、标签选择器4、通配符选择器5、后代选择器6、子代选择器7、相邻兄弟选择器8、兄弟选择器9、属性选择器E[att]E[att="val"]E[att~="val"]E[att^="val"]E[att$="val"]E[att*="val"]E[att|="val"]伪类选择器E:link 、E:visited、 E:hover、 E:activeE:focusE:lang(fr)E:not(s)E:first-childE:las原创 2020-12-07 20:51:05 · 194 阅读 · 0 评论