CSS3元素篇二

最新推荐文章于 2022-07-21 17:25:34 发布

月亮不营业

最新推荐文章于 2022-07-21 17:25:34 发布

阅读量250

点赞数 1

分类专栏：笔记文章标签： html5 css3

本文链接：https://blog.csdn.net/qq_46440394/article/details/105000056

版权

笔记专栏收录该内容

37 篇文章 1 订阅

订阅专栏

CSS2与CSS3的区别

1.css3已经完全向后兼容，故不必改变原有设计
2.大部分css3标准都重复css2的内容，在此基本初上进行了增补和修订
3.css3支持定义圆角、背景颜色渐变、背景图片大小控制和定义多个背景图片
4.css3的部分属性个别浏览器不支持

css3的私有前缀

由于CSS3新增的有些属性尚未成为W3C标准的一部分，因此对于这些属性来说，部分浏览器都只能识别带有自身私有前缀的属性。
也就是说，我们在书写CSS3属性的时候，可能需要在属性前面加上浏览器的私有前缀，然后该浏览器才能识别对应的CSS3属性。

css3 变换

一、CSS3圆角边框：实际上是在矩形的四个角分别做内切圆，然后通过设置内切圆的半径来控制圆角的弧度。（左上角”top-left；右下角：bottom-left；右上角：top-right；左下角：bottom-right）
在这里插入图片描述
1.border-radius属性：
基本语法格式：
border-radius:1-4 length |%/1-4length|%;
当宽、高、圆角的值一致时为一个圆

//也可以设置百分比
//length用于设置对象的圆角半径长度，不可为负值。如果“/”前后的值都存在，那么前面的值设置其水平半径，后面值设置其垂直半径。如果没有“/”.则表示水平和垂直半径相等。

另外其四个值按照top-left、top-right、bottom-right、bottom-left的顺序来设置。

如果省略bottom-left，则与top-right相同，如果省略bottom-right，则与top-left相同，如果省略top-right，则与top-left相同。
各个角也可以单独设置：border-top-left-radius: //左上角他们的参数都是先y轴然后x轴
（其他三个角写法与此相同）
Css3圆角边框属性可以完成很多不同的图形效果！
下面是border-radius属性的简单用法（可以用来画爱心等图形哦！）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3圆角边框</title>
  <style>
    body{
      padding:0;
      background-color:#F7F7F7 ;
    }
    div{
      margin:20px;
      float:left;
    }
    /*饼环*/
    .border-radius{
      width:40px;
      height:40px;
      border:70px solid #93baff;
      border-radius:90px;
    }
    /*四边不同颜色*/
    .border-radius1 {
      width:0px;
      height:0px;
      border-width:90px;
      border-style:solid;
      border-color:#ff898e #93baff #c89386 #ffb151;

    }

  </style>
</head>
<body>
<div class="border-radius "></div>
<div class="border-radius1"></div>
</body>
</html>

在这里插入图片描述
二、过渡(颜色、位置等）
2.transition（转场）属性：
Css3的过渡就是平滑的改变一个元素的css值，使元素从一个样式逐渐过渡到另一个样式。
基本语法：
tansition:property duration timing-function delay;

注：
property:应用过渡的属性名称；
duration:过渡效果花费时间；
timing-function:过渡效果的时间曲线；
delay:效果开始之前需要花费的时间；

tansition是一个复合属性：

1.ansition-property:规定应用过渡的css属性名称（none:没有属性会获得过渡效果；
all:默认值，所有属性都将获得过渡效果；property:定义过渡效果的css属性名称列表）
2.nsition-duration:定义过渡花费的时间（time值：以秒或毫秒计，默认是0，意味着没有效果)
3.ansition-timing-function:规定过渡的时间曲线 (linear:规定以相同速度开始至结束的过渡效果(等于cubic-bezier(0,0,1,1));
ease:默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果(等于cubic-bezier（0.25，0.1，0.25，1）);
ease-in:规定以慢速开始的过渡效果(等于cubic-bezier（0.42，0，1，1）);
ease-out:规定以慢速结束的过渡效果(等于cubic-bezier
(0.42，0，0.58，1)）;
cubic-bezier(n,n,n,n):在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数（0，0，0.58，1）);
ease-in-out:规定以慢速开始和结束的过渡效果（等于cubic-bezier值))
4.transition-delay:规定效果开始之前需要等待的时间 (time值：以秒或毫秒计。默认是0)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3过渡</title>
  <style>
    /*方环*/
    .border-radius {
      width:40px;
      height:40px;
      border:70px solid #ff6e9b;
      transition: 3s;
    }
    /*圆环*/
    .border-radius:hover {
      width:40px;
      height:40px;
      border:70px solid #ff6e9b;
      border-radius: 90px;
    }
  </style>
</head>
<body>
<div class="border-radius "></div>
</body>
</html>

在这里插入图片描述
这是设置过渡效果之前的图形，当鼠标移动到图形位置上时开始出现过渡效果（有矩形逐渐成为圆饼状）

transition:alll 3s 1s linear;(第一次出现的时间是：持续时间；第二次出现的时间是：延迟时间)

动画

定义东湖的方式：
1.@keyframes 动画名称{
从 from{
}到 to{}
}
考虑兼容性问题
使用：
animoation：名称过度时间过渡类型延迟时间循环次数是否反向运动动画时间之外的状态检索或设置对象动画的状态

2.@keframes 动画名称{
0%{}
20%{}
40%{}
…
}

月亮不营业

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3元素篇二

一、CSS3圆角边框：实际上是在矩形的四个角分别做内切圆，然后通过设置内切圆的半径来控制圆角的弧度。（左上角”top-left；右下角：bottom-left；右上角：top-right；左下角：bottom-right）1.border-radius属性：基本语法格式：border-radius:1-4 length |%/1-4length|%;//也可以设置百分比//length...
复制链接

扫一扫