CSS3

目录

[二,CSS3 2D转换](#二,CSS3 2D转换)

3,缩放-scale

图片放大案例:

案例:分页按钮:

2D转换综合写法:

[三,CSS3 动画](#三,CSS3 动画)

1,页面一打开,一个盒子从左边走到右边:

[2,/* 动画序列 */:](#2,/* 动画序列 */:)

3,动画常用属性:​编辑

4,热点图案例:

5,速度曲线之steps步长:

案例:奔跑的熊大

[四,CSS3 3D转换](#四,CSS3 3D转换)

三维坐标系!!!!:

1,3D位移:translate3d(x,y,z)

2,3D旋转:rotate3d(x,y,z)

3,透视:perspective

4,3D呈现transfo-style!!!!!!!!!!!!!​编辑

-两面翻转的盒子案例:

五,浏览器私有前缀


二,CSS3 2D转换

3,缩放-scale

transform:scale(x,y);

注意:transform:scale(1,1);宽和高都放大了一倍,相当于,没有放大

transform:scale(2);相当于(2,2)

transform:scale(0.5,0.5);缩小

scale缩放最大优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子。

图片放大案例:

鼠标经过放大图片:

css 复制代码
<style>
       div {
        overflow: hidden;
        float: left;
        margin: 10px;
       }
       div img {
        transition: all 0.4s;
       }
       div img:hover {
        transform: scale(1.1);
       }
    </style>
</head>
<body>
    <div><a href="#"><img src="image/tb.jpg" alt=""></a></div>
    <div><a href="#"><img src="image/tb.jpg" alt=""></a></div>
    <div><a href="#"><img src="image/tb.jpg" alt=""></a></div>
</body>

案例:分页按钮:

css 复制代码
<style>
      li {
        float: left;
        width: 30px;
        height: 30px;
        border: 1px solid pink;
        margin: 10px;
        text-align: center;
        line-height: 30px;
        list-style: none;
        border-radius: 50%;
        cursor: pointer;
        transition: all .4s;
      }
      li:hover {
        transform: scale(1.2);
      }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

2D转换综合写法:

三,CSS3 动画

1,页面一打开,一个盒子从左边走到右边:

css 复制代码
<style>
     /* 1,定义动画 */
     @keyframes move {
        0% {
            transform: translate(0px);
        }
        100% {
            transform: translate(1000px);
        }
     }
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* 2,调用动画 */
        animation-name: move;
        animation-duration: 2s;
      }
    </style>
</head>
<body>
    <div></div>
</body>

2,/* 动画序列 */:

1,可以做多个状态的变化

2,里面的百分比要是整数

3,里面的百分比就是 总的时间的划分

css 复制代码
 <style>
    
     /* 1,定义动画 */
     @keyframes move {
        0% {
            transform: translate(0,0);
        }
        25% {
            transform: translate(1000px,0);
        }
        50% {
            transform: translate(1000px,500px);
        }
        75% {
            transform: translate(0,500px);
        }
        100% {
            transform: translate(0,0);
        }
     }
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* 2,调用动画 */
        animation-name: move;
        animation-duration: 10s;
      }
    </style>
</head>
<body>

3,动画常用属性:

简写属性:

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态;

注意:简写不包括animation-play-state;

4,热点图案例:

css 复制代码
 <style>
        body {
            background-color: #333;
        }
     .map {
        position: relative;
        width: 747px;
        height: 616px;
        background: url(image/map.png) no-repeat;
        margin: 0 auto;
     }
     .city {
        position: absolute;
        top: 227px;
        right: 193px;
        color: white;
     }
     .tb {
        top: 500px;
        right: 80px;
     }
     .dotted {
        width: 8px;
        height: 8px;
        background-color: #09f;
        border-radius: 50%;
     }
     .city div[class^="pulse"] {
        /* 保证小波wen在父盒子里面水平垂直居中  放大之后就会中心向四周发散 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 8px;
        height: 8px;
        box-shadow: 0 0 12px #009dfd;
        border-radius: 50%;
        animation: pulse 1.2s linear infinite;
     }
     .city div.pulse2 {
        animation-delay: 0.4s;
     }
     .city div.pulse3 {
        animation-delay: 0.8s;
     }
     @keyframes pulse {
        0% {

        }
        70% {
            width: 40px;
            height: 40px;
            opacity: 1;
        }
        100% {
            width: 70px;
            height: 70px;
            opacity: 0;
        }
     }
    </style>
</head>
<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

5,速度曲线之steps步长:

css 复制代码
<style>
      div {
        overflow: hidden;
        font-size: 20px;
        width: 0;
        height: 30px;
        background-color: pink;
        /* 让文字强制一行内显示 */
        white-space: nowrap;
        animation: w 4s steps(10) forwards;
      }
      @keyframes w {
        0% {
            width: 0;
        }
        100% {
            width: 200px;
        }
      }
    </style>
</head>
<body>
    <div>这些这些这些这些这些</div>
</body>

案例:奔跑的熊大

css 复制代码
<style>
        body {
            background-color: #ccc;
        }
     div {
        position: absolute;
        width: 200px;
        height: 100px;
        background: url(image/bear.png) no-repeat;
        /* 元素可以添加多个动画,用逗号分隔 */
        animation: bear 1s steps(8) infinite,move 3s forwards;
     }
     @keyframes bear {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: -1600px 0;
        }
     }
     @keyframes move {
        0% {
            left: 0;
        }
        100% {
            left: 50%;
            /* margin-left: -100px; */
            transform: translate(-50%);
        }
     }
    </style>
</head>
<body>
   <div></div>
</body>

四,CSS3 3D转换

三维坐标系!!!!:

1,3D位移:translate3d(x,y,z)

transform:translateX(100px) :仅仅在X轴上移动

transform:translateZ(100px) :仅仅在Z轴上移动 后面的单位一般跟px

transform:translate3d(x,y,z)

xyz不能省略,写成0:transform:translate3d(0,100px,100px);

2,3D旋转:rotate3d(x,y,z)

transform:rotateX/Y/Z(45deg);沿着X/Y/Z轴正方向旋转45度

transform:rotate3d()

3,透视:perspective

透视也称为视距:视距就是人的眼睛到屏幕的距离

透视越大成像越小,透视越小成像越大

透视的单位是像素

4,3D呈现transfo-style!!!!!!!!!!!!!

-两面翻转的盒子案例:

css 复制代码
 <style>
        body {
            perspective: 400px;
        }
       .box {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 100px auto;
        transition: all .6s;
        /* 让背面的紫色盒子保留独立空间 */
        transform-style: preserve-3d;
       }
       .box:hover {
        transform: rotateY(180deg);
       }
       .front,
       .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        font-size: 30px;
        color: #fff;
        text-align: center;
        line-height: 300px;
       }
       .front {
        background-color: pink;
        z-index:1;
       }
       .back {
        background-color: purple;
        /* 像手机一样,背靠背旋转 */
        transform: rotateY(180deg);
       }
    </style>
</head>
<body>
    <div class="box">
        <div class="front">谢谢</div>
        <div class="back">素数/<div>
    </div>
</body>
</html>

五,浏览器私有前缀

为了兼容老版本的写法

相关推荐
Boilermaker199213 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子24 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102439 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构