vr/360——toolofna

效果

文字排版

按钮特效

图片排版

图片标亮

文字排版

思路

1、主要是header，h1，h2和p

    <section class="about">
        <div class="content">
            <header>
                <h1>virtual reality / 360</h1>
                <h2>HUMAN-CENTERED STORYTELLING</h2>
            </header>
            <p>
                Human-centered storytelling is at the heart of Tool’s approach to VR and 360. From live action cinematic
                VR to real-time rendered CGI, our creative process is designed around the sensitivities of user
                experience. Our directors, artists and technologists understand the nuances of sound, haptics, and
                visual cues when it comes to directing user gaze and creating presence in the virtual world. We are a
                turnkey shop wth capabilities that include 360 mono/stereo live action, game engine development, CGI,
                UX/UI, app development, post and stitching, installation design, and environmental builds. As experts in
                platform and distribution strategy, we work across Oculus, Vive, GearVR, Cardboard, and browser-based
                360 to optimize reach and accessibility for any audience.
            </p>
        </div>
    </section>

2、p设置宽度

#vr360 .about p{
    width: 580px;
    max-width: 100%;
    color: white;
    line-height: 2;
    margin-top: 20px;
    font-family: "LetterGothicStd-BoldSlanted", "Lucida Console", Monaco, monospace;
}

3、背景图

#vr360 .about{
    background-image: url("../images/vr/vr360-about.jpg");
}

按钮特效

思路

1、html结构

<section class="reel">
        <div class="content">
            <h1>VR / 360 show reel</h1>
            <div class="playbtn">play</div>
        </div>
    </section>

2、给div.playbtn设置伪元素：after

#vr360 .reel .content div:after{
    content: "";
    position: absolute;
    top:0;
    left: -30px;
    width: 0;
    height: 100%;
    background-color: #ffffff;
    z-index: -1;
    transform: skew(-15deg);
    transition: width .3s;
}

3、给div.playbtn设置伪类：hover

#vr360 .reel .content div:hover:after{
    width: 140%;
}
#vr360 .reel .content div:hover{
    color: #000000;
}

图片排版

思路

1、a的结构

            <a class="project" href="javascript:void(0)">
                <header>
                    <h2>Adidas</h2>
                    <h2>Brig</h2>
                    <h1>Project Harden - VR</h1>
                </header>
                <div class="img">
                    <img src="images/vr/becomeelectric2-372x214.jpg">
                </div>
            </a>

2、设置第3n-1个a的margin值

#vr360 .projects .project:nth-of-type(3n-1){
    margin-left: 3%;
    margin-right: 3%;
}

图片标亮

思路

还是通过：hover来改变opacity属性，记得给元素设置transition实现动画过渡效果

#vr360 .projects a:hover .img img{
    opacity: .8;
}
#vr360 .projects a:hover header{
    transform: translateY(-15px);
}

总结

本页面主要是CSS3的相关应用，以及对布局的一些思考，整体结构清晰明了

toolofna

http://toolofna.com/#!/vr360