![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3
她还会来吗
长夜将至,我从今开始守望
展开
-
利用3D转换实现旋转木马
该案例就是对3D转换的利用,话不多说直接上代码 案例效果 案例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旋转木马</title> <style原创 2021-04-16 23:23:37 · 172 阅读 · 0 评论 -
transform3D转换
3D转换 三维坐标系 x轴:水平向右 注意:x右边是正值,左边是负值 y轴:垂直向下 注意:y下边是正值,上边是负值 z轴:垂直屏幕 注意:往外面是正值,往里面是负值 主要知识点 3D位移:translate3d(x,y) /* 仅在x轴移动 */ transform:translateX() /* 仅在y轴移动 */ transform:translateY() /* 仅在z轴移动(注意:translateZ一般用px单位)*/ transform:translateZ() /* xyz是不能省略原创 2021-04-16 18:17:42 · 402 阅读 · 0 评论 -
transform2D转换
2D转换 移动:translate 语法格式: /* x就是x轴上移动的位置,y则是在y轴上移动的位置 中间用逗号分割 如果里面参数是% 移动的距离是 盒子自身的宽度或者高度来对比的*/ transform:translate(x,y) /* 只在x轴上移动 */ transform:translateX() /* 只在y轴上移动 */ transform:translateY() 特点 定义2D中的移动,沿着x和y轴移动 translate最大的优点:不会影响到其他与元素的位置 translat原创 2021-04-16 16:41:58 · 120 阅读 · 0 评论 -
仿小米logo切换
今天看博客的时候发现类似于小米logo切换的效果,所以就心血来潮,写下这篇博客,。 话不多说直接上代码了 冲冲冲!!!! 运行效果 伪元素实现 该方法主要在于为盒子设置伪元素,并给伪元素设置背景,利用hover实现伪元素的切换,从而实现滑动效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl原创 2021-04-15 23:51:49 · 309 阅读 · 0 评论 -
CSS背景属性
背景属性 背景图片位置 参数是方位名词, /* 如果是方位名词 right center和center right 效果是等价的 跟顺序没有关系 如果第二个参数省略 默 认垂直居中显示*/ background-position: center right; 如果指定的两个值都是方位名词,则两个值前后顺序无关 如果只指定了一个方位名词,另一个值省略,则第二个值默认默认居中对齐 background-position:center; 参数是精确单位 如果参数是精确坐标,那原创 2021-04-14 14:03:35 · 87 阅读 · 0 评论 -
flex布局
flex布局 传统布局与flex布局 传统布局: 兼容性好 布局繁琐 局限性,不能在移动端很好的布局 flex弹性布局: 操作方便,布局极为简单,移动端应用广泛 PC端浏览器支持情况较差 IE11或更低版本,不支持或仅部分支持 flex布局原理 当我们为父盒子设为flex布局以后,子元素的float,clear和vertical-align属性将失效。 总结:就是通过父盒子tianjiaflex属性,来控制子盒子的位置和排列方式 常见属性 常见父属性 flex-direction:设置主轴的方向原创 2021-04-07 00:43:26 · 169 阅读 · 2 评论 -
打字机案例
案例效果 案例步骤 先创建一个div,在其中输入你想要打印的文字 在css中设置动画(改变宽度) 运行代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=原创 2021-04-05 18:49:24 · 119 阅读 · 0 评论 -
奔跑的熊大案例
运行效果 运行代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sign in</title> <link rel="stylesheet" href原创 2021-04-05 18:23:56 · 649 阅读 · 0 评论 -
css3动画
动画(animation) 动画的基本使用 定义动画 @keyframes 动画名称{ /* 1. 可以做多个状态的变化keyframe关键帧 */ /* 2. 里面的百分比要是整数 */ 0%{ background-position: 0 0; } 100%{ background-position: -3800px 0;原创 2021-04-08 21:11:46 · 87 阅读 · 0 评论