5.13 (案例) 2d转换课堂案例

2d转换课堂案例.png
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/sty.css"/>
    </head>
    <body>
        <div class="container">
            <figure class="effect1">
                ![](img/pic1.jpg)
                <figcaption>
                    <h2>平移动画1</h2>
                    <p>最简单的平移动画</p>
                </figcaption>
            </figure>
            <figure class="effect2">
                ![](img/pic2.jpg)
                <figcaption>
                    <h2>平移动画2</h2>
                    <span class="span1">&nbsp;多条图片简介文字&nbsp;</span>
                    <span class="span2">&nbsp;逐一飞入动画&nbsp;</span>
                    <span class="span3">&nbsp;利用动画延时达到效果&nbsp;</span>
                </figcaption>
            </figure>
            <figure class="effect3">
                ![](img/pic3.jpg)
                <figcaption>
                    <h2>底部滑出动画</h2>
                    <p>translate属性可以制作多种动画，一个简单的位置移动可以制作出多种效果，重要看制作师们能否开动想象力。</p>
                </figcaption>
            </figure>
            <figure class="effect4">
                ![](img/pic4.jpg)
                <figcaption>
                    <h2>利用旋转显示额外的信息</h2>
                        <p class="info1">info1</p>
                        <p class="info2">info2</p>
                </figcaption>
                <div></div>
            </figure>
            <figure class="effect5">
                ![](img/pic5.jpg)
                <figcaption>
                    <h2>旋转飞入飞出</h2>
                    <p>通过旋转和位移制作飞入飞出效果</p>
                </figcaption>
                <div></div>
            </figure>
            <figure class="effect6">
                ![](img/pic6.jpg)
                <figcaption>
                    <h2>扭曲飞入飞去</h2>
                    <p>通过扭曲和位移，制作出飞入的效果。<br>扭曲属到达90度。元素就看不见了</p>
                </figcaption>
            </figure>
            <figure class="effect7">
                ![](img/pic7.jpg)
                <figcaption>
                    <h2>简单的缩放效果</h2>
                    <p>通过简单的缩放达到效果</p>
                </figcaption>
                <div></div>
            </figure>
            <figure class="effect8">
                ![](img/pic8.jpg)
                <figcaption>
                    <h2>绘制线条效果</h2>
                    <p>通过缩放属性绘制边框线条</p>
                </figcaption>
                <div class="borW"></div>
                <div class="borH"></div>
            </figure>
            <figure class="effect9">
                ![](img/pic9.jpg)
                <figcaption>
                    <h2>作业</h2>
                    <p>自己设计一个效果</p>
                </figcaption>
            </figure>
        </div>
    </body>
</html>


@charset "utf-8";
*{
    padding: 0;
    margin: 0;
}
html{
    font-size: 62.5%;
}

figure{
    position: relative;
    float: left;
    width: 33.33%;
    height: 365px;
    transition: all .5s;
    overflow: hidden;
}
h2{
    font-size: 3.2rem;
    color:#ffffff;
    transition: all .5s;
}
p{
    color:#ffffff;
    font-size: 2.2rem;
    transition: all .5s;
}
img{
    position: absolute;
    left:0;
    top:0;
    opacity: 1;
    transition: all .5s;
}

span{
    display: block;
    color:#000;
    background-color: #ffffff;
    font-size: 1.4rem;
    line-height: 1.6rem;
    transition: all .5s;
}
figure:hover img{
    transform: translateX(-20px);
    opacity: .5;
}

div{
    transition: all .5s;
}
.effect1 h2{
    position: absolute;
    left: 30px;
    bottom:60px;
    
}
.effect1 p{
    position: absolute;
    left: 30px;
    bottom:-30px;
    
}
.effect1:hover img{
    transform: translateX(-20px);
}
.effect1:hover h2{
    transform: translateY(-10px);
}
.effect1:hover p{
    transform: translateY(-50px);
}

.effect2 h2{
    position: absolute;
    top:60px;
    left:30px;
}
.effect2:hover h2{
    transform: translateY(-15px);
}

.effect2 .span1{
    position: absolute;
    top:100px;
    left:-220px;
}
.effect2 .span1{
    position: absolute;
    top:130px;
    left:-220px;
}
.effect2 .span2{
    position: absolute;
    top:160px;
    left:-220px;
    transition-delay: .2s;
}
.effect2 .span3{
    position: absolute;
    top:190px;
    left:-220px;
    transition-delay: .3s;
}
.effect2:hover .span1{
    transform: translateX(250px);
    
}
.effect2:hover .span2{
    transform: translateX(250px);
    
}
.effect2:hover .span3{ 
    transform: translateX(250px);
}

.effect3 h2{
    position: absolute;
    top:100px;
    left:30px;
}
.effect3:hover h2{
    transform: translateY(-10px);
}

.effect3 p{
    position: absolute;
    left:0;
    bottom: -50px;
    background-color: #ffffff;
    width: 100%;
    text-indent: 2rem;
    height: 50px;
    line-height: 1.8rem;
    font-size: 1.4rem;
    color: #000;
}
.effect3:hover p{
    transform: translateY(-50px);
}

.effect4 h2{
    position: absolute;
    top:100px;
    left:30px;
    opacity: 0;
}

.effect4 div{
    position: absolute;
    bottom: -300px;
    width: 800px;
    height: 300px;
    z-index: 98;
    background-color: #ffffff;
    
}
.effect4 .info1{
    position: absolute;
    right: 120px;
    bottom:-50px;
    color:#000;
    font-weight:bold;
    z-index:99;
}
.effect4 .info2{
    position: absolute;
    right: 50px;
    bottom:-50px;
    color:#000;
    z-index:99;
    font-weight:bold;
    transition-delay: 0.05s;
}
.effect4:hover h2{
    transform: translateY(-30px);
    opacity: 1;
}
.effect4:hover .info2{
    transform:translateY(-80px);
}
.effect4:hover .info1{
    transform:translateY(-80px);
}
.effect4:hover div{
    transform-origin: 0 0;
    transform: rotate(-15deg);
}

.effect5 div{
    position: absolute;
    left:15%;
    top:15%;
    width: 70%;
    height: 70%;
    border:1px solid #000;
    transform: translateY(-400px) rotate(0deg) ;
    transform-origin: 0 0;
}
.effect5:hover div{
    transform: translateY(0px) rotate(360deg) ;
}
.effect5 h2{
    position: absolute;
    left: 30px;
    top: 60px;
}
.effect5:hover h2{
    transform: translateX(50px);
}
.effect5 p{
    position: absolute;
    font-size: 1.2rem;
    left:20%;
    top:50%;
}
.effect5:hover p{
    transform: translateY(-30px);
}

.effect6 h2{
    position: absolute;
    left:30px;
    top:30px;
    transform: skew(90deg);
}
.effect6 p{
    position: absolute;
    left:60px;
    top:80px;
    transform: skew(90deg);
}
.effect6:hover h2{
    transform: skew(0deg);
}
.effect6:hover p{
    transform: skew(0deg);
}

.effect7 h2{
    position: absolute;
    left:20%;
    top:20%;
    transform: scale(1.2);
}
.effect7 img{
    transform: scale(1.2);
}
.effect7:hover img{
    transform: scale(1);
}
.effect7 div{
    width: 70%;
    height: 70%;
    position: absolute;
    left: 15%;
    top:15%;
    transform: scale(1.2);
    border: 2px solid #ffffff;
}
.effect7 p{
    position: absolute;
    left: 35%;
    top:45%;
    transform: scale(1.2);
}
.effect7:hover h2{
    transform: scale(1);
}
.effect7:hover p{
    transform: scale(1);
}
.effect7:hover div{
    transform: scale(1);
}
.effect8 h2{
    position: absolute;
    left:12%;
    top:17%;
}
.effect8:hover h2{
    transform: translateX(30px);
}
.effect8 p{
    position: absolute;
    left:17%;
    top:33%;
    opacity: 0;
}
.effect8:hover p{
    transform: translateY(-20px);
    opacity: 1;
}
.effect8 .borW{
    width:80%;
    height: 70%;
    border: 1px solid #ffffff;
    border-left: none;
    border-right: none ;
    position: absolute;
    left: 10%;
    top: 15%;
    transform: scaleX(0);
    
}
.effect8 .borH{
    width:70%;
    height: 80%;
    border: 1px solid #ffffff;
    border-top: none;
    border-bottom: none ;
    position: absolute;
    left: 15%;
    top: 10%;
    transform: scaleY(0);
}

.effect8:hover .borH{
    transform: scaleY(1);
}
.effect8:hover .borW{
    transform: scaleY(1);
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS3 2D转换 、3D转换
    CSS3 2D转换 通过 2D 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。 Internet Expl...
    safiriGitHub阅读 640评论 0赞 0
  • 0723晨读感悟--梦想的舞台要够大--环盈
    成功的经验千千万，个体、环境等差异导致我们不能完全照搬，但是我们可以从众多的经验中总结归纳出成功所必须的一些条件，...
    环盈阅读 183评论 2赞 3
  • 二十三岁
    突然一下就慌了。二十三岁的自己像个傻逼一样，畏首畏脚的过了大学到现在，没好好的去一个人旅行，没好好的谈恋爱，没好好...
    a3a353c8d9da阅读 167评论 0赞 0