zoukankan      html  css  js  c++  java
  • css3动画加停止

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>c3播放暂停</title>
        <style type="text/css">
        .animation{
             100px;
            height: 100px;
            margin: 50px auto;
            background: deeppink;
            animation: move 2s linear infinite alternate; 
        }
        input{
            display: none;
        }
        @keyframes move{
            0%{
                transform: translate(-100px,0);
            }
            100%{
                transform: translate(100px,0);
            }
        }
        .btn{
             50px;
            margin: 10px auto;
            text-align: center;
            border: 1px solid #ddd;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;     
        }
        .btn:hover {
            background: #ddd;
            color: #333;
        }
        
        
        .btn:active {
            background: #aaa;
            color: #dff;
        }
        .stop:hover ~ .animation{
            animation-play-state: paused; 
        }
        </style>
    </head>
    <body>
        <div class="stop btn">stop</div>
        <div class="animation"></div>
    </body>
    </html>
  • 相关阅读:
    Linux内存初始化
    linux PCI设备初始化过程
    Linux网络地址转换分析
    Linux内核中流量控制
    IPSEC实现
    ip_conntrack 实现
    module_init宏解析
    IP隧道基础研究
    IPV6介绍
    Golang的接口
  • 原文地址:https://www.cnblogs.com/zzgyq/p/7412028.html
Copyright © 2011-2022 走看看