zoukankan      html  css  js  c++  java
  • css3skew

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select,figure,figcaption{margin:0;padding:0}
    body{font:14px"微软雅黑","Arial Narrow",HELVETICA;}
    figure{
    float: left;
    33%;
    overflow: hidden;
    position: relative;
    background: #2f0000;
    }
    figure img{
    height: 400px;
    opacity: 0.9;
    transition: all 0.35s;
    }
    figcaption{
    position: absolute;
    left: 0;
    top: 0;
    100%;
    height: 100%;
    }
    figcaption h3{
    color: #ffffff;
    margin: 10% 0 0 12%;
    transition: all 1s;
    transform: skew(90deg);
    }
    figcaption p{
    background:#ffffff;
    color: #000000;
    margin:15px;
    font-size: 13px;
    text-align: center;
    130px;
    height: 20px;
    line-height: 20px;
    transition: all 1s;
    transform: skew(90deg);
    }

    figure:hover figcaption h3{
    transform: skew(0deg);
    }
    figure:hover figcaption p{
    transform: skew(0deg);
    }
    </style>
    </head>
    <body>

    <figure>
    <img src="images/2.jpg">
    <figcaption>
    <h3>标题标题</h3>
    <p>文字文字文字文字</p>
    </figcaption>
    </figure>
    <figure>
    <img src="images/3.jpg">
    <figcaption>
    <h3>标题标题</h3>
    <p>文字文字文字文字</p>
    </figcaption>
    </figure>
    </body>
    </html>
  • 相关阅读:
    WPF游戏摘记地图编辑器(1)
    图片和视频操作核心代码
    WPF游戏摘记地图编辑器(2)
    序言
    Asp.Net 请求处理机制
    C#正则表达式
    ActiveX控件打包成Cab实现浏览器自动下载安装
    ios数据存储
    ARC 学习
    Ray's Learn Cocos2d 笔记(一)
  • 原文地址:https://www.cnblogs.com/yuanyuan-1994/p/8733464.html
Copyright © 2011-2022 走看看