CSS3属性、选择器，2/3D（动画）

最新推荐文章于 2023-04-09 13:44:16 发布
最新推荐文章于 2023-04-09 13:44:16 发布
阅读量438 收藏 1
点赞数
分类专栏： css 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27185691/article/details/106529668
版权

新增属性

  • 兼容性 IE9+ 浏览器支持, 但是不会影响页面布局,可以放心使用.

圆角边框（重点）

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
border-radius 属性用于设置元素的外边框圆角。

  • 语法： border-radius:length;

  • 参数值可以为数值或百分比的形式

  • 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%

  • 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

  • 分开写：**border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius **

盒子阴影

我们可以使用 box-shadow 属性为盒子添加阴影。

  • 语法： box-shadow: h-shadow v-shadow blur spread color inset;
值描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊距离。
spread可选。阴影的尺寸。
color可选。阴影的颜色。
inset可选。将外部阴影 (outset) 改为内部(inset)阴影。
  • 实例： div{ box-shadow: 10px 10px 5px rgba(0, 0, 0, .3); }
  • outset： 默认不写的，写了会不起效果。
  • 盒子阴影不占用空间，不会影响其他盒子排列。

文字阴影

可以规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。

  • 语法： text-shadow: h-shadow v-shadow blur color;
值描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊距离。
color可选。阴影的颜色。

CSS3新增选择器

  • E：元素
  • att：属性
  • 类选择器、属性选择器、伪类选择器，权重为 10。

属性选择器

选择符简介
E[att]选择具有att属性的E元素
E[att = “val”]选择具有att属性且属性等于 val 的E元素
E[att ^= “val”]匹配具有att属性且值是以 val开头 的 E元素
E[att $= “val”]匹配具有att属性且值是以 val结尾 的 E元素
E[att *= “val”]匹配具有att属性且值中 含有val 的 E元素
  • 代码解析
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3属性选择器</title>
    <style>
        input{
            display: block;
            margin-bottom: 20px;
        }
        /*E[att] 选择具有att属性的E元素 
        **input[value] 选择具有value属性的input元素 
        */
        input[value]{
            background-color: pink;
        }
         /*E[att = 'val'] 选择具有att属性且属性等于val的E元素 
        **input[type = 'password'] 选择具有type属性且值等于val的input元素 
        */
        input[type = 'password']{
            background-color: skyblue;
        }
        /*E[att ^= "val"    选择具有att属性且
        **E[att $= "val"]   选择具有att属性且是以val结尾的E元素
        **E[att *= "val"    选择具有att属性且包含val的E元素
        ** div[class ^= 'con']  选择具有 class属性且是以 con开头 的div元素
        ** div[class $= 'con']  选择具有 class属性且是以 con结尾 的div元素
        ** div[class *= 'con']  选择具有 class属性且 包含con 的div元素
        */
        div[class ^= 'con']{
            background-color: pink;
        }
        div[class $= 'con']{
            background-color: skyblue;
        }
        div[class *= 'con']{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text" value="具有value属性">
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <div class="con_1">具有con的开头</div>
    <div class="con_2">具有con的开头</div>
    <div class="con_3">具有con的开头</div>
    <div class="in_con">具有con的结尾</div>
    <div class="in_con">具有con的结尾</div>
    <div class="in_con_5">具有con</div>
    <div class="in_com_4">具有con</div>
</body>
</html>

结构伪类选择器

选择符简介
E：first-child匹配父元素的第一个子元素 E
E：last-child匹配父元素最后一个子元素 E
E：nth-child(n)]匹配父元素的第 n 个子元素 E （ n 可以是数字、关键字和公式）
E：first-of-type指定类型的 E 的第一个
E：last-of-type指定类型的 E 的最后一个
E：nth-of-type(n)指定类型的 E 的第 n 个
  • nth-child(n)
  1. 数字的话从1开始
  2. 一般用的关键字：even偶数 odd奇数
  3. 公式：
    2n： 偶数 2n + 1： 奇数。
    5n： 5 10 15 …
    n + 5： 从第5个开始到最后一个
    -n + 5： 前5个，包含第5个
    ······
  • 代码解析
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类选择器</title>
    <style>
        /* child */
        /* 第一个 */
        div:first-child{
            background-color: pink;
        }
        /* 最后一个
        因为child方法是先 排序（last-child）,再寻找前面的 元素（div）这里最后一个是元素是span。
        所以匹配不到 */
        div:last-child{
            background-color: pink;
        }
        /* 指定哪一个 nth-child(n) 选择这里 n = 3 所以配到了第三个 */
        div:nth-child(3){
            background-color: skyblue;
        }
        /* type */
        /* 第一个 */
        p:first-of-type{
            background-color: slategray;
        }
        /* 最后一个 */
        p:last-of-type{
            background-color: tomato;
        }
        /* 指定哪一个 nth-child(n) 选择这里 n = 2 所以配到了第2个 */
        p:nth-of-type(2){
            background-color: tomato;
        }

        span{display: block;}
        /* 公式的用法 */
        /* 选择偶数行: even 或者 2n */
        /* span:nth-of-type(even){
            background-color: turquoise;
        } */
        span:nth-of-type(2n){
            background-color: turquoise;
        }
        /* 选择奇数行: odd 或者 2n */
        span:nth-of-type(odd){
            background-color: skyblue;
        }
        /* span:nth-of-type(2n+1){
            background-color: skyblue;
        } */
        /* 包含第六个的后面所有个数 */
        ul li:nth-child(n + 6){
            background-color: skyblue;
        }
        /* 包含第四个的前面四个 */
        ul li:nth-child(-n + 4){
            background-color: turquoise;
        }
    </style>
</head>
<body>
    <!-- <input type="password" name="" id=""> --> <!-- child方法 -->
    <div>div的第1个</div>
    <div>div的第2个</div>
    <div>div的第3个</div>
    <div>div的第4个</div>
    <div>div的第5个</div>
    <div>div的最后一个</div>
    <p>p的第1个</p>
    <p>p的第2个</p>
    <p>p的第3个</p>
    <p>p的第4个</p>
    <p>p的第5个</p>
    <p>p的最后一个</p>
    <span>span的第1个</span>
    <span>span的第2个</span>
    <span>span的第3个</span>
    <span>span的第4个</span>
    <span>span的第5个</span>
    <span>span的最后一个</span>
    <ul>
        <li>li的第1个</li>
        <li>li的第2个</li>
        <li>li的第3个</li>
        <li>li的第4个</li>
        <li>li的第5个</li>
        <li>li的第6个</li>
        <li>li的第7个</li>
        <li>li的最后一个</li>
    </ul>
</body>
</html>
nth-chil与nth-of-type的区别
  • E:nth-chil
    把所有的盒子排序
    执行时先看 nth-chil(n) 再判断 E,先选择第几个，再判断元素E
  • E:nth-of-type
    把指定元素的盒子排序
    执行先判断 E（指定的元素） 再看 nth-of-type(n)，先判断元素E，再选择第几个

伪元素选择器

新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

  • 行内元素
  • 必须有 content 属性
  • 伪元素选择器 和 标签选择器 一样，权重为 1
选择符简介
::before在元素内部的前面插入内容
::after在元素内部的后面插入内容

通常用于配合字体图标使用，和鼠标经过样式使用，还有清除浮动时使用。

  • 代码解析
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        div:hover::before{
            content: '';/* 必须要有的属性 */
            display: inline-block; /* 因为是行内元素没有宽高，改成行内块 */
            width: 100%;
            height: 100%;
            background: url(images/bg.jpg);
            filter: blur(8px); /* 模糊属性，值越大越模糊 */
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

CSS3 盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型。有 content-box 值和 border-box 值
这是个非常方便的属性，可以解决使用内外边距时会撑大容器（盒子）的问题

  • 关于盒子组成分成两种情况：
  1. box-sizing: content-box （以前默认的） 盒子大小为: width + padding + border
  2. box-sizing: border-box 盒子大小为: width (前提padding和border不会超过width宽度)

CSS3新增特效

滤镜filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

  • 语法：filter: 函数();
  • 例(模糊处理)： filter: blur(3px); blur 数值越大越模糊。通常用于模糊背景图片等。

calc 函数

用来计算子元素的大小，实现子元素的大小会随着父元素的改变而改变。

  • 面可以使用 + - * / 来进行计算。
  • 写法：width: calc(100% - 80px);
  • 这是一个进度条
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        .bar {
            /* box-sizing: border-box; */
            position: relative;
            margin-top: 50px;
            width: 250px;
            height: 25px;
            border: 2px solid rgb(90, 88, 88);
            border-radius: 10px;
            padding: 1px;
        }

        .bar_in {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            height: calc(100%);
            width: calc(100% / 2);
            background-color: skyblue;
            transition: all .6s;
        }

        .bar:hover .bar_in {
            width: calc(100%);
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

</html>

过渡（重点）

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

经常和 :hover 一起搭配使用。

  • 语法：transition: 要过渡的属性 花费时间 运动曲线 何时开始;
  • 过度的属性：必填。例如，宽、高、背景颜色等都可以，也可以写 all(代表所有属性都变化过渡)
  • 花费时间：必填。 单位是秒（必须写单位） 比如 0.5s，用来确定动画过渡需要花费的时间。
  • 运动曲线： 默认是 ease （可以省略）
  • 何时开始 单位是秒（必须写单位）可以设置延迟触发时间 默认是 0s（可以省略）

过渡案例的使用可参考上面的代码。

2D

转换(transform) 是SS3中具有颠覆性的特征之一,可以实现元素的位移、 旋转、 缩放等效果。
更详细使用可查看转载文章
2D 转换包括 移动(translate) 旋转 (rotate) 缩放 (scale)

  • 2D转化是在改变二维平面坐标位置形状。
    • 二维坐标 x 轴：越往右越大（与数学相同）
    • 二维坐标 y 轴：越往下越大（与数学相反）
  • 2D 搭配 过渡(transition) 使用效果更佳，可以做简单的动画效果了。
  • 2D 里面还有一个属性可以设置元素转换的中心点 （默认是盒子的中心点）。
    • 语法：transform-origin:(x,y) x y 是在二维平面坐标位置。（可以跟方位名词）

移动 (translate)

2D 里面的移动 (translate) 类似于定位（position）一样。
最大优势：也就是不影响其它元素的位置，缺点：对行内元素没有效果。
移动 (translate) 可以用于盒子的垂直居中对齐。不用写具体值，搭配(calc) 效果更好。
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);

语法：

  • transform: translate(x, y); 移动x轴与y轴,不能省略（两个值都要填）。
  • transform: translateX(n); x轴
  • transform: translateY(n); y轴

旋转 (rotate)

2D 里面的 旋转 是指在二维平面内 顺时针 / 逆时针 的旋转。
可以用来做三角形。哈哈哈哈
配合，中心点 transform-origin:(x,y) 使用效果更佳。（默认中心旋转）

语法：

  • transform: rotate(度数); 度数为正顺时针。 （单位是：deg）

缩放 (scale)

2D 里面的 缩放 就是放大缩小的作业啦。
优势：不影响其它盒子
配合，中心点 transform-origin:(x,y) 使用效果更佳。（默认中心放大）

语法：

  • transform: scale(x,y); （输入值 不需要单位，不能是负数 ，0.x/0.y可以省略不写0）
  • transform: scale(n); x轴与y轴 相同倍数
  • transform: scaleX(n); x轴
  • transform: scaleY(n); y轴

总结

2D 更多 过渡(transition) 使用效果更佳，可以做简单的动画效果了。
比如鼠标经过，移动一下，旋转一下，放大/缩小一下这样。（也可以同时两三个效果）
同时使用多个转换，其格式为: transform: tanslate() rotate() scale(),顺序会影响转换效果。

  • 代码练习（几个简单的小盒子）
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D转换</title>
    <style>
        body{
            margin: 100px  700px;
        }
        p{
            font-size: 30px;
            line-height: 400px;
            text-align: center;
        }
        div {
            position: relative;
            margin-bottom: 100px;
            width: 400px;
            height: 400px;
            background-color: skyblue;
            transition: all 1s;
        }
        .con div{
            /* 通过 absolute绝对布局 和 transform: translate()移动 实现盒子的居中 */
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            width: calc(50%);
            height: calc(50%);
            transform: translate(-50%,-50%);
            background-color: pink;
            
        }
        .con div p{
            margin: 0;
            font-size: 15px;
            line-height: 200px;
        }
        .con:hover {
            /* transform: translate(x, y); 移动x轴与y轴,不能省略。
            ** 优点：不用影响到其它元素的位置
            ** 单独写法：
            ** transform: translateX(n);    x轴
            ** transform: translateY(n);    y轴
            */
            transform: translate(20px, 10%);
        }
		.con1{
            /* transform-origin : left 0px;      */
        }
        .con1:hover{
             /* transform: scale(x,y); 中心放大，x,y 放大倍数,可以省略（即是两个值一样） 
             ** 优势：不用影响其它盒子的位置，也可以设置缩放中心点
             ** 单独写法：
             ** transform: scaleX(n);    x轴
             ** transform: scaleY(n);    y轴
             */
            transform: scale(1.2);
        }
        .con2{
            /* transform: rotate(n); 中心旋转，正数正旋转，负数负旋转（单位是 deg）
            ** 默认是中心点 (50%，50%)/(center，center) 
            ** 转换中心点 transform-origin : x y;    参数可以百分比、像素或者是方位名词，空格隔开 */
            transform-origin : left 0px;     
        }
        .con2:hover{
            transform: rotate(-360deg);
        }
        /* 通过 rotate 制作三角形箭头 */
        .con2::after{
            content: '';
            position: absolute;
            top: 47%;
            right: 23%;
            width: 15px;
            height: 15px;
            border-right: 2px solid #000;
            border-bottom: 2px solid #000;
            transform: rotate(45deg);
        }
        .con2:hover::after{
            transform: rotate(-135deg);
        }
        .con2-1{
            overflow: hidden;
        }
        .con2-1::after{
            content: "rotate旋转案例";
            display: block;
            width: calc(100%);
            height: calc(100%);
            font-size: 25px;
            text-align: center;
            line-height: 400px;
            background-color: hotpink;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 1s;
        }
        .con2-1:hover::after{
            transform: rotate(0deg);
        }
        .con-1{
            transition: all 1s;
        }
        .con-1:hover{
            /* 注意书写顺序，应该吧 translate 放在最前面，不然会出现混乱 */
            transform: translate(200px,50px) scale(1.2) rotate(360deg) ;
        }
    </style>
</head>

<body>
    <div class="con">
        <div>
            <p>translate移动和实现居中</p>
        </div>
        
    </div>
    <div class="con1">
        <p>scale放大</p>
    </div>
    <div class="con2">
        <p>rotate旋转</p>
    </div>
    <div class="con2-1">
        <!-- <p>rotate旋转</p> -->
    </div>
    <div class="con-1">
        <p>综合案例</p>
    </div>
</body>

</html>

动画

动画(animation) 是CS3中具有颠覆性的特征之一，能通过设置多个节点来精确控制一个或一组动画。
可以理解为过渡的加强版，比过渡多了更多的变化、更详细的控制，连续播放暂停等功能。
动画可以分为两步：定义动画 和 调用(使用)动画

定义动画

定义动画通过 keyframes 动画开始状态 0% (from) 和动画结束状态 100% (to)
% 可以写1-100，通过时间划分

/* 定义动画 */
@keyframes 动画名称 {
   /* from 和 to 等价于 0% 100% */
   /* 动画开始状态 */
   0% {
       transform: translateX(0px);
   }

   /* 动画结束状态 */
   100% {
       transform: translateX(1500px);
   }
}

调用(使用)动画

通过animation开头的各种属性设置动画的属性。
必须要有的属性： 调用动画：animation-name: 动画名称;持续时间: animation-duration: 时间;

  • 常用属性
属性描述
@keyframes定义动画。
animation所有动画属性的简写属性，除了animation-play- state属性 （暂停）
animation-name必需！ 调用 @keyframes 动画的名称。
animation-duration必需！ 动画完成个周期所花费的s秒或ms毫秒， 默认是0。
animation-timing-function动画的速度曲线，默认是 ease。linear 匀速
animation- delay动画暂停多久开始，默认是0。单位是s秒
animation-iteration-count动画被播放的次数，默认是1（次）,还有infinite（重复）
animation-direction动画是否在结束后逆向播放，默认是normal , alternate 逆播放
animation-play-state定义动画是否正在运行或暂停。默认是running(运行),还有paused(暂停)。
animation-fill-mode动画结束后保持的状态，默认是回到起始backwards，保持forwards
  • 速度曲线
属性值描述
linear开头到结尾。匀速
ease默认 低速开始，然后加快，在结束前变慢。
ease-in低速开始
ease-out低速结束
ease-in-out低速开始和结束
steps()指定了时间函数中的间隔数量(步长)

步长挺重要的。

  • 开发中最常用的是复合的写法（animation：(前两个不能省略)
    • animation: name duration timing-function delay iteration-count direction fill-mode;
    • animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画结束状态
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画练习</title>
    <style>
        /* 定义动画 */
        @keyframes move {
            /* from 和 to 等价于 0% 100% */
            /* 动画开始状态 */
            0% {
                transform: translateX(0px);
            }

            /* 动画结束状态 */
            100% {
                transform: translateX(1500px);
            }
        }

        @keyframes move1 {
            0% {
                transform: translate(0, 0);
            }
            35% {
                transform: translate(1500px, 0);
            }
            50% {
                transform: translate(1500px, 500px);
            }
            85% {
                transform: translate(0, 500px);
            }
            100% {
                transform: translate(0, 0);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

        .wjz-dh01 {
            /* 调用动画 */
            animation-name: move1;
            /* 持续时间 单位是秒(s) 毫秒(ms) */
            animation-duration: 6s;
            /* 运动曲线 默认值: ease */
            animation-timing-function: ease;
            /* 延时开始 默认值: 0s */
            animation-delay: 0s;
            /* 重复次数 默认值: 1  iteration 重复的 count 次数 infinite 无限*/
            animation-iteration-count: infinite;
            /* 是否反方向播放 默认是: normal 反方向 alternate*/
            animation-direction: normal;
            /* 动画结束后的状态 默认是：backwards 停留在结束的状态 forwards */
            /* animation-fill-mode: backwards; */

            /* 简写(前两个不能省略) animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画结束状态*/
            animation: move1 6s linear 0s infinite alternate backwards;
            /* linear匀速状态 */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        }

        .wjz-dh01:hover {
            /* 动画时候暂停 默认是：running(运行) 停止 paused*/
            animation-play-state: paused;
        }

        .wjz-dh02 {
            position: relative;
            margin: 100px auto;
        }

        .wjz-dh02 .city {
            position: absolute;
            right: 40px;
            top: 30px;
            width: 50px;
            height: 50px;
            /* background-color: slategrey; */
        }
        .wjz-dh02 .one{
            right: 80px;
            top: 100px;
        }
        .wjz-dh02 .dotted{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            z-index: 1;
            background-color: hotpink;
        }
        .wjz-dh02 div[class ^='pulse'] {
            /* 保证波纹垂直居中 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
             /* 保证波纹垂直居中 */
            width: 8px;
            height: 8px;
            border-radius: 50%;
            box-shadow: 0 0 12px red;
            /* 简写(前两个不能省略) animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画结束状态*/
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: pules 1.2s linear infinite backwards;
        }
        .pulse2{
            animation-delay: 0.4s!important;
        }
        .pulse3{
            animation-delay: 0.8s!important;
        }
        @keyframes pules{
            0%{

            }
            50%{
                /* transform: scale(2); 不能用 scale 不仅阴影变大，还会偏移了 */
                width: 30px;
                height: 30px;
                opacity: 1;
            }
            100%{
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
        .p {
            position: absolute;
            top: 230px;
            left: 40%;
            width: 0;
            height: 40px;
            font-size: 30px;
            background-color: #fff;
            white-space: nowrap;    /* 一行显示 */
            overflow: hidden;       /* 超出隐藏 */
            /* 简写(前两个不能省略) animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画结束状态*/
            /* steps() 步长，分成多少步来走 linear 匀速 ease默认 */
            animation: wz 5s steps(16) infinite;
        }
        @keyframes wz{
            0% {}
            100% {width: 480px;}
        }
    </style>
</head>

<body>
    <div class="wjz-dh01"></div>
    <div class="wjz-dh02">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city one">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
    <div class="p">这是一个用了步长来显示的一句话</div>
</body>

</html>

3D

通过近大远小的的原理实现3D效果。在网页中通过三维坐标系实现，就是在二维的基础上加上Z轴，往外面是正值。
3D也就是在2D的基础上多多加一个Z轴。
3D是建立在2D的基础上的，2D基础一定要牢靠

  • 3D位移 translate3d(x,y,z)(复合写法)

    • 在二D的基础上多加一个Z轴的移动方向：translateZ(n) 单位也是 px

  • 3D旋转 rotate3d(x,y,z) 左手定则，拇指对着正方向，四手指弯曲方向为正。

    • 沿着X轴的旋转方向：transform:rotateX(n) 单位也是 deg
    • 沿着Y轴的旋转方向：transform:rotateY(n) 单位也是 deg
    • 沿着Z轴的旋转方向：transform:rotateZ(n) 单位也是 deg

  • 透视 perspective：距离 在2D平面产生近大远小视觉立体，但是只是效果二维的 单位是 px

    • 数值越小，代表离我们人体越近，显示得也越大。

  • 3D呈现 transfrom-style 控制子元素是否开启三维立体环境

    • transform-tyle: flat; 子元素不开启3D立体效果，默认值
    • transform-style: preserve-3d; 子元素开启3D立体效果。

  • 3D木马效果案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D旋转木马</title>
    <style>
        body{
            /* 实现3D效果，近大远小的效果 */
            perspective: 800px;
        }
        section{
            position: relative;
            margin: 200px auto;
            width: 250px;
            height: 300px;
            /* transition: all 5s; */
            /* 让儿子保持3D效果 */
            transform-style: preserve-3d;
            animation: move 10s linear infinite;
        }
        section img{
            width: 100%;
            height: 100%;
        }
        section:hover{
            animation-play-state: paused;
        }
        section div{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        section div img{
            width: 100%;
            height: 100%;
        }
        section div:nth-child(1){
            transform: translateZ(300px);
        }
        section div:nth-child(2){
            transform: rotateY(60deg) translateZ(300px);
        }
        section div:nth-child(3){
            transform: rotateY(120deg) translateZ(300px);
        }
        section div:nth-child(4){
            transform: rotateY(180deg) translateZ(300px);
        }
        section div:nth-child(5){
            transform: rotateY(240deg) translateZ(300px);
        }
        section div:nth-child(6){
            transform: rotateY(300deg) translateZ(300px);
        }
        @keyframes move{
            0%{transform: rotateY(0deg)}
            100%{transform: rotateY(360deg);}
        }
    </style>
</head>
<body>
    <section>
        <div><img src="images/0.jfif" alt="123"></div>
        <div><img src="images/01.jpg" alt=""></div>
        <div><img src="images/0.jfif" alt=""></div>
        <div><img src="images/0.jfif" alt=""></div>
        <div><img src="images/0.jfif" alt=""></div>
        <div><img src="images/0.jfif" alt=""></div>
        <div><img src="images/0.jfif" alt=""></div>
    </section>
</body>
</html>
丨小小风离丨
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html&css的简单了解
m0_50496669的博客
09-07 1196
html&css html： 常用的标签： div、p、ul li、ol li、h1-h6、a、span、b、u、i、input（属性text、number、password、radio、checkbox、submit、reset）、form、select>option、textarea h5(新标签）：header、nav、footer、main、section、video、audio、input（color、range、week、date） 标签的分类： 单双标签：单标签没有与之对
「CSS 3D 专题」学习前，你需要搞明白什么是CSS 3D？
前端达人
08-07 274
关注前端达人，与你共同进步开篇CSS最令人兴奋的新领域之一莫过于在3D空间操作网页元素，这一新技能给你打开了3D世界的大门，如果你能Get这一项技能，你也能绘制这个真实的...
css 实现3D效果
蓝朽的小世界
04-03 5496
css实现3d效果
CSS3 - 属性选择器使用详解
ShenWangNian的博客
04-09 4069
（1）选择指定 class 属性值为“class”的任意类型的任意多个元素。选择匹配的 F 元素，且匹配的 F 元素被包含在匹配的 E 元素内。这里 F 不管是 E 元素的子元素或者是孙元素，都将被选中。其中 n 可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）。（1）如果父元素下的子元素类型都是一样的，那么上面的 *type 和 *child 选择器使用起来效果是一样的。其中 n 同样可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）。
web前端代码规范——css代码规范
04-29 232
Bootstrap CSS编码规范 语法 用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。 为选择器分组时，将单独的选择器单独放在一行。 为了代码的易读性，在每个声明块的左花括号前添加一个空格。 声明块的右花括号应当单独成行。 每条声明语句的:后应该插入一个空格。 为了获得更准确的错误报告，每条声明都应该独占一行。 所有声...
CSS选择器的介绍和使用.pdf
02-23
CSS选择器的介绍和使用,什么是CSS选择器？CSS选择器可以用于我们需要添加的样式的标签。想要在HTMLl页面中的元素实现一对一，一对多或者多对一的控制，就得要使用css选择器，css选择器进控制着HTML页面中的元素。
实例讲解CSS3中Transform的perspective属性的用法
12-30
基础CSS3的transform可以做2D的操作，当然也有3D。但需要再一个拥有perspective属性的父元素才能显现3D的效果。例如： XML/HTML Code复制内容到剪贴板 <div u00a0id=div1><!– perspective –>  ...
前端领域，运用CSS3实现页面动态效果
最新发布
11-03
选择器：CSS3 引入了许多新的选择器，包括属性选择器、伪类选择器和伪元素选择器等。这些选择器可以更精确地选择元素，从而实现更复杂的样式设计。 属性：CSS3 添加了许多新属性，以支持更多的样式效果。例如，可以...
css3 中的新特性加强记忆详解
01-19
css3被拆分成如下的小模块，选择器，盒模型，背景和边框，文字特效，2D/3D转换，动画，多列布局和用户界面 2D转换 使用transform:属性来为元素设置2D转换，兼容浏览器加前缀 –webkit- -moz- 使用rotate()方法，让...
CSS3 简介
12-13
CSS3 简介 对CSS3已完全向后兼容，所以你就不必改变现有的...选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 CSS3 建议 W3C的CSS3规范仍在开发。 但是，许多新的CSS3属性已在现代浏览器使用。
纯CSS3绘制正方体旋转动画特效.zip
07-05
纯CSS3绘制正方体旋转动画特效是一款3D立体效果不错的正方形旋转动画特效下载。
CSS实现点击3D效果
weixin_30384031的博客
02-24 107
简单技巧，不废话看效果 贴代码 HTML <div class="main01 main011"><a href="#"><img src="test.png"/></a></div> css .main01{ position: absolute; width: 260px;heigh...
Html+Css 3D旋转立方体
caojunzhi96的博客
04-23 3753
在上一篇的Html+Css+Js 3D旋转爱心 中间可插图片的代码基础上稍做修改获得两个大小不一3D旋转立方体，留作记忆，代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" conten...
CSS3 3D的总结（初学者易懂）
weixin_33795806的博客
02-10 228
CSS3 3D案例的总结 如果要说是3D的基础概念，首先我就来说一说rotateX()、rotateY()、rotateZ()这几个属性 rotateX():对应的是3D模型中的X轴上的旋转，传入的参数如:rotateX(45deg)表示的是页面绕X轴顺时针旋转45度 rotateY():对应的是3D模型中的Y轴上的旋转，传入的参数如:rotateY(45deg)表示的是页面绕Y轴顺时针旋转...
CSS3 新增选择器
JJ_Smilewang的博客
03-31 1392
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。主要包括结构伪类选择器和伪元素选择器。 1. 结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素 。 1.1 E:first-child E:first-child 这个选择器用于匹配父元素中的第一个子元素E /* 1.表示选择ul里面的第一个孩子 ，若第一个孩子是li元素，那么背景色就会变成粉色， 但是如果ul的第一个孩子不是li元素，那么就不会执行该样式*/ ul li:f
使用CSS3制作3D动态效果
Hubbert_Xu的博客
12-25 2002
CSS3有两个主要的动画效果： 1.transition: 从一个属性值，平滑的过渡到另一个属性值 2.animation          通过关键帧的技术，在网页上产生更加复杂的动画效果。 本章节只讲transition的部分： 一.浏览器的支持 -webkit-transition : 适用于Chrome和Safari -moz-trans
10个超漂亮的CSS 3D特效
热门推荐
Mr_王小峰的博客
08-11 5万+
在油管上看到了10个超漂亮的CSS 3D特效，遂分享给大家，有写是css+JavaScript实现的。 3D Slicebox 在3D立方体上寻找图像幻灯片？查看演示 图像转换 与THREE.js 结合使用- 此图片幻灯片将让您的访问者惊呆了。你不能错过这一个，相信我！查看演示 3D条形图 将无聊的平面2D图表转换为3D图表。查看现场演示，点击下面的图片获取源代码。查看演示 ...
深入理解CSS3动画：animation、transform、transition
qq_45768871的博客
03-27 324
喜欢的小伙伴可以关注我我哦，本人喜欢一些小动画。 文章目录深入理解CSS3动画前言一、animation1.语法：2.动画属性二、transform1.rotate - 旋转2. 2D旋转3. 3D旋转3.1 scale - 缩放3.2 skew - 扭曲3.3 translate - 移动三、transition四、后记 深入理解CSS3动画 前言 在CSS3之前，动画主要都是以Java...
css3 - 新增样式
M_wolf的博客
08-13 865
1，CSS3 模块 css3 被拆分为 “模块”，旧规范已拆分成小块，还增加了新的 一些最重要的 CSS3 模块如下： 选择器 盒模型 背景和边框 文字特效 2D/3D 转换 动画 多列布局 用户界面 2，CSS3 的重要属性 2.1 CSS3 边框 border-radius： 圆角 box-shadow： 盒阴影 border-image： 边界图片 2.2 CSS3 背...
css3d旋转正方体
09-23
CSS3D旋转正方体可以通过使用CSS的transform属性来实现。...3. 使用:hover选择器为box1元素设置旋转效果。在这里，rotate3d函数被用来指定旋转轴和旋转角度。可以通过设置不同的参数值来实现不同的旋转效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值