css3动画效果简单实例

dogface07

已于 2023-12-26 15:19:38 修改

阅读量580

点赞数 4

文章标签： css3 css 前端

于 2023-12-26 14:08:56 首次发布

本文链接：https://blog.csdn.net/panfu163/article/details/135220469

版权

1、css3实现不倒翁动画

 <div class="box"></div>
<style>
    .box{
        position: relative;
        width: 200px;
        height: 300px;
        border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
        background-color: #e74c3c;
        transform-origin: 50% 100%; /*设置圆点位位置x、y*/
        animation:init 1.5s ease-in-out infinite;
      }

      @keyframes init {
        0%,100%{
            transform: rotate(0deg);
        }
        25%,75%{
            transform: rotate(30deg);
        }
        50%{
            transform: rotate(-30deg);
        }
      }
<style>

2、css3实现鸡蛋破壳动画

<div class="box"></div>
<style>
.box{
        position: relative;
        width: 200px;
        height: 200px;
        border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
        background-color:#fcb400;
        transform-origin: 50% 100%; /*设置圆点位位置x、y*/
        animation:init 0.5s ease-in-out infinite;
      }
      @keyframes init {
        0%,100%{
            transform: translate(0)
        }
        25%{
            transform: translate(-10px) rotate(-20deg)
        }
        50%{
            transform: translate(10px) rotate(20deg)
        }
        75%{
            transform: translate(-5px) rotate(-20deg)
        }
      }
</style>

3、CSS3实现图片正面和背面翻转

    <div class="card">
        <div class="front side">
          <p>正面</p>
        </div>
        <div class="back side">
          <h1>反面</h1>
        </div>
      </div>
    


    <style>
        .card {
            position: relative;
        }
        .side {
            /* 两张卡片设置公共样式，使其重叠在一起 */
            position: absolute;
            left: 0;
            top: 0;
            width: 300px;
            height: 400px;
            backface-visibility: hidden;
            transition: all 1s ease-in-out;
        }
        .front {
            background-color: blueviolet;
        }
        .back {
            background-color: rgb(152, 222, 135);
            transform: rotateY(-180deg);
        }
        .card:hover .front {
            transform: rotateY(-180deg);
        }
        .card:hover .back {
            transform: rotateY(0deg);
        }
    </style>

4、css3实现小球跳动

 <div class="box">弹跳小球</div>

<style>
 .box {
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: #4a9dff;
            color: #fff;
            text-align: center;
            transform-origin: 50% 100%;
            /*设置圆点位位置x、y*/
            animation: init 0.5s infinite;
        }

        @keyframes init {
            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translate(0)
            }

            40% {
                transform: translateY(-50px)
            }

            60% {
                transform: translateY(-25px)
            }
        }
</style>

5、css3指定动画路径

//路径获取网站 https://editor.method.ac/
      <div class="dot"></div>
      <style>
        .dot{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #fcb400;
            offset-path: path('m28,159c0,2 -0.82951,6.02295 0,21c1.00153,18.08305 5.76792,40.02895 9,65c4.6654,36.04489 9.28039,73.86084 20,103c8.03043,21.82916 18.91277,32.13297 28,38c7.92563,5.11707 15.03522,5.99243 29,5c14.10655,-1.00253 29.26871,-7.01074 42,-11c10.27759,-3.2204 13.80901,-7.32144 17,-9c4.76599,-2.50705 10.80554,-9.12619 18,-20c10.71381,-16.19302 20.93694,-32.65894 38,-59c11.31314,-17.46463 23.59409,-34.31265 36,-50c14.534,-18.37833 26.35184,-30.69016 36,-42c8.31134,-9.74277 14.57004,-16.54147 22,-22c7.60278,-5.58548 19,-9 23,-9c4,0 5.89853,1.07816 9,5c4.84467,6.12611 10.63101,16.77457 15,30c5.85992,17.73869 8.16635,36.99153 9,55c1.24942,26.98959 1,48 1,68c0,19 0.08096,35.10361 2,48c1.35696,9.11914 4.297,16.61383 7,19c1.67633,1.47983 3.0712,1.64975 6,1c16.16003,-3.58508 31.05496,-17.22818 42,-32c10.12064,-13.65918 13.17062,-28.96689 16,-44c3.19296,-16.96481 4.28696,-29.93503 8,-47c3.25229,-14.94733 7.25342,-32.91789 12,-48c8.45374,-26.86139 14.43024,-43.31807 23,-58c6.57269,-11.26053 14.04025,-21.81935 21,-29c4.45642,-4.59785 8.92578,-6.49756 14,-7c5.97083,-0.59123 14.99078,2.00809 22,10c16.64185,18.97498 20.67749,38.81815 26,60c5.73602,22.82756 7,47 7,72c0,24 -1.18555,44.11847 1,60c1.95197,14.18414 5.82648,24.06616 12,40c3.89111,10.04288 7.46448,17.46448 11,21c3.53552,3.53552 7.03406,5.68976 14,5c15.2226,-1.50732 36.08472,-10.85733 53,-21c18.09192,-10.84818 35.4411,-26.66257 43,-37c8.51276,-11.64188 14.66827,-22.23148 20,-36c2.97778,-7.68979 4,-14 4,-19c0,-2 1.48627,-4.82376 2,-7c0.91901,-3.89301 0,-9 0,-13c0,-1 0.4588,-2.69345 1,-4c0.38269,-0.92389 0.51129,-3.02997 1,-7c0.50378,-4.09221 2,-10 2,-15c0,-4 0,-11 0,-15c0,-5 0,-10 0,-15c0,-3 0,-7 0,-9c0,-1 0,-2 0,-3l-1,-1');
            animation:3s alls infinite linear
        }
        @keyframes alls {
            100%{
                offset-distance: 100%;
            }
        }
      </style>