CSS学习17之动画

最新推荐文章于 2024-07-29 14:14:21 发布

小黑神zxs

最新推荐文章于 2024-07-29 14:14:21 发布

阅读量398

点赞数 1

分类专栏： CSS3详解文章标签：前端 css3 html css动画小项目

本文链接：https://blog.csdn.net/ZXS1002/article/details/123642237

版权

CSS3详解专栏收录该内容

18 篇文章 0 订阅

订阅专栏

回顾

z-index 属性

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
Z-index 可用于将在一个元素放置于另一元素之后。

动画

动画使元素逐渐从一种样式变为另一种样式。
可以随意更改任意数量的 CSS 属性。
如需使用 CSS 动画，必须首先为动画指定一些关键帧。
关键帧包含元素在特定时间所拥有的样式。

@keyframes 规则
如果在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。
要使动画生效，必须将动画绑定到某个元素。
下面的例子将动画绑定到元素。动画将持续0.2秒钟，同时进行循环。

示例

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小试牛刀</title><style>
    .c1,
    .c2,
    .c3{
        width:100px;
        height: 100px;
        background:rgb(255,0,0); /*颜色单词，16进制编码 rgb值*/
        border-radius:50%; /*边框半径：设置圆角 css3*/
        box-shadow:0 0 50px rgb(255,0,0); /*盒子阴影 css3*/
    }
    .c3{
        margin-top:-100px;
        border-radius: 0; /*去掉选中元素的圆角边框*/
    }
    .c2{
        margin-top:-50px;
        margin-left:-50px
    }
    #love{
        position:absolute;
        left:20%;
        top:10%;
        transform: rotate(45deg); /*顺时针旋转45度 css3*/
        animation:jump .3s linear infinite;
    }

    /* 自定义动画创建 css3*/
    @keyframes jump{
        30%{
            transform: scale(1.1) rotate(45deg);
        }
        40%{
            transform: scale(1.2) rotate(45deg);
        }
        50%{
            transform: scale(1.1) rotate(45deg);
        }
    }

</style>
</head>

</head>
<body>
<div id="love">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
</div>

</body>
</html>

效果

跳动的心

小黑神zxs

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习17之动画

回顾z-index 属性z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。Z-index 可用于将在一个元素放置于另一元素之后。动画动画使元素逐渐从一种样式变为另一种样式。可以随意更改任意数量的 CSS 属性。如需使用 CSS 动画，必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。@keyframes 规则如果在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。要使动画生
复制链接

扫一扫

专栏目录