HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 7052|回复: 0

[教程] css3鼠标经过旋转动画

[复制链接]
  • TA的每日心情
    奋斗
    2016-4-10 20:41
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    发表于 2015-11-19 15:37:05 | 显示全部楼层 |阅读模式
    QQ截图20151119153240.png 此动画的难点在于鼠标经过效果的处理针对外围元素的鼠标经过效果,然后处理内部元素的动画.div:hover .border。
    需要强调的一点是transition: all 0.8s ease-in-out 0s;这里的处理,如果取消,针对元素属性的改变进行变化会执行一次,然后恢复初始效果

    <!DOCTYPE html>
    <html>
            <head>
                    <meta charset="utf-8">
                    <title></title>
            </head>
            <body>
                    <style>
                            .div{
                                    border-radius: 128px;
                                    background: url(1.png) 0 0 no-repeat;
                                    height: 256px;
                                    position: relative;
                                    width: 256px;
                            }
                            .div .border{
                                    background: rgba(0,0,0,0.0);
                                    border-radius: 128px;
                                    border-style: solid;
                                    border-width: 10px 0 10px 0;
                                    border-color: #28b779 transparent #28b779 transparent;
                                    height: 256px;
                                    transition: all 0.8s ease-in-out 0s;
                                    width: 256px;
                            }
                            .div .info h3{
                                    color: #fff;
                                    height: 256px;
                                    left: 0px;
                                    position: absolute;
                                    opacity: 0;
                                    line-height: 256px;
                                    top:0px;
                                    text-align: center;
                                    transition: all 0.8s ease-in-out 0s;
                                    width: 256px;
                            }
                            .div:hover .border{
                                    background: rgba(0,0,0,0.5);
                                    transform: rotate(90deg);
                            }
                            .div:hover .info h3{
                                    opacity: 1;
                            }
                    </style>
                    <div class="div">
                            <div class="border"></div>
                            <div class="info">
                                                    <h3>我是超人</h3>

                                    </div>
                    </div>
            </body>
    </html>



    HTML5中国微信

    小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

    GMT+8, 2017-6-24 20:27

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表