css3 animate学习(一)：仿联想手机官网

最新推荐文章于 2024-05-23 22:54:35 发布

长安古意

最新推荐文章于 2024-05-23 22:54:35 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css样式

本文链接：https://blog.youkuaiyun.com/aiyishengyishi/article/details/53885712

本文介绍了如何使用CSS3 Animate来仿制联想手机官网的动画效果，包括创建静态页面、添加动画效果以及通过判断元素进入视窗来触发动画。详细过程分为三个步骤：首先构建静态页面，接着应用animate.css为元素添加动画，最后讨论了animation-fill-mode属性在动画触发中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

仿联想手机链接如下：http://www.lenovomobile.com/en/z1/design/index.html
由于时间有限，只模仿了最开始的几屏

主要是记录一下实现的过程：
1.实现静态页面
2.运用css3 animate为相应的动画元素添加动画效果
3.判断有动画效果的元素进入视窗范围再触发动画

一.实现静态页面

html部分：

<body>
    <div class="pageContainer">
        <div class="page">
            <div class="title" id="page1_1">
                <span>Comfort in every touch</span>
            </div>
            <div class="image1" >
                <img class="animated" id="page1_2" src="image/1.png">
            </div>
            <div class="info" id="page1_3">
                <p>We believe a comfortable experience of the phone far outweighs a cool appearance or an extremely slim body. The smooth transition between the metal frame and glass screen, the streamline edges, and the considerate curved back cover - every detail is designed to be just perfect, and for your best experience. </p>
            </div>
        </div>
        <div class="page page2">
            <div class="image2" >
                <img class="animated" id="page2_1" src="image/2a.png">
            </div>
            <div class="image2">
                <img class="animated" id="page2_2" src="image/2b.png">
            </div>
        </div>
        <div class="page page3">
            <div class="info2">
                <div class="title">
                    <span>A fitting arc</span> <br/>
                    <span> and a comfortable feel </span>
                </div>
                <p>
                    In our concept, a handheld device should, above all, provides a comfort of use to cater to a long-term service. So we analyzed every detail on the phone, from single-hand holding to two-hand holding and from the finger tips to the palm, and try to take everything into consideration. The rounded edges, curved back cover, refined frame, and every other part of the phone join together to form a delicate whole with endowed comfort of touch. 
                </p>
            </div>
            <div class="image3 animated"  id="page3_1" ></div>
        </div>
        <div class="page page4">
            <div class="title">
                <span>Precise frame design</span>
            </div>
            <div class="info" id="page1_3">
                <p>Z1 uses an aircraft aluminum frame from 16 CNC processes and 209 procedures, with the processing precision up to ±0.03 mm. The frame is reinforced by nanofilm in-mold injection molding technology and has a delicate touch thanks to the complex sand blasting process. </p>
            </div>
            <div class="image4"  id="page4_1" >
                <img class="" src="image/4a.png">
            </div>
            <div class="image4">
                <img id="page4_2" src="image/4b.png">
            </div>
        </div>
    </div>
</body>

css部分：

<style>
    body,html{
        margin:0;

最低0.47元/天解锁文章

200万优质内容无限畅学