css实现三维风车相册画廊效果代码

代码语言:html

所属分类:画廊相册

代码描述:css实现三维风车相册画廊效果代码

代码标签: css 相册 画廊 风车

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        body {
          background: #f5f5f5;
        
        }
        #stage {
          margin: 1em auto;
          padding-left: 380px;
          padding-top: 50px;
          height: 160px;
          perspective: 1200px;
        }
        #spinner {
          animation-name: spinner;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
          animation-duration: 6s;
          transform-style: preserve-3d;
        }
        #spinner:hover {
          animation-play-state: paused;
        }
        img {
          position: absolute;
          border: 1px solid #ccc;
          background: rgba(255,255,255,0.8);
          box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
        }
        @-webkit-keyframes spinner {
          from {
            -webkit-transform: rotateY(0deg);
          }
          to {
            -webkit-transform: rotateY(-360deg);
          }
        }
    </style>


</head>

<body translate="no">
    <div id="stage" style="; ">
        <div id="spinner" style="-webkit-transform-origin: 180px.........完整代码请登录后点击上方下载按钮下载查看

网友评论0