css3动画效果

最新推荐文章于 2024-08-09 15:08:20 发布

winson.L

最新推荐文章于 2024-08-09 15:08:20 发布

阅读量327

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/onion_line/article/details/78543047

本文介绍如何使用CSS实现三种常见动画效果：图片旋转、放大缩小和平移。通过具体代码实例展示了不同动画的关键帧设置方法，适合前端开发者学习和参考。

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

图片旋转效果

<div class="circular">
    <div class="round"></div>
</div>
<div class="text">
   <p>loading</p>
</div>

.circular{
    border: 2px solid #ccc;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: 185px;
    left: 902px;
    border-left-color: #000000;
    border-top-color: #000000;
-webkit-animation:circle 1s infinite linear;
}
@-webkit-keyframes circle{

0%{ transform:rotate(0deg); }

100%{ transform:rotate(-360deg); }
}
.text p {
    position: absolute;
    top: 229px;
    left: 927px;
}

图片放大缩小效果

<div class="music">
  <div class="music1"></div>
  <div class="music2"></div>
  <div class="music3"></div>
  <div class="music4"></div>
  <div class="music5"></div>
</div>

.music{
    width: 500px;
    margin-top: 500px;
    margin-left: 100px;
}
.music1{
    display:inline-block;
    width: 7px;
    height: 35px;
    background: #000000;
    -webkit-animation:music 1s  linear 0.2s infinite;
}
.music2{
    display:inline-block;
    width: 7px;
    height: 35px;
    background: #000000;
     -webkit-animation:music 1s  linear 0.4s infinite;
}
.music3{
    display:inline-block;

    width: 7px;
    height: 35px;
    background: #000000;
  -webkit-animation:music 1s  linear 0.8s infinite;
}
.music4{
    display:inline-block;
    width: 7px;
    height: 50px;
    background: #000000;
    -webkit-animation:music 1s  linear 1s infinite;
}
.music5{
    display:inline-block;

    width: 7px;
    height: 50px;
    background: #000000;
    -webkit-animation:music 1s  linear 1.2s infinite;
}
@keyframes music {
    from{
        transform: scale(0.1);
    }
    to{ 
        transform: scale(0.3);
    }
}

图片平移

  <div class="photo">
     <div class="photo1"></div>
     <div class="photo2"></div>
     <div class="photo3"></div>
     <div class="photo4"></div>
     <div class="photo5"></div>
</div>

.photo{
   position: relative
}
.photo1{
    display: inline-block;
    background-image: url(../images/iconlist_1.png)
    width: 173px;
    height: 173px;
    background-position: left;
    animation: photo1 1s linear 1;
    position: absolute;
    left: 10px;
}
.photo2{
    display: inline-block;
    background-image: url(../images/iconlist_1.png);
    width: 173px;
    height: 173px;
    background-position: -174px -1px;
    animation: photo2 3s linear 1;
}
.photo3{
    display: inline-block;
    background-image: url(../images/iconlist_1.png);
    width: 173px;
    height: 173px;
    background-position: -348px 0px;
    animation: photo3 6s linear 1;
    position: absolute;
    left: 10px;
}
.photo4{
    display: inline-block;
    background-image: url(../images/iconlist_1.png);
    width: 173px;
    height: 173px;
    background-position: -522px 0px;
    animation: photo4 9s linear 1;
    position: absolute;
    left: 10px;
}
.photo5{
    display: inline-block;
    background-image: url(../images/iconlist_1.png);
    width: 173px;
    height: 173px;
    background-position: -696px 0px;
    animation: photo5 12s linear 1;
    position: absolute;
    left: 10px;
}
@keyframes photo1 {
    from {
        transform: translate(0px);
    }
    to {
       transform: translate(150px); 
    }
}
@keyframes photo2 {
    from {
        transform: translate(0px);
    }
    to {
       transform: translate(300px); 
    }
}
@keyframes photo3 {
    from {
        transform: translate(0px);
    }
    to {
       transform: translate(450px); 
    }
}
@keyframes photo4 {
    from {
        transform: translate(0px);
    }
    to {
       transform: translate(600px); 
    }
}
@keyframes photo5 {
    from {
        transform: translate(0px);
    }
    to {
       transform: translate(750px); 
    }
}