zoukankan      html  css  js  c++  java
  • 纯css手风琴效果

     1 <!doctype html>
     2 <html lang="zh-cn">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>纯css写的一个手风琴效果供大家学习</title>
     6     <style>
     7         * { margin: 0; padding: 0; }
     8         body{background: #eee}
     9         .e-warp { width: 600px; height: 250px; overflow: hidden; margin: 100px auto; border-radius: 5px; box-shadow: 0 0 10px #999; }
    10         .e-warp li{ float: left; width: 120px; height: 100%; box-shadow: 0 0 5px rgba(0,0,0,0.5); list-style: none; width: 50px; 
    11                     -webkit-transition:width 0.5s ease-out;
    12                     -moz-transition:width 0.5s ease-out;
    13                     transition:width 0.5s ease-out;
    14                    }
    15         .e-warp li:first-child { width: 400px; }
    16         .e-warp li:hover { width: 400px; }
    17         .e-warp:hover li:not(:hover) { width: 50px; }
    18     </style>
    19 </head>
    20 <body>    
    21 <ul class="e-warp">
    22     <li><a href="#"><img src="http://y.photo.qq.com/img?s=4BsfCJx6G&l=y.jpg" alt="e-"/></a></li>
    23     <li><a href="#"><img src="http://y.photo.qq.com/img?s=MsUFaGd1k&l=y.jpg" alt="e-"/></a></li>
    24     <li><a href="#"><img src="http://y.photo.qq.com/img?s=DvIQnaOOz&l=y.jpg" alt="e-"/></a></li>
    25     <li><a href="#"><img src="http://y.photo.qq.com/img?s=ufFGoHfai&l=y.jpg" alt="e-"/></a></li>
    26     <li><a href="#"><img src="http://y.photo.qq.com/img?s=1AqJ4r5fs&l=y.jpg" alt="e-"/></a></li>
    27 </ul>
    28 </body>
    29 </html>
    • e-
    • e-
    • e-
    • e-
    • e-
    一个走在前端路上的妹子,萌萌哒~
  • 相关阅读:
    《机器学习十讲》学习报告七
    找到每个人的任务
    牛客每个人最近的登陆日期
    考试分数(一)
    牛客的课程订单分析(一)
    实习广场投递简历分析(一)
    sql 查找最晚入职员工信息
    sql 学习笔记
    shell 编程获取文件名后缀为特定字符的函数
    im的基本思路
  • 原文地址:https://www.cnblogs.com/y327595826/p/3939032.html
Copyright © 2011-2022 走看看