leiyanting - 博客园

css3基础---flex新版与旧版

摘要：作用容器 1.flex基础点什么是容器，什么是项目，什么是主轴，什么是侧轴？项目永远排列在主轴的正方向上 flex分新旧两个版本 -webkit-box -webkit-flex / flex 2.注意点我们都知道新版本的flex要比老版本的flex强大很多，有没有必要学习老版本的flex？阅读全文

posted @ 2021-07-09 15:10 leiyanting 阅读(118) 评论(0) 推荐(0)

css3基础---animation动画

摘要：关键帧@keyframes 语法： @keyframes animiationName{ keyframes-selector{ css-style; } } animiationName:必写项，定义动画的名称 keyframes-selector：必写项，动画持续时间的百分比 from：0% t 阅读全文

posted @ 2021-07-08 16:07 leiyanting 阅读(133) 评论(0) 推荐(0)

css3基础---立方体练习

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2021-07-08 10:44 leiyanting 阅读(54) 评论(0) 推荐(0)

css3基础---perspective景深进阶

摘要：景深:让3D场景有近大远小的效果（我们肉眼距离屏幕的距离）是一个不可继承属性，但他可以作用于后代元素（不是作用于本身的）原理：景深越大灭点越远元素变形更小景深越小灭点越近元素变形更大景深基点视角的位置灭点指的是立体图形各条边的延伸线所产生的相交点。透视点的消失点景深基点默阅读全文

posted @ 2021-07-08 09:53 leiyanting 阅读(563) 评论(0) 推荐(0)

css3基础---transform(3D变形)

摘要：在浏览器中，X轴是从左到右，Y轴是从上到下，Z轴是从里到外景深 perspective(n)为 3D 转换元素定义透视视图 perspective的中文意思是：透视，视角。没有透视定义，不成3D。下图为透视的一张图： CSS3中3D transform的透视点是在浏览器的前方！需要设置该元素阅读全文

posted @ 2021-07-07 21:18 leiyanting 阅读(1825) 评论(0) 推荐(0)

css3基础---transform 2D变形

摘要： transform 属性允许你修改CSS视觉格式模型的坐标空间transform 属性 , 只对 block 级元素生效！旋转（rotate） transform:rotate(angle); 正值:顺时针旋转 rotate(360deg) 负值:逆时针旋转 rotate(-360deg) 只能设阅读全文

posted @ 2021-07-07 11:57 leiyanting 阅读(131) 评论(0) 推荐(0)

css3基础---transition过渡简写

摘要：简写属性transition: transition是一个简写属性，用于 transition-property,transition-duration,transition-timing-function, 和transition-delay。 CSS 过渡由简写属性 transition 定义阅读全文

posted @ 2021-07-07 11:29 leiyanting 阅读(634) 评论(0) 推荐(0)

css3基础---transition过渡

摘要： transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 定义过渡效果何时开始。默认阅读全文

posted @ 2021-07-07 10:16 leiyanting 阅读(195) 评论(0) 推荐(0)

css3基础---径向渐变(放射渐变)

摘要： radial-gradient() 函数创建一个<image>，用来展示由原点（渐变中心）辐射开的颜色渐变 -默认均匀分布 radial-gradient(red,blue); -不均匀分布 radial-gradient(red 50%,blue 70%); -改变渐变的形状 radial-gra 阅读全文

posted @ 2021-07-06 21:08 leiyanting 阅读(322) 评论(0) 推荐(0)

css3基础---光斑动画练习

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文

posted @ 2021-07-06 20:27 leiyanting 阅读(100) 评论(0) 推荐(0)

导航

2021年7月9日

2021年7月8日

2021年7月7日

2021年7月6日