Animation

最新推荐文章于 2025-09-13 13:33:03 发布

置顶大白1992

最新推荐文章于 2025-09-13 13:33:03 发布

阅读量407

点赞数

CC 4.0 BY-SA版权

文章标签： css3

本文链接：https://blog.youkuaiyun.com/u011936353/article/details/47043789

本文介绍了一个使用CSS实现的动画效果，通过:hover伪类触发盒子元素的尺寸变化，并保持圆角不变，展示了@keyframes和@-webkit-keyframes的用法。

.box{ width: 100px;
            height: 100px;
            margin: 50px auto;
            /*background-color: #ff0000;*/

        }
        /*.box,*/
            .box:hover {

                -moz-animation: hover 1s ease-out;
                -o-animation: hover 1s ease-out;
                -webkit-animation: hover 1s ease-out;
                /*-webkit-animation-name: hover;
            -webkit-animation-duration: 1s;
            -webkit-animation-timing-function: ease-in;
            -webkit-animation-iteration-count: infinite;*/
            }
            @-webkit-keyframes hover {
             0% {
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                }
                50% {
                    width: 200px;
                    height: 200px;
                    border-radius: 50%;
                }
              100%{ width: 100px;height: 100px;border-radius: 50%; }
            }
        @keyframes hover {
            0% {
                width: 100px;
                height: 100px;
                border-radius: 50%;
            }

            50% {
                width: 200px;
                height: 200px;
                border-radius: 50%;
            }

            100% {
                width: 100px;
                height: 100px;
                border-radius: 50%;
            }
        }
       </style>