zoukankan      html  css  js  c++  java
  • 音乐小转盘 css3 动画

    <!DOCTYPE html>
    <html>
    
    <head>
        <title>rotate</title>
        <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
            border: none;
        }
        
        body {
            margin: 0;
            padding: 0;
        }
        
        @keyframes spin {
             /*transform: rotateX(50deg);*/
    
            0% {
                transform: rotateZ(0deg);
            }
            100% {
                transform: rotateZ(360deg);
            }
        }
        
        .inner {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #FF00FF;
            overflow: hidden;
     
        }
        
        .inner img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            -webkit-filter: blur(1px);
            transition-delay: 0.5s;
     
            transition: all 0.001s ease-in-out;
        }
        
        .out {
            width: 210px;
            height: 210px;
            border: 1px dashed red;
            border-radius: 50%;
            padding: 5px;
            margin: 250px auto;
            transform:rotateX(85deg);
            /*transform-origin:center;*/
    
            
        }
        .roll{
             animation: spin 6s linear infinite; 
             width: 100%;
            height: 100%;
        }
        .inner:hover img {
            transform: scale(1.1, 1.1);
            -webkit-filter: blur(0px);
        }
        </style>
    </head>
    
    <body>
        <div class="out ">
        <div class="roll">
            <div class="inner">
                <img src="1.jpg">
            </div></div>
        </div>
    </body>
    
    </html>
  • 相关阅读:
    php面向对象三大特性
    php面向对象的重写与重载
    一组成对的数字,找出不成对的数字
    如何创建dll以及使用
    常见运行时错误
    连续数的和
    绕圆圈取球
    第一章 概述
    错误2038
    一个简单的环境光shader
  • 原文地址:https://www.cnblogs.com/wind90/p/4902236.html
Copyright © 2011-2022 走看看