CSS3变形、渐变、动画的基本使用

不愿意做鱼的小鲸鱼

发布于 2022-09-24 09:25:17

1.3K0

发布于 2022-09-24 09:25:17

文章被收录于专栏：web全栈web全栈

CSS3 变形

2D转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。转换的效果是让某个元素改变形状，大小和位置。您可以使用 2D 或 3D 转换来转换您的元素。 2D变换方法： + translate() + rotate() + scale() + skew() 具体的详情描述可以看：菜鸟教程 简单使用代码

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3 2D转换</title>
    <style>
        .demo {
            margin: 25px;
            padding: 0;
            width: 150px;
            height: 50px;
            background-color: #2bab79;
            font-weight: bold;
            font-size: larger;
            float: left;
        }
        /* 旋转 */
        .trans1 {
            transform: rotate(30deg);
        }
        /* 变形 */
        .trans2 {
            transform: skew(30deg);
        }   
        /* 缩放 */
        .trans3 {
            transform: scale(0.8);
        }
        /* 平移 */
        .trans4 {
            transform: translate(5px, 50px);
        }


        .trans {
            margin: 0px;
            padding: 0;
            width: 150px;
            height: 50px;
            background-color: #2bab79;
            transform: rotate(30deg);
            /* 旋转的基点 */
            transform-origin: left 0 0;
        }
    </style>
</head>

<body>
    <div class="demo">不设置变形</div>
    <div class="demo trans1">rotate(30deg)</div>
    <div class="demo trans2">skew(30deg)</div>
    <div class="demo trans3">scale(0.8)</div>
    <div class="demo trans4">translate(5,50px)</div>
    <!--教材元素旋转对比截图部分的代码-->
    <div class="demo">
        <div class="trans">rotate(30deg)</div></span>
    </div>
</body>

</html>

效果如下

3D转换

CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图

简单记住他们的坐标：

x左边是负的，右边是正的
y 上面是负的， 下面是正的
z 里面是负的， 外面是正的

rotate

rotateX() : 就是沿着 x 立体旋转.
rotateY()：沿着y轴进行旋转
rotateZ()：沿着z轴进行旋转

正方体案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 3D转换</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }
        .box {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 24px;
            margin: 100px auto;
            position: relative;
            perspective: 1000px;
            transform-style: preserve-3d;
            transform: rotateX(-35deg) rotateY(35deg);
        }
        .front, .back, .left, .right, .top , .bottom {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            opacity: 0.5;
        }
        .front {
            background-color: pink;
            transform: translateZ(100px);
        }

        .left {
            background-color: green;
            transform: rotateY(90deg) translateZ(-100px);
        }

        .right {
            background-color: red;
            transform: rotateY(-90deg) translateZ(-100px);
        }

        .top {
            background-color: blue;
            transform: rotateX(90deg) translateZ(100px);
        }

        .bottom {
            background-color: yellow;
            transform: rotateX(-90deg) translateZ(100px);
        }

        .back {
            background-color: purple;
            transform: translateZ(-100px);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="front">front</div>
    <div class="back">back</div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="top">top</div>
    <div class="bottom">bottom</div>
</div>
</body>
</html>

效果如下

CSS3颜色渐变

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

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义线性渐变相关属性：background-image。参考文档 直接上代码案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .rainbow-linear-gradient {
            width: 460px;
            height: 200px;
            /* 线性渐变 */
            /* 渐变生成的是背景图，所以需要设置background-image属性 */
            /* background-image: -webkit-linear-gradient(left, red 20%, green); */
            background-image: -webkit-linear-gradient(left, #E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%, #3BB4D7 60%, #2F4D9E 75%, #71378A 80%);

        }

        .rainbow-radial-gradient {
            width: 400px;
            height: 400px;
            /* 径向渐变 */
            background-image: -webkit-radial-gradient(100px, #ffe07b 15%, #ffb151 2%, #16104b 50%);
        }
    </style>
</head>

<body>
    <div class="rainbow-linear-gradient"> </div>
    <div class="rainbow-radial-gradient"> </div>
</body>

</html>

效果如下

CSS3动画

transition过渡

参考文档定义 transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等。

CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡。语法 transition:[transition-property transition-duration transition-timing-function transition-delay ] 参数说明 * transition-property：过渡或动态模拟的CSS属性 * transition-duration：完成过渡所需要的时间 * transition-timing-function：指定过渡函数 * transition-delay：过渡开始出现的延迟时间

过渡所需的时间（transition-duration）定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）。

过渡动画函数（transition-timing-function）指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式

ease：速度由快到慢（默认值） linear：速度恒速（匀速运动） ease-in：速度越来越快（渐显效果） ease-out：速度越来越慢（渐隐效果） ease-in-out：速度先加速再减速（渐显渐隐效果） 过渡延迟时间（ transition-delay ）指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发负值：元素过渡效果会从该时间点开始显示，之前的动作被截断 0：默认值，元素过渡效果立即执行 过渡的触发机制 1. 伪类触发：hover ：active ：focus ：checked 2. 媒体查询：通过@media属性判断设备的尺寸，方向等 3. JavaScript触发：用JavaScript脚本触发 代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<div>鼠标移动到 div 元素上，查看过渡效果。</div>
</body>
</html>

效果如下

animation动画

参考文档简介 animation实现动画主要由两个部分组成： 1. 通过类似Flash动画的关键帧来声明一个动画 2. 在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果 3. 要创建 CSS3 动画，你需要了解 @keyframes 规则： @keyframes 规则是创建动画。 @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

调用关键帧 语法

参数说明

案例1：旋转的风车

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3动画»</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }

        .box1 {
            width: 200px;
            margin: 50px auto;
            /* 动画属性 */
            /* 动画名字 */
            animation-name: rotate;
            /* 持续时间 */
            animation-duration: 4s;
            /* 动画的速度:匀速 */
            animation-timing-function: linear;
            /* 动画的次数,可以给具体次数,也可以设置循环:infinite */
            animation-iteration-count: 2;
        }

        /* 复合写法:第一次出现的时间是持续时间,第二次出现的时间是延迟时间 */
        .box2 {
            width: 400px;
            margin: 100px auto;
            animation: rotate 4s linear infinite;
        }

        img {
            width: 100%;
            display: block;
        }

        /* 定义动画 */
        @keyframes rotate {
            0% {
                transform: rotateZ(0deg);
            }

            100% {
                transform: rotateZ(-360deg);
            }
        }
    </style>
</head>

<body>
    <div class="box1">
        <img src="images/fengche.png">
    </div>
    <div class="box2">
        <img src="images/fengche.png">
    </div>
</body>

</html>

效果如下

案例2：摇晃的桃子

代码如下

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>CSS3实现摇晃的桃子动画特效</title>
    <link rel="stylesheet" type="text/css" href="css/peach.css" rel="nofollow noopener" >
    <style>
        /*第3单元  项目3-3 摇晃的桃子*/
        p {
            font-family: "微软雅黑";
            font-size: 40px;
            position: absolute;
            top: -100px;
            left: 0px;
        }

        .act_wrapper {
            position: relative;
            z-index: 1;
            min-width: 1000px;
            /*元素最小宽度1000px*/
            margin: 0 auto;
            overflow: hidden;
        }

        .act_wrapper .act_bg {
            position: absolute;
            left: 50%;
            top: 0;
            z-index: 1;
            width: 1920px;
            margin-left: -1350px;
        }

        .act_wrapper .act_content {
            position: relative;
            z-index: 2;
            width: 1000px;
            height: 1200px;
            margin: 0 auto;
            margin-top: -569px
        }

        .act_bg {
            background: url(./images/bg2.jpg) 100% 0 no-repeat;
            height: 750px
        }

        .mod_style {
            position: absolute;
            top: 716px;
            left: 200px;
            width: 870px;
            height: 560px
        }

        /* 桃子的公共样式 */
        .peach {
            position: absolute;
            top: 0;
            left: 0;
            width: 90px;
            height: 100px;
            display: block;
            background: url(./images/peach.png) no-repeat 0 0;
            /*设置背景图片为精灵图片*/
        }

        .peach2 {
            background-position: 0 0;
            top: 100px;
            left: 72px
        }

        .peach3 {
            background-position: 0 -115px;
            top: 39px;
            left: 242px
        }

        .peach4 {
            background-position: 0 -215px;
            top: 71px;
            left: 452px
        }

        .peach5 {
            background-position: 0 -328px;
            top: 156px;
            left: 261px
        }

        .peach6 {
            background-position: 0 -435px;
            top: 256px;
            left: 412px
        }

        .peach6 {
            background-position: 0 -545px;
            top: 247px;
            left: 575px
        }

        .shake1 {
            -webkit-animation-duration: 2.5s;
        }

        .shake2,
        .shake6 {
            -webkit-animation-duration: 3.5s;
        }

        .shake3 {
            -webkit-animation-duration: 1.5s;
        }

        .shake4 {
            -webkit-animation-duration: 4s;
        }

        .shake5 {
            -webkit-animation-duration: 3s;
        }

        /* 动画公共部分 */
        .shake1,
        .shake2,
        .shake3,
        .shake4,
        .shake5,
        .shake6 {
            -webkit-animation-iteration-count: infinite;
            /*动画被播放的次数：无限次播放*/
            -webkit-animation-name: shake;
            /*动画名称：摇晃*/
            -webkit-animation-timing-function: ease-in-out;
            /*动画的速度曲线：以低速开始和结束*/
        }

        @-webkit-keyframes shake {
            0% {
                -webkit-transform: rotate(2deg);
                -webkit-transform-origin: 50% 0;
            }

            20% {
                -webkit-transform: rotate(10deg);
                -webkit-transform-origin: 50% 0;
            }

            40% {
                -webkit-transform: rotate(0deg);
                -webkit-transform-origin: 50% 0;
            }

            60% {
                -webkit-transform: rotate(-2deg);
                -webkit-transform-origin: 50% 0;
            }

            80% {
                -webkit-transform: rotate(-10deg);
                -webkit-transform-origin: 50% 0;
            }

            100% {
                -webkit-transform: rotate(0deg);
                -webkit-transform-origin: 50% 0;
            }
        }
    </style>
</head>

<body>
    <div class="act_wrapper">
        <div class="act_content">
            <div class="mod_style">
                <p>摇晃的桃子</p>
                <span class="peach peach2 shake1"></span>
                <span class="peach peach3 shake2"></span>
                <span class="peach peach4 shake3"></span>
                <span class="peach peach5 shake4"></span>
                <span class="peach peach6 shake5"></span>
                <span class="peach peach6 shake6"></span>
            </div>
        </div>
        <div class="act_bg"></div>
    </div>
</body>

</html>

效果如下

案例3：3D开门动画

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>开门大吉</title>
    <style>
        section {
            width: 450px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
            background: url("./images/hzw.gif") no-repeat;
            position: relative;
            perspective: 1000px;
            /*给父盒子增加透视*/
        }

        .door-left,
        .door-right {
            position: absolute;
            width: 50%;
            height: 100%;
            background-color: pink;
            transition: all 1s;
            /*连个门都是过渡*/

        }

        .door-left {
            left: 0;
            border-right: 1px solid #000;
            transform-origin: left;
            /*旋转中心点*/
        }

        .door-right {
            right: 0;
            border-left: 1px solid #000;
            transform-origin: right;
            /*旋转中心点*/
        }

        .door-left::after,
        .door-right::after {
            content: "";
            position: absolute;
            top: 50%;
            width: 10px;
            height: 10px;
            border: 1px solid #000;
            border-radius: 50%;
            transform: translateY(-50%);
            /*自己高度的一半*/
        }

        .door-left::after {
            right: 5px;
        }

        .door-right::after {
            left: 5px;
        }

        /* 鼠标经过section，两个门进行翻转 */
        section:hover .door-right {
            transform: rotateY(130deg);
        }

        section:hover .door-left {
            transform: rotateY(-130deg);
        }
    </style>
</head>

<body>
    <section>
        <div class="door-left"></div>
        <div class="door-right"></div>
    </section>
</body>

</html>

效果如下

本文涉及的一些素材还有很多其他相关的资料全部打包：可以点击下载链接：https://pan.baidu.com/s/1jE9jzqovrjlAmGZ5HVBZ7A 提取码：5d2s

总结

CSS3增加了很多新特性，虽然很多代码都无法自己很容易的写出来，但是多积累一点，对这些新特性熟悉，然后能够灵活的运用就可以了。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

图像处理

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

图像处理

css

登录后参与评论

0 条评论

热度