CSS3动画之DIY Loading动画

网页制作 2024/11/23 佚名

3 2 1

首先要知道什么是CSS3动画？然后才能做出自己想要的动画效果。下面会通过3个简单的Loading动画效果来对CSS3 animation动画做一个简单介绍，希望对你有用。

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

要创建CSS3动画，那么首先就要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：规定动画的名称；规定动画的时长。

css3动画属性

Loading动画1：

点.gif

<!-- html代码 总共8个点 -->
 <div class="point-loading">
        <span class="point"></span>
        <span class="point"></span>
        <span class="point"></span>
        <span class="point"></span>
        <span class="point"></span>
        <span class="point"></span>
        <span class="point"></span>
        <span class="point"></span>
    </div>

/*css样式代码*/
/*定义动画*/
@keyframes pointLoading {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(.3);
        opacity: 0.5;
    }
}
/*定义样式*/
.point-loading {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    margin-top: 150px;
    margin-bottom: 100px;
}
.point-loading .point {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    animation-name:pointLoading;   /*绑定动画*/
    animation-duration:1s; /*绑定动画完成一个周期所用时间*/
    animation-iteration-count:infinite; /*动画播放次数  默认是1，infinite无限次播放*/
}
/*nth-child:选择器匹配属于其父元素的第 N 个子元素；animation-delay:动画延迟播放*/
.point-loading .point:nth-child(1) {
    left: 0;
    top: 50%;
    margin-top: -10px;
    animation-delay: 0.13s;
}
.point-loading .point:nth-child(2) {
    left: 14px;
    top: 14px;
    animation-delay: 0.26s;
}
.point-loading .point:nth-child(3) {
    left: 50%;
    top: 0;
    margin-left: -10px;
    animation-delay: 0.39s;
}
.point-loading .point:nth-child(4) {
    top: 14px;
    right: 14px;
    animation-delay: 0.52s;
}
.point-loading .point:nth-child(5) {
    right: 0;
    top: 50%;
    margin-top: -10px;
    animation-delay: 0.65s;
}
.point-loading .point:nth-child(6) {
    right: 14px;
    bottom: 14px;
    animation-delay: 0.78s;
}
.point-loading .point:nth-child(7) {
    bottom: 0;
    left: 50%;
    margin-left: -10px;
    animation-delay: 0.91s;
}
.point-loading .point:nth-child(8) {
    bottom: 14px;
    left: 14px;
    animation-delay: 1.04s;
}

Loading动画2：

圆环.gif

 <!-- html代码 -->
<div class="loading"></div>

/*css代码*/
/*首先是定义动画效果*/
@keyframes rotateLoading {
    from {
        transform:rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/*定义基本样式，绑定动画，定义动画属性*/
.loading {
    margin: 50px auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 10px solid  rgba(0, 0, 0, 0.2);
    border-top-color: #000;
    position: relative;
    animation-name: rotateLoading;
    animation-timing-function: linear;
    animation-duration: 1.1s;
    animation-iteration-count: infinite;
}

Loading动画3：

柱状.gif

<!--html代码 共5个柱状 -->
 <div class="pillar-loading">
        <span class="pillar"></span>
        <span class="pillar"></span>
        <span class="pillar"></span>
        <span class="pillar"></span>
        <span class="pillar"></span>
    </div>

/*css代码*/
@keyframes pillarLoading {
    0%,
    100% {
        background: lightgreen;
    }
    50% {
        transform: scaleY(1.75);
        background: lightblue;
    }
}

.pillar-loading {
    margin: 150px auto;
    width: 60px;
    display: flex;
    justify-content: space-between;
}
.pillar-loading .pillar {
    width: 8px;
    height: 40px;
    border-radius: 4px;
    background: lightgreen;
    animation-name: pillarLoading;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-timing-function: ease;
}
.pillar-loading .pillar:nth-child(2){
    animation-delay: 0.2s;
}
.pillar-loading .pillar:nth-child(3){
    animation-delay: 0.4s;
}
.pillar-loading .pillar:nth-child(4){
    animation-delay: 0.6s;
}
.pillar-loading .pillar:nth-child(5){
    animation-delay: 0.8s;
}

以上3个动画是Animation动画的简单示例。

下面再说一个动画必备属性 transform。

transform 本意是变形，变换之意，在 CSS 中使用该属性可对元素进行移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等效果。因其有着各种特效及优良的性能，所以成为动画的标配。

** 转换方法**

transform转换方法

一个简单的小球动画，鼠标移到小球上或者空白框内，小球开始做动画，鼠标移出，动画停止。

小球动画

 <!-- html代码 -->
<div class="box">
        <div class="circle"></div>
    </div>

.box {
          width: 600px;
          height: 200px;
          border: 1px solid #ccc;
          background: #fff;
          margin: 50px,auto
}
.circle {
            width: 50px;
            height: 50px;
            background: blue;
            border-radius: 50%;
            margin: 75px,0;
            transition: all 2s   /*2s完成*/
}
.box:hover .circle {
           background: red;
           transform: translate(550px,0)   /*沿x轴偏移550px*/
}

再来一个稍微难一点的。

transform动画

<!-- html代码 -->
<a href="https://y.qq.com/n/yqq/album/002JRl3m16wLPL.html" class="playlist-item">
        <div class="item-bd">
            <img class="item-img" src="http://coding.imweb.io/img/p3/transition-hover.jpg" alt="">
            <i class="icon-play"></i>
        </div>
        <div class="item-ft">
            <h3 class="item-tt">漂洋过海来看你 OST 原声辑</h3>
            <p class="item-author">严艺丹</p>
        </div>
    </a>

/*css样式代码*/
.playlist-item {
    display: block;
    margin-top: 100px;
    width: 300px;
    background: rgba(0, 0, 0, .6);
}
.playlist-item:hover {
    background: #31c27c;
}

.playlist-item .item-bd {
    overflow: hidden;
    position: relative;
}
.playlist-item .item-img {
    width: 100%;
    transition:all 0.75s;
}
.playlist-item .icon-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.7);
    width: 70px;
    height: 70px;
    background: url(http://coding.imweb.io/img/p3/transition-cover_play.png) no-repeat;
    opacity: 0;
}
.playlist-item .item-bd:hover .item-img {
    transform:scale(1.1);
}
.playlist-item .item-bd:hover .icon-play {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
}
.playlist-item .item-ft {
    color: #fff;
    padding: 15px 10px;
    text-align: center;
}
.playlist-item .item-tt {
    font-size: 16px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.playlist-item .item-tt::after {
    content: "...";
    width: 18px;
    height: 18px;
    font-size: 12px;
    color: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translate(0, -50%);
    line-height: 0.6;
    box-sizing: border-box;
    opacity: 0;
    transition:all 0.75s;
}
.playlist-item .item-author {
    color: #999;
}
.playlist-item:hover .item-author {
    color: #c1e9d5;
}
.playlist-item:hover .item-tt::after {
    opacity:1;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

CSS3,DIY,Loading动画

标签：

CSS3,DIY,Loading动画

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“CSS3动画之DIY Loading动画”

CSS3动画之DIY Loading动画

暂无“CSS3动画之DIY Loading动画”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

CSS3动画之DIY Loading动画

CSS3,DIY,Loading动画

盘点CSS Selectors Level4中新增的选择器

css 单选按钮图标替换的方法

评论“CSS3动画之DIY Loading动画”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

CSS3动画之DIY Loading动画

CSS3,DIY,Loading动画

盘点CSS Selectors Level4中新增的选择器

css 单选按钮图标替换的方法

评论“CSS3动画之DIY Loading动画”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存