CSS 3

最新推荐文章于 2024-09-28 22:57:04 发布

山i

最新推荐文章于 2024-09-28 22:57:04 发布

阅读量167

点赞数

分类专栏： CSS基础文章标签： css3 css html

本文链接：https://blog.csdn.net/zxcWh/article/details/120420553

版权

CSS基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS3动画</title>
    <style>
        @keyframes mydonghua{
            from{width: 100px;
                height: 100px;
                background: cyan;}
            to{width: 300px;
                height: 100px;
                background: darkorange;}
        }
        div{
            width: 100px;
            height: 100px;
            background-color: darkorange;
            animation: mydonghua 5s;
        }

    </style>
  </head>
    <body>
        <h2>
            CSS3可以创建动画，它可以取代许多网页动画图像、flash动画和javascript实现的效果。<br>
            第一步：自定义动画规则<br>
            例如：<br>
            @keyframes mydonghua{<br>
                from{backgropund:red;}<br>
                to{background:yellow;}<br>
            }<br>
            @keyfranes--自定义动画的关键字<br>
            mydonghua--动画名称<br>
            {}--动画规则描述<br>
            from--动画开始<br>
            to--动画结束<br>
            第二步：在指定的元素作用自己的动画<br>
            animation：动画名称  动画持续时长<br>
            //-webkit-animation：XXXXXXXX [-webkit-  GOOGLE浏览器内核]<br>
            //-ms-animation： xxxxx  [-ms-  IE浏览器内核]<br>
        </h2>
    <div>
        测试建立动画
    </div>
    </body>
</html>

1.CSS3是什么

CSS3是最新CSS的标准。

2.与之前的区别

与之前的css操作方法相同，新增了一些属性设置。CSS3 已完全向后兼容。

下面都是css3中新增的内容:

选择器盒模型背景和边框文字特效 2D/3D转换动画多列布局用户界面

3.CSS3圆角

order-radius 属性设置元素的4角为圆角

如果你要在四个角上一一指定，可以用以下规则：

四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角。

两个值：第一个值为左上角和右下角，第二个值为右上角和左下角

一个值：四个圆角值相同

border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>css3圆角</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 10px solid black;
            /* border-radius: 100px; */
            /* border-radius: 30px  60px; */
            /* border-radius: 30px 60px 100spx; */
            /* border-radius: 30px 30px 30px 30px; */
            border-top-left-radius: 80px;
        }
    </style>
  </head>
  <body>
      <h4>border-radius属性设置元素的4角为圆角</h4>
      <div>

      </div>

  </body>
</html>

3.CSS3盒子阴影

之前学习的text-shadow：水平垂直模糊颜色---设置文字阴影

box-shadpw：水平垂直模糊颜色--属性被用来添加阴影

例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>阴影设置</title>
    <style>
     p{
         color:chocolate; 
         font-size: 30px;
         text-shadow: 10px 10px 2px cornflowerblue;
     }
     div{
         width: 300px;
         height: 300px;
         background-color: cornflowerblue;
         box-shadow: 10px 20px 50px black;
     }
     img{
         width: 300px;
         height: 300px;
         /* border-radius: 150px; */
         box-shadow: 10px 10px 30px black;

     }
    </style>
  </head>
    <body>
      <h4>box-shadow:水平 垂直 模糊 颜色 --属性被用来添加阴影</h4>
      <p>设置文字阴影</p>
      <div>
        测试盒子阴影
      </div>
      <img src="img/preview.jpg" >
    </body>
</html>

5.CSS3 background-clip属性

background-clip属性指定背景绘制区域。border-box padding-box content-box;

例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>background-clip--指定背景绘制区域</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 5px dotted blueviolet;
            padding: 30px;
            background-clip: border-box;
            background-color: cornflowerblue;
        }
    </style>
  </head>
    <body>
        <h3> background-clip 属性指定背景绘制区域
            border-box--包括边框
            padding-box--包括内边距，不包括边框 
            content-box--包括内容，不包括边框，不包括内边距
        </h3>
    <div>测试背景绘制区域</div>
    </body>
</html>

6.CSS3渐变（Gradients）

CSS3渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

CSS3定义了两种类型的渐变（gradients）

线性渐变（Linear Gradients）--向下/向上/向左/向右/对角方向

background-image；linear-gradlient（方向，颜色1，颜色2，........）；

方向--to right【从左向右】 to left 【从右向左】 to bottom【从上向下】 to top【从下向上】

to bottom right 【从左上到右下】

径向渐变 （Radial Gradients）-由它们的中心定义

backgroun-image：radial-gradient (中心点【默认不用写】，颜色1，颜色2，............)

例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS3渐变</title>
    <style>
     .div1{
         width: 300px;
         height: 300px;
         background-image: linear-gradient(to top left,red,blue);
     }
     .div2{
         width: 300px;
         height: 300px;
         border-radius: 150px;
         background-image: radial-gradient(red,blue);
     }
    </style>
  </head>
    <body>
      
    <div class="div1"></div>
    <div class="div2"></div>
    </body>
</html>

7.CSS3过渡

CSS3过渡是元素从一种样式逐渐改变为另一种的效果

要实现这一点，必须规定亮相内容：

1.指定要添加的效果的CSS属性

2.指定效果的持续时间

语法格式：transition：css属性样式持续时间【秒】

例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS3渐变</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            transition:width 5s,height 5s,background-color 5s;

        }
        div:hover{
            width: 300px;
            height: 300px;
            background-color: cyan;
        }
    </style>
  </head>
    <body>
        <h2>
            CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。<br>
            要实现这一点，必须规定两项内容：<br>
            1、指定要添加效果的CSS属性<br>
            2、指定效果的持续时间。<br>
            语法格式: transition: css属性样式  持续时间【秒】<br>
        </h2>

    <div > 测试过渡</div>
    
    </body>
</html>

8.CSS3动画

CSS3 可以创建动画，它可以取代许多网页动画图像，Flash 动画和javascript实现的效果

第一步：自定义动画规划

例如：

@keyframes myfirst{

from{background：red;}

to{background：yellow;}

}

@keyframes--自定义动画的关键字

Myfirst--动画名称

{}--动画规则描述

from--动画开始

to--动画结束

第二部：在指定元的元素作用自己的动画

animation：动画名称动画持续时长

//-webkit-animation： XXXX [-webkit- GOOGLE浏览器内核 ]

//-ms-animation： XXXX[-ms- IE浏览器内核]

例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS3动画</title>
    <style>
        @keyframes mydonghua{
            from{width: 100px;
                height: 100px;
                background: cyan;}
            to{width: 300px;
                height: 100px;
                background: darkorange;}
        }
        div{
            width: 100px;
            height: 100px;
            background-color: darkorange;
            animation: mydonghua 5s;
        }

    </style>
  </head>
    <body>
        <h2>
            CSS3可以创建动画，它可以取代许多网页动画图像、flash动画和javascript实现的效果。<br>
            第一步：自定义动画规则<br>
            例如：<br>
            @keyframes mydonghua{<br>
                from{backgropund:red;}<br>
                to{background:yellow;}<br>
            }<br>
            @keyfranes--自定义动画的关键字<br>
            mydonghua--动画名称<br>
            {}--动画规则描述<br>
            from--动画开始<br>
            to--动画结束<br>
            第二步：在指定的元素作用自己的动画<br>
            animation：动画名称  动画持续时长<br>
            //-webkit-animation：XXXXXXXX [-webkit-  GOOGLE浏览器内核]<br>
            //-ms-animation： xxxxx  [-ms-  IE浏览器内核]<br>
        </h2>
    <div>
        测试建立动画
    </div>
    </body>
</html>

9.CSS3 2D转换

CSS3 2D转换可以对元素进行移动、缩放、转动、拉长或拉伸。

translate（）---根据左（X轴）和顶部（Y轴）位置给定的参数，从当前元素位置移动。

translate( 0px 0px);

roeate() ---在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转

transform：rotate（90deg）；

scale（）---该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

transform：scale（2，3）

skew（）---该元素在X轴和Y轴上倾斜

transform：skew（30deg，20deg）；

matrix（）---将上面2D变换方法合并成一个，同时实现平移，旋转，缩放，倾斜。

matrix 方法有六个参数，包含旋转，缩放，移动，（平移）和倾斜功能。

10.CSS3 3D转换

rotateX（）--围绕其在一个给定度数X轴旋转的元素

transform：rotateX（130deg）

rotateY（）--围绕其在一个给定度数Y轴旋转的元素

transform：rotateY（130deg）

例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>2D/3D转换</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: darkorange;
            animation: mydonghua6 5s;
        }
         @keyframes mydonghua1{
            from{transform: translate(10px,10px);}
            to{transform: translate(100px,100px);}
        } 
        @keyframes mydonghua2{
            from{transform: rotate(0deg);}
            to{transform: rotate(90deg);}
        }
        @keyframes mydonghua3{
            from{transform: scale(0,0);}
            to{transform: scale(2,3);}
        }
        @keyframes mydonghua4{
            from{transform: skew(0,0);}
            to{transform: skew(30deg,20deg);}
        }
        @keyframes mydonghua5{
            from{transform: matrix(0,0,0,0,0,0);}
            to{transform: matrix(0.866,0.5,-0.5,0.866,0,0);}
        }
        @keyframes mydonghua6{
                from{ transform:rotateX(0deg);}
                to{ transform:rotateX(180deg);}
             }
             @keyframes mydonghua7{
                from{ transform:rotateY(0deg);}
                to{ transform:rotateY(180deg);}
             }
    </style>
  </head>
    <body>
        <h4>
            CSS3 2D转换可以对元素进行移动、缩放、转动、拉长或拉伸。<br>
            translate()--根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。<br>
            rotate()--在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转<br>
            scale()--该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数<br>
            skew()---该元素在X轴和Y轴上倾斜。<br>
            CSS3 3D 转换<br>
            rotateX()--围绕其在一个给定度数X轴旋转的元素。<br>
            rotateY()--围绕其在一个给定度数Y轴旋转的元素。<br>
        </h4>

        <div>CSS3 2d/3d转换</div>
    </body>
</html>

11.CSS3多媒体查询

CSS3根据设置自适应显示

媒体查询可用于检测很多事情，例如：

viewport（视窗）的宽度与高度

设备的宽度与高度

朝向（智能手机横屏，竖屏）

分辨率

目前很多针对苹果手机，Android 手机，平板等设备都会使用多媒体查询。

多媒体查询语法

@media not| only mediattype and (expressions) {css 代码....；}

not：not是用来排除掉某些特定的设备，比如@media not print（非打印设备）

only: 用来定某种特别的媒体类型。比如 @media only print（只允许打印设备）。

mediatype 多媒体类型

all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等。
speech	用于屏幕阅读器

expressions---表达式例如:(max-width: 480px) 小于480像素

{ CSS 代码...; }-----具体样式设置

例如:如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>多媒体查询</title>
    <style>
        h4{
            background-color:yellow;
        }
        @media screen and (max-width:680px){
            h4{
                background-color: green;
                font-size: 30px;
            }
        }
    </style>
   
  </head>
    <body>
        <h4>
            @media  not|only  mediatype and (expressions) { CSS 代码...; }<br>
            not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。<br>
            only: 用来定某种特别的媒体类型。比如 @media only  print（只允许打印设备）。<br>
            mediatype 多媒体类型<br>
            all 用于所有多媒体类型设备<br>
            print   用于打印机<br>
            screen  用于电脑屏幕，平板，智能手机等。<br>
            speech  用于屏幕阅读器<br>
            expressions---表达式  例如:(max-width: 480px)  小于480像素<br>
            { CSS 代码...; }-----具体样式设置<br>
        </h4>

    </body>
</html>