html基本常见特效设置

最新推荐文章于 2023-12-01 12:58:10 发布

kinglyjn

最新推荐文章于 2023-12-01 12:58:10 发布

阅读量774

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML&CSS 文章标签： html css

本文链接：https://blog.youkuaiyun.com/kinglyjn/article/details/53925504

HTML&CSS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用CSS3实现动画和过渡效果，包括不同浏览器的私有前缀支持、动画关键帧定义、过渡属性设置及转换方法如移动、旋转、缩放、倾斜等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

私有名称前缀

为了兼容老版本的写法。例如：比较新版本的浏览器都支持直接写：border-radius。因为制定HTML和CSS标准的组织W3C动作是很慢的。
通常，有w3c组织成员提出一个新属性，比如说圆角border-radius，大家都觉得好，但w3c制定标准，要走很复杂的程序，审查等。而浏览器商市场推广时间紧，如果一个属性已经够成熟了，就会在浏览器中加入支持。为避免日后w3c公布标准时有所变更，加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性。等到日后w3c公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius这种写法。

简单的说，浏览器私有前缀，是浏览器对于新CSS属性的一个提前支持。-webkit- 表示 webkit内核，-moz- 代表 Firefox Gecko内核，moz代表的是Firefox的开发商Mozilla。

-moz代表firefox浏览器私有属性
-ms代表ie浏览器私有属性
-webkit代表safari、chrome私有属性

动画效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3_页面特效_动画</title>
    <style type="text/css">
    /*
    Chrome和Safari 需要前缀 -webkit-
    Firefx需要前缀：-moz-
    Opera：-o-
    IE：-ms-
    */
    div {
        width:100px;
        height:100px;
        background-color: red;
        position: relative; /*可做不占位移动操作*/
        animation:anim 5s;  /*动画 5s*/
        -webkit-animation: anim 5s infinite alternate; /*chrome safari支持 无限交替循环执行*/
    }
    @keyframes anim,@-webkit-keyframes anim{
        0% {
            background-color: red;
            left: 0;
            top: 0;
        }
        25% {
            background-color: blue;
            left: 200px;
            top: 0;
        }
        50% {
            background-color: green;
            left: 200px;
            top: 200px;
        }
        75% {
            background-color: orangered;
            left: 0;
            top: 200px;
        }
        100% {
            background-color: red;
            left: 0;
            top: 0;
        }
    }
    @-webkit-keyframes anim {
        0% {
            background-color: red;
            left: 0;
            top: 0;
        }
        25% {
            background-color: blue;
            left: 200px;
            top: 0;
        }
        50% {
            background-color: green;
            left: 200px;
            top: 200px;
        }
        75% {
            background-color: orangered;
            left: 0;
            top: 200px;
        }
        100% {
            background-color: red;
            left: 0;
            top: 0;
        }
    }
    </style>
</head>
<body>
    <div>效果展示</div>
</body>
</html>

效果图：

过度效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3_页面特效_过渡</title>
    <style type="text/css">
    /*过渡效果：
      transition  设置四个过渡属性
      transition-property  过度的名称
      transition-duration  过渡效果所花费的时间
      transition-timing-function  过渡效果的时间曲线
      transition-delay  过渡效果的开始时间
    */
    div {
        width:100px;
        height:100px;
        background-color: green;
        -webkit-transition: width 2s, height 2s, transform 2s;
        -moz-transition: width 2s, height 2s, transform 2s;
        -ms-transition: width 2s, height 2s, transform 2s;
        -o-transition:width 2s, height 2s, transform 2s;
        transition: width 2s, height 2s, transform 2s;
        -webkit-transition-delay: 1s; /*延时1s执行*/
        -moz-transition-delay: 1s;
        -ms-transition-delay: 1s;
        -o-transition-delay: 1s;
        transition-delay: 1s;
    }
    div:hover {
        width:200px;
        height: 200px;
        transform: rotate(720deg);
        -webkit-transition: rotate(360deg);
    } 
    </style>
</head>
<body>
    <div>效果展示</div>
</body>
</html>

效果图：

移动、旋转、缩放、倾斜、矩阵、投影

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3_页面特效</title>
    <style type="text/css">
    /*转换方法
      translate 移动 
      rotate 旋转
      scale 缩放
      skew 倾斜
      matrix 矩阵
      rotateX(Y) 旋转投影
    */

    div {
        width: 100px;
        height: 100px;
        background-color: green;
    }

    /*移动*/
    .div2 {
        transform: translate(200px, 100px);
        -webkit-transform: translate(200px, 100px); /*chrome和safari支持*/
        -ms-transform: translate(200px, 100px); /*ie支持*/
        -o-transform: translate(200px, 100px); /*opera支持*/
        -moz-transform: translate(200px, 100px); /*firefox支持*/
    }

    /*旋转*/
    .div3 {
        transform:rotate(30deg);
        -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        -o-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
    }

    /*缩放*/
    .div4 {
        transform: scale(1,2); /*宽度不变，高度为原来的2倍*/
        -webkit-transform: scale(1, 2);
        -ms-transform: scale(1, 2);
        -o-transform: scale(1, 2);
        -moz-transform: scale(1, 2);
    }

    /*倾斜*/
    .div5 {
        transform: skew(20deg,30deg); /*以x轴为基准倾斜20度（高度不变，图形本身被拉伸），以y轴为基准倾斜30度*/
        -webkit-transform: skew(20deg, 30deg);
        -ms-transform: skew(20deg, 30deg);
        -o-transform: skew(20deg, 30deg);
        -moz-transform: skew(20deg, 30deg);
    }

    /*旋转投影 rotateX  rotateY*/
    .div6 {
        transform: rotateX(45deg); /*绕x轴旋转45度后在垂直于纸面方向的投影*/
        -webkit-transform: rotateX(45deg);
        -ms-transform: rotateX(45deg);
        -o-transform: rotateX(45deg);
        -moz-transform: rotateX(45deg);
    }
    </style>
</head>
<body>
    <div>这是初始效果</div><br/>
    <div class="div2">移动后的效果</div>
    <div class="div3">旋转后的效果</div>
    <div class="div4">缩放后的效果</div>
    <div class="div5">倾斜后的效果</div>
    <div class="div6">3D转换后的效果</div>
</body>
</html>

效果图：