CSS实现2D效果

最新推荐文章于 2023-07-22 15:29:40 发布

akaWoverine

最新推荐文章于 2023-07-22 15:29:40 发布

阅读量178

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/akaWoverine/article/details/121078602

版权

CSS实现2D效果

放大缩小背景色变化

语法

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性
transition-property	规定应用过渡的CSS属性的名称
transition-duration	定义过渡花费的时间，默认是0
transition-timing-function	规定过渡效果的时间曲线，默认是"ease"
transition-delay	规定过渡效果何时开始，默认是0

示例

transition

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0px;
        }
        .box{
            height:100px;width: 100px;
            background-color: black;
            transition:all 2s;
        }
        .box:hover{
            height: 200px;width: 200px;
            background-color: red;
        }
    
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

transition-property

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0px;
        }
        .box{
            height:100px;width: 100px;
            background-color: black;
            transition-property:width;  /*只有在宽度变化上缓慢执行,其余没提到的高度、背景颜色都是瞬间变化的*/
            transition-duration: 2s;
        }
        .box:hover{
            height: 200px;width: 200px;
            background-color: red;
        }
    
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

transition-timing-function

linear:规定以相同速度开始至介绍的过渡效果
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in：规定以慢速开始的过渡效果
ease-out：规定以慢速结束的过渡效果
ease-in-out：规定以慢速开始和结束的效果
cubic-bezier(n,n,n,n)：在cubic-bezier函数中定义自己的值，可能的值是0至1之间的数值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0px;
        }
        .box{
            height:100px;width: 100px;
            background-color: black;
            transition-property:all;  
            transition-duration: 2s;
            transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);/*bezier贝塞尔曲线*/
        }
        .box:hover{
            height: 200px;width: 200px;
            background-color: red;
        }
    
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

transition-delay

transition-delay: 2s;/*延迟2s后作出反应*/

2D变形

在CSS3中transform主要包括以下几种：

旋转rotate

transform:rotate(30deg);/*括号里是旋转的角度，正值是顺时针转，负值是逆时针转*/

扭曲skew

transform: skew(30deg,30deg);/*使元素在水平和垂直方向同时扭曲*/

transform: skewX(30deg);/*仅使元素在水平方向扭曲变形*/

transform: skew(30deg,30deg);/*使元素在水平和垂直方向同时扭曲*/

缩放scale

transform: scale(2,3);/*是元素水平方向和垂直方向同时缩放，水平方向扩大到原来的2倍，垂直方向扩大到原来的3倍*/

transform: scaleX(2);/*元素仅水平方向缩放*/

transform: scaleY(3)/*元素仅垂直方向缩放*/

移动translate

transform: translate(100px,200px);/*水平方向和垂直方向同时移动*/

transform: translateX(100px);/*仅水平方向移动*/

transform: translateY(200px);/*仅垂直方向移动*/

矩形变形martrix
改变元素基点transform-origin:x-axis y-axis

说明：默认点是元素的中心点，其中X和Y的值可以是百分值，em,px,其中X也可以是字符参数值left,center,right;Y和X一样除了百分值外还可以设置字符值top,center,bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0px;
        }
        .box{
            height:100px;width: 100px;
            background-color: black;
            margin:100px auto;
        }
        .box:hover{
            transform: rotate(30deg);/*按照中心点旋转*/
        }
        .box2{
            height:100px;width: 100px;
            background-color: red;
            margin:200px auto;
            transform-origin: left top;/*把元素的基点改为左上角,按照左上角做变化*/
        }
        .box2:hover{
            transform:rotate(30deg);/*按照元素的左上角旋转*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
</body>
</html>

混用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0px;
        }
        .box{
            height:100px;width: 100px;
            background-color: black;
            margin: 100px auto;
            transition:all 2s;
        }
        .box:hover{
            transform:rotate(45deg) scale(2,3) translate(100px,200px) skew(30deg,45deg);         
            transform-origin: left top;
        }
    
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

akaWoverine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实现2D效果

CSS实现2D效果放大缩小背景色变化语法属性描述transition简写属性，用于在一个属性中设置四个过渡属性transition-property规定应用过渡的CSS属性的名称transition-duration定义过渡花费的时间，默认是0transition-timing-function规定过渡效果的时间曲线，默认是"ease"transition-delay规定过渡效果何时开始，默认是0示例transition<
复制链接

扫一扫