CSS3如何实现点击放大的动画-创新互联

这篇文章将为大家详细讲解有关CSS3如何实现点击放大的动画,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司是一家专注于成都网站制作、成都网站设计与策划设计,北仑网站建设哪家好?成都创新互联公司做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:北仑等地区。北仑做网站价格咨询:028-86922220

示例代码



       
        @keyframes myfirst {
            0% {
                width: 50px;
                height: 50px;
                top: 10px;
                right: 10px;
            }
            75% {
                width: 60px;
                height: 60px;
                top: 5px;
                right: 5px;
            }
            100% {
                width: 50px;
                height: 50px;
                top: 10px;
                right: 10px;
            }
        }
        .warp {
            width: 400px;
            height: 300px;
            position: relative;
            background: #ccc;
        }
        .btn {
            position: absolute;
            width: 50px;
            height: 50px;
            border:solid 3px #cc3c24;
            top: 10px;
            right: 10px;
            border-radius: 8px;
            cursor: pointer;
        }
        .btn.cur{
            animation: myfirst 0.2s;
        }
        .btn.yes{
            background: #cc3c24;
        }
    



    

效果图如下:

CSS3如何实现点击放大的动画

CSS3如何实现点击放大的动画

关于“CSS3如何实现点击放大的动画”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网页名称:CSS3如何实现点击放大的动画-创新互联
标题URL:http://myzitong.com/article/dhjgio.html

其他资讯