CSS3
关注
分享
扫一扫
桃花扇J
前端女孩的自我修养
展开
-
1分钟深入了解CSS3的动画属性animation
animation可以传8个参数，常用的有6个，动画名称（@keyframe定义好的），执行时长，动画类型（默认ease），执行延时时常（默认0），动画循环次数（默认1），运动方向（默认normal）原创 2020-04-11 16:55:36 · 626 阅读 · 0 评论 -
@keyframes—定义动画关键帧
@keyframes用来定义动画名和关键帧，其语法规则如下@keyframes run { 0% { //有动画性质的属性的改变情况 } 25% { } 50% { } 75% { } 100% { }}即将动画执行的过程分为若干段，在每一段中定义该段中最后一帧的元素的状态【注】1....原创 2020-04-06 08:24:10 · 727 阅读 · 0 评论 -
贝塞尔曲线 cubic-bezier()
贝塞尔曲线在很多方面都有应用，咱们主要用它设置属性变化的速度。笼统点讲比方说ease-in这个值，它表示变化先慢后快，如图1这个样子，ease-in的贝塞尔曲线为cubic-bezier(0.42, 0, 1.0, 1.0)。图1贝塞尔曲线是一条光滑的曲线，由两个定点和两个动点确定确定，顶点坐标分别为(0,0)和(1,1)，动点决定了它的斜率，它在某时刻的斜率即为在该时刻的速度，简言之...原创 2020-04-05 23:16:09 · 2260 阅读 · 0 评论 -
CSS3过渡属性transition详解
拖了两天的更新诶，懈怠了懈怠了transition蛮好玩的，可以实现由一个状态像另一个状态的动画过渡，无缝斜街的感觉，不多说啦，开始介绍属性吧~1.transition可以传4 / (4n)个参数，（4n是因为它可以对不同的属性分别加过渡效果）第一位：设置参与过渡的属性第二位：过渡的时间第三位：过渡的动画类型（选填，默认ease）第四位：开始过渡的延时（选填，默认0）这...原创 2020-04-05 20:45:23 · 1388 阅读 · 0 评论 -
CSS3的弹性盒子flex详解（2）
上篇讲了弹性盒子中盒子的一些属性，这篇讲子项的属性1.order设置或检索弹性盒子子项出现的顺序，默认值为0，按数值大小由小到大排列【例】原创 2020-04-02 22:42:24 · 304 阅读 · 0 评论 -
CSS3的弹性盒子flex详解（1）
弹性盒子的属性分为盒子的属性和子项的属性，先介绍盒子的属性吧，子项的属性下一篇讲目录1.dislay2.flex-direction3.flex-wrap4.align-items5.justify-content6.align-content1.dislay表示盒子为弹性盒子的属性值有flex，inline-flex（1）flex：该弹性盒子为块元素，如...原创 2020-04-02 10:46:52 · 923 阅读 · 0 评论 -
CSS3属性之resize
resize需与overflow配合使用，overflow上一篇写过了，直接在上一节的基础上讲一下resizeresize可以让用户重新调整overflow属性值为非visible的元素的宽高，有both / horizontal /vertical 三种属性值1.both：允许用户调整元素的宽高【例1】2.horizontal：允许用户调整元素的宽度【例2】3.vertica...原创 2020-04-02 05:55:46 · 952 阅读 · 1 评论 -
overflow属性详解
overflow是对溢出内容的处理，有四个属性值visible，hidden，scroll，auto，且可以分别设置overflow-x，overflow-y，需要注意的是：当单独设置了overflow-x或者overflow-y时（visible除外），另一个默认属性值为auto，如【例5】。下面先来介绍它的四个属性值1.visible（默认值）：使溢出内容展示2.hidden...原创 2020-04-01 23:09:25 · 50772 阅读 · 6 评论 -
css3盒模型：IE6混杂模式下的盒模型
IE6混杂模式下的盒模型本来是IE的特有的，后来大家发现，诶还行好用，所以在CSS3中加入了属性box-sizing，当属性值为border-box时，则按照混杂模式的原则创建盒子适用于场景1.宽度不确定（百分数），但内边距固定；2.input，因为默认带两像素的边框，父级宽度不确定，且input又想与父级同宽，则可使用该属性来实现3.输入框想加padding更方便还有别的等等...原创 2020-04-01 21:17:42 · 311 阅读 · 0 评论 -
CSS3属性——text
1.text-shadow2.text-stroke3.word-break4.column原创 2020-03-30 19:18:01 · 440 阅读 · 0 评论 -
linear-gradient && radical-gradient详解
线性渐变与径向渐变，挺好玩的两个属性值，不过挺复杂的，希望能捋清楚吧1.linear-gradient（1）基础用法传两部分参数 方向 + 颜色（颜色可填两个以上的值），方向可为to right / top / left / bottom（默认方向）/ top right / top left / bottom right / bottom left 以及角度等【例1】默认值为bo...原创 2020-03-26 20:33:53 · 1420 阅读 · 0 评论 -
CSS3属性之background
喜欢C3的内容，因为终于可以做炫酷的网页了！！！废话不多说上干货~~~一、border1.border-radiusborder-radius这个属性在学习CSS2的时候也经常使用，现在对它进行拆分，先来做一个正方形如下，然后看看我们在CSS2中是怎么用的吧（1）不做拆分【例1】四角统一设置一个参数<!DOCTYPE html><html lang...原创 2020-03-26 10:21:45 · 564 阅读 · 0 评论 -
CSS3之border
本来是想把border和background写一块的，结果写着写着发现background内容太多，先发border吧属性这些东西，还是得自己动手试试看，挺好玩的，尤其是background的属性目录1.border-radius（1）不做拆分（2）拆分（3）大合并2.border-image（1）border-image-source（2）border-ima...原创 2020-03-26 10:09:34 · 663 阅读 · 0 评论 -
CSS3选择器
一、Relationship SelectorsE + P：选择下一个满足条件的兄弟元素节点E ~ P：选择所有满足条件的兄弟元素节点<html lang="en"><head> <style> *{ margin: 10px 10px ; } div { ...原创 2020-03-22 20:05:22 · 359 阅读 · 0 评论