zoukankan      html  css  js  c++  java
  • CSS3 简单的砸金蛋样式

    实现样式:

    1、鼠标移入后,鼠标样式图标变为“锤子”。

    2、用户砸金蛋,锤子简单的扬起效果。

    3、砸碎金蛋,显示内容。

    分析实现步骤:

    1、在html中插入一颗金蛋

    找一张静态图片或带一点效果的动态图,直接放入img标签即可。

    2、鼠标移入,改变鼠标样式图标

    系统自带的鼠标样式就那几种,可以通过css修改,简单的一句代码:

    cursor: url("./IMG/chuizi1.png"), default;

    只是需要给定改变样式时的前提要求,此处要求是鼠标移入改变,即hover时改变:

    body>div aside label img:hover {
         cursor: url("./IMG/chuizi1.png"), default;
    }

    url内为自己选择的“锤子”样式。

    电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

    3、当用户砸蛋时,让锤子扬起来

    因为只能使用css,那只有利用鼠标的点击状态(按住鼠标左键)来实现了,当用户点击鼠标左键时,

    改表鼠标样式,和上一步一样,只是改变样式时的前提要求不同,这一步为active时改变:

    body>div aside label img:active {
       cursor: url("./IMG/chuizi2.png"), default;
    }

    注:锤子扬起来和没扬起来,给两个锤子扬起角度不同的图片即可:

    移入显示chuizi1,按住鼠标左键显示chuizi2,就会有一种把锤子扬起来的视觉效果。

    4、用户砸蛋过后,显示结果

    首先,砸金蛋分两个状态,砸蛋前、砸蛋后,前面三步为砸蛋前状态,第四步为砸蛋后状态,为了把状态区分开,

    想到伪类选择器有访问前和访问后两个状态,但是只能用于链接标签a,此处不适用,就想到了form表单

    里面的复选框,它有选中和不选中两种情况,和砸蛋前、砸蛋后相符合,就用它了;

    其次,状态区别出来了,变为砸蛋后的状态,要让页面当中内容改变,只有通过隐藏页面中的图片,然后

    把结果用背景图的方式展示出来

    /* 当选中时,隐藏图片 */
    body>div aside input:checked+label>img {
        display: none;
    }
    /* 当选中时,用背景的方式显示结果 */
    body>div aside input:checked+label {
        animation: zadan linear 1 8s;
        background-size: 200px 200px;
       background-image: url("./IMG/dan5.jpg");
    }

    注:我设置了几张图片的动画显示:animation: zadan linear 1 8s;,这样结果会过渡得更好看,动画结果固定显示:background-image: url("./IMG/dan5.jpg");

     

    下面是完整代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>砸蛋</title>
        <style>
            /* 砸蛋动画 */
            @keyframes zadan {
                0% {
                    background-image: url("./IMG/dan11.jpg");
                }
    
                30% {
                    background-image: url("./IMG/dan2.gif");
                }
    
                60% {
                    background-image: url("./IMG/dan3.gif");
                }
    
                90% {
                    background-image: url("./IMG/dan4.jpg");
                }
            }
    
            body>div {
                 100%;
            }
    
            body>div aside {
                 200px;
                margin: 70px auto 0px;
                height: 200px;
            }
            /* 隐藏复选框默认样式 */
            body>div aside input {
                display: none;
            }
    
            body>div aside label {
                 200px;
                height: 200px;
                display: block;
            }
    
            body>div aside label img {
                 200px;
                height: 200px;
            }
            /* 鼠标移入改变样式 */
            body>div aside label img:hover {
                cursor: url("./IMG/chuizi1.png"), default;
            }
            /* 鼠标左击时样式 */
            body>div aside label img:active {
                cursor: url("./IMG/chuizi2.png"), default;
            }
            /* 当选中时,隐藏图片 */
            body>div aside input:checked+label>img {
                display: none;
            }
            /* 当选中时,用背景的方式显示结果 */
            body>div aside input:checked+label {
                animation: zadan linear 1 8s;
                background-size: 200px 200px;
                background-image: url("./IMG/dan5.jpg");
            }
        </style>
    </head>
    
    <body>
        <div>
    
            <aside>
                <input type="checkbox" id="zadan">
    
                <label for="zadan">
                    <img src="./IMG/dan1.jpg" alt="">
                </label>
            </aside>
        </div>
    
    </body>
    
    </html>
  • 相关阅读:
    Windows Azure Web Site (19) Azure Web App链接到VSTS
    Windows Azure Virtual Machine (35) Azure VM通过Linked DB,执行SQL Job
    Azure PowerShell (16) 并行开关机Azure ARM VM
    Windows Azure Virtual Network (12) 虚拟网络之间点对点连接VNet Peering
    Azure ARM (21) Azure订阅的两种管理模式
    Windows Azure Platform Introduction (14) 申请海外的Windows Azure账户
    Azure ARM (20) 将非托管磁盘虚拟机(Unmanage Disk),迁移成托管磁盘虚拟机(Manage Disk)
    Azure ARM (19) 将传统的ASM VM迁移到ARM VM (2)
    Azure ARM (18) 将传统的ASM VM迁移到ARM VM (1)
    Azure Automation (6) 执行Azure SQL Job
  • 原文地址:https://www.cnblogs.com/qianxiaox/p/13809009.html
Copyright © 2011-2022 走看看