首页 > > 网页制作 > css >

宣传页项目开发（二）

2020-02-10 16:01:15来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

宣传页项目开发（二）

之前已经完成了静态页面的开发，接下来是网页动态效果制作

css实现动画的两种方式：

1、transition: all 1s;

2、animation: move 1s infinite ease-in-out .5s;

@keyframes move{

0%{ transform: rotate(0deg); }

40%{ transform: rotate(45deg); }

100%{ transform: rotate(0deg); }

}

两种遍历的方式，遍历对象 { }  遍历数组 [ ]

for(k in obj){

do (k);

}

for(var i=0; i<obj.length; i++){

do( obj[i] );

}

css动画测试

首先新建一个animate.css专门用于存放动画效果

.screen-1-heading{ transition:all 1s; }
.screen-1-heading-init{ opacity: 0;transform:translate(0,100%); }
.screen-1-heading-done{ opacity: 1;transform:translate(0,0); }
/*# sourceMappingURL=animate.css.map */

 

新建一个动画测试脚本 test.js

// 需要设置动画的元素
var animateElements={
    ".screen-1":[
        ".screen-1-heading",
        ".screen-1-phone",
        ".screen-1-shadow"
    ]
}

//设置动画
function setAnimate(screenName){//屏的类名，如： ".screen-1"
    var screen=document.querySelector(screenName);//获取哪一屏
    var screenEles=animateElements[screenName];//获取该屏下要动画的所有元素
    var isInit=false; //动画是否初始化
    var isDone=false;//动画是否完成

    screen.onclick=function(){
        //初始化
        if(isInit===false){
            for(var i=0,len=screenEles.length;i<len;i++){
                var newCls=screenEles[i].substr(1)+"-init";
                var screenEle=document.querySelector(screenEles[i]);//某个要动画的元素
                var baseCls=screenEle.getAttribute("class");//获取原来的类
                screenEle.setAttribute("class", baseCls+" "+newCls);//添加init类
            }
            isInit=true;
            return;
        }

        //完成动画
        if(isDone===false){
            for(var i=0,len=screenEles.length;i<len;i++){            
                var screenEle=document.querySelector(screenEles[i]);//某个要动画的元素
                var baseCls=screenEle.getAttribute("class");//获取原来的类
                var newCls=screenEles[i].replace("-init", "-done").substr(1);
                screenEle.setAttribute("class", newCls);//添加init类
            }
            isDone=true;
            return;
        }

        //切换done到init
        if(isDone===true){
            for(var i=0,len=screenEles.length;i<len;i++){            
                var screenEle=document.querySelector(screenEles[i]);//某个要动画的元素
                var baseCls=screenEle.getAttribute("class");//获取原来的类
                var newCls=screenEles[i].replace("-done", "-init").substr(1);
                screenEle.setAttribute("class", newCls);//添加init类
            }
            isDone=false;
            return;
        }
    }

}

setAnimate(".screen-1");

补充：给容器设置overflow: hidden;   

可以保证元素在进行动画的过程中，不会占用别的屏的空间

div 可以添加hover伪类制作动画，但是为了更好的兼容性，建议外面加上a标签，display设置为block，来添加hover 效果

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="animate.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="header-wrap">
            <div class="header-logo">微课手机</div>
            <nav class="header-nav">
                <a href="javascript:void(0);" class="header-nav-item header-nav-item-active">外观</a>
                <a href="javascript:void(0);" class="header-nav-item">配置</a>
                <a href="javascript:void(0);" class="header-nav-item">型号</a>
                <a href="javascript:void(0);" class="header-nav-item">说明</a>
                <a href="javascript:void(0);" class="header-nav-item">其他产品</a>
                <a href="javascript:void(0);" class="header-nav-item header-nav-item-button">立即购买</a>
            </nav>
    </header>
    <!-- 第一屏 -->
    <div class="screen-1">
        <h2 class="screen-1-heading"><span>微课手机</span> 让你的生活更精彩</h2>
        <div class="screen-1-phone"></div>
        <div class="screen-1-shadow"></div>
    </div>
    <!-- 第二屏 -->
    <div class="screen-2">
        <div class="screen-2-wrap">
            <h2 class="screen-2-heading">优美的设计，更令人着迷</h2>
            <h4 class="screen-2-subheading">采用受欢迎的设计，让它更加出色。<br>
款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h4>
            <div class="screen-2-phone">
                <div class="screen-2-point screen-2-point-i1">高清摄像</div>
                <div class="screen-2-point screen-2-point-right screen-2-point-i2">超薄机身</div>
                <div class="screen-2-point screen-2-point-right screen-2-point-i3">大屏显示</div>
            </div>
        </div>
    </div>
    <!-- 第三屏 -->
    <div class="screen-3">
        <div class="screen-3-wrap">
            <h2 class="screen-3-heading">优美的设计，更令人着迷</h2>
            <h4 class="screen-3-subheading">采用受欢迎的设计，让它更加出色。<br>
款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h4>
            <div class="screen-3-phone"></div>
            <div class="screen-3-detail">
                <div class="screen-3-detail-item">
                    <div class="screen-3-detail-num">5.7</div>
                    <div class="screen-3-detail-desc">英寸大屏</div>
                </div>
                <div class="screen-3-detail-item">
                    <div class="screen-3-detail-num">1200</div>
                    <div class="screen-3-detail-desc">万像素</div>
                </div>
                <div class="screen-3-detail-item">
                    <div class="screen-3-detail-num">3D</div>
                    <div class="screen-3-detail-desc">Touch</div>
                </div>
                <div class="screen-3-detail-item">
                    <div class="screen-3-detail-num">A9</div>
                    <div class="screen-3-detail-desc">处理器</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第四屏 -->
    <div class="screen-4">
        <div class="screen-4-wrap">
            <h2 class="screen-4-heading">丰富的手机型号</h2>
            <h4 class="screen-4-subheading">找到适合你的手机</h4>
            <div class="screen-4-phone">
                <div class="screen-4-phone-item screen-4-phone-i1">
                    <div class="screen-4-phone-color">微课红</div>
                    <div class="screen-4-phone-model">32G/64G/138G</div>
                </div>
                <div class="screen-4-phone-item screen-4-phone-i2">
                    <div class="screen-4-phone-color">土豪金</div>
                    <div class="screen-4-phone-model">32G/64G/138G</div>
                </div>
                <div class="screen-4-phone-item screen-4-phone-i3">
                    <div class="screen-4-phone-color">太空灰</div>
                    <div class="screen-4-phone-model">32G/64G/138G</div>
                </div>
                <div class="screen-4-phone-item screen-4-phone-i4">
                    <div class="screen-4-phone-color">绅士黑</div>
                    <div class="screen-4-phone-model">32G/64G/138G</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第五屏 -->
    <div class="screen-5">
        <h2 class="screen-5-heading">游戏、学习、拍照，有这一部就够了</h2>
        <h4 class="screen-5-subheading">    看视频、拍摄高清视频与照片、视频聊天、通话相结合，一机多功能，让您生活更丰富精彩。
        </h4>
        <div class="screen-5-bg"></div>
    </div>
    <!-- 第六屏 -->
    <div class="screen-6">
        <button class="screen-6-btn">立即购买</button>
    </div>
    <!-- 底部 -->
    <footer>© 2020&nbsp;&nbsp;test.com&nbsp;&nbsp;浙ICP备00000000号</footer>

    <script src="test.js"></script>
</body>
</html>

base.css

*{
    margin:0;
    padding:0;
}

a{
    text-decoration: none;
    color:#44484d;
}

ul{
    list-style:none;
}

body{
    color:#44484d;
}

h2{
    font-size:48px;
    font-weight:lighter;
    padding-top:81px;
    padding-bottom:15px;
}

h4{
    font-size:16px;
    line-height:30px;
    font-weight:normal;
    padding-bottom:15px;
}

/*# sourceMappingURL=base.css.map */

style.css

/*头部*/
header{
    background:#f7f7f7;
    width:100%;
    height:80px;
}
.header-wrap{
    width:1200px;
    height:100%;
    margin:0 auto;
    position: relative;
}
.header-logo{
    width:140px;
    height:39px;
    margin-left:24px;
    background:url(img/logo.png) left center no-repeat;
    background-size:39px 39px;
    text-indent:51px;
    line-height:39px;
    position: absolute;
    top:50%;
    margin-top:-20px;
    font-size:20px;
}
.header-nav{
    position: absolute;
    right:24px;
    height:39px;
    line-height:39px;
    top:50%;
    margin-top:-20px;
    font-size:14px;
}
.header-nav-item{
    display: block;
    float:left;
    margin-left:45px;
}
.header-nav-item-active{
    color:#f04747;
    position: relative;
}
.header-nav-item-active::after{
    content:"";
    display: block;
    height:2px;
    width:100%;
    position: absolute;
    top:39px;
    left:0;
    background-color: #f04747;
}
.header-nav-item-button{
    width:90px;
    height:39px;
    background-color:#07111b;
    color:#f4f4f5;
    text-align: center;
    border-radius:3px;
}

/*第一屏*/
.screen-1{
    width:100%;
    height:795px;
    background:url(img/screen-1-bg.png) no-repeat;
    background-size:cover;
    text-align: center;
    position: relative;
}
.screen-1-heading{
    padding-top:138px;
    padding-bottom:94px;
    color:#4d555d;
}
.screen-1-heading span{
    color:#f04747;
}
.screen-1-phone{
    background:url(img/screen-1-phone.png) center no-repeat;
    width:1375px;
    height:305px;
    left:50%;
    margin-left:-687px;
    position: absolute;
    bottom:180px;
    z-index:2;
}
.screen-1-shadow{
    background:url(img/screen-1-shadow.png) center no-repeat;
    width:1183px;
    height:367px;
    left:50%;
    margin-left:-591px;
    position: absolute;
    bottom:30px;
    z-index:1;
}

/*第二屏*/
.screen-2{
    width:100%;
    height:800px;
    background:#fafafa;
}
.screen-2-wrap{
    width:1200px;
    height:100%;
    margin:0 auto;
    text-align: center;
    position: relative;
    overflow:hidden;
}
.screen-2-heading{
    color:#f04747;
}
.screen-2-subheading{
    color:#4d555d;
}
.screen-2-phone{
    background:url(img/screen-2-phone.png) center no-repeat;
    width:928px;
    height:530px;
    left:50%;
    margin-left:-464px;
    position: absolute;
    bottom:0;
}
.screen-2-point{
    font-weight:lighter;
    width:104px;
    padding-right:97px;
    background:url(img/screen-2-point-left.png) center right no-repeat;
    position: absolute;
}
.screen-2-point-right{
    padding-right:0;
    padding-left:97px;
    background:url(img/screen-2-point-right.png) center left no-repeat;
}
.screen-2-point-i1{
    top:160px;
    left:-153px;
}
.screen-2-point-i2{
    top:40px;
    right:150px;
}
.screen-2-point-i3{
    top:340px;
    right:40px;
}

/*第三屏*/
.screen-3{
    width:100%;
    height:800px;
    background:#fafafa;
    background:url(img/screen-3-bg.png) no-repeat;
    background-size:cover;
    position: relative;
}
.screen-3-wrap{
    width:1200px;
    padding:0 50px;
    height:100%;
    margin:0 auto;
    position: relative;
    color:#fff;    
    overflow:hidden;
}
.screen-3-phone{
    background:url(img/screen-3-phone.png) top right no-repeat;
    width:767px;
    height:576px;
    right:0;
    position: absolute;
    bottom:0;
}
.screen-3-detail{
    margin-top:152px;
    width:333px;
}
.screen-3-detail-item{
    width:140px;
    height:127px;
    border:1px solid #cd6d6f;
    float:left;
    border-radius:3px;
    margin-right:24px;
    text-align: center;
    margin-bottom:18px;
}
.screen-3-detail-num{
    font-size:48px;
    line-height:48px;
    padding-top:24px;
}
.screen-3-detail-desc{
    padding-top:5px;
}

/*第四屏*/
.screen-4{
    width:100%;
    height:800px;
}
.screen-4-wrap{
    width:1200px;
    height:100%;
    margin:0 auto;
    position: relative;
    text-align: center;
    z-index:2;
}
.screen-4-heading{
    padding-top:120px;
    padding-bottom:21px;
    color:#f04747;
}
.screen-4-subheading{
    padding-bottom:55px;
}
.screen-4-phone{
    width:1148px;
    height:355px;
}
.screen-4-phone-item{
    width:218px;
    height:355px;
    margin-right:92px;
    float:left;
    background:url(img/screen-4-phone.png) -26px top no-repeat;
}
.screen-4-phone-i1{
    background-position:-25px 0;
}
.screen-4-phone-i2{
    background-position:-301px 0;
}
.screen-4-phone-i3{
    background-position:-574px 0;
}
.screen-4-phone-i4{
    background-position:-846px 0;
    margin-right:0;
}
.screen-4-phone-color{
    padding-top:307px;
    font-size:16px;
}
.screen-4-phone-model{
    padding-top:9px;
    font-size:12px;
    color:#d8dadc;
}

/*第五屏*/
.screen-5{
    width:100%;
    height:800px;    
    background-color: #d9dde1;
    text-align: center;
    position: relative;
    overflow:hidden;
}
.screen-5-heading{
    padding-top:120px;
    padding-bottom:21px;
    color:#f04747;
}
.screen-5-subheading{
    padding-bottom:55px;
}
.screen-5-bg{
    width:1918px;
    height:433px;
    position: absolute;
    bottom:0;
    left:50%;
    margin-left:-959px;
    background:url(img/screen-5-bg.png) center no-repeat;
}

/*第六屏*/
.screen-6{
    width:100%;
    height:202px;
    background-color: #d9ddd1;
    background:url(img/screen-6-bg.png);
    text-align: center;
    padding-top:118px;
}
.screen-6-btn{
    width:243px;
    height:78px;
    line-height:78px;
    text-align: center;
    background:#f01414;
    color:#fff;
    border-radius:3px;
    font-size:24px;
    font-weight:lighter;
    border:none;
    box-shadow:0 0 10px rgba(0,0,0,.5);
    display: inline-block;
    cursor:pointer;
}

/*底部*/
footer{
    text-align: center;
    color:#fff;
    width:100%;
    height:80px;
    line-height:80px;
    background-color: #07111b;
    font-size:12px;
    font-weight:lighter;
}
/*# sourceMappingURL=style.css.map */

animate.css

/*第一屏*/
.screen-1-heading{ transition:all 1s; }
.screen-1-heading-init{ opacity: 0;transform:translate(0,100%); }
.screen-1-heading-done{ opacity: 1;transform:translate(0,0); }

.screen-1-phone{ transition:all 1s; }
.screen-1-phone-init{ opacity: 0;transform:translate(0,-100%); }
.screen-1-phone-done{ opacity: 1;transform:translate(0,0); }

.screen-1-shadow{ transition:all 1s; }
.screen-1-shadow-init{ opacity: 0;transform:translate(0,-100%); }
.screen-1-shadow-done{ opacity: 1;transform:translate(0,0); }

/*第二屏*/
.screen-2-heading{ transition:all 1s; }
.screen-2-heading-init{ opacity: 0;transform:translate(0,-100%); }
.screen-2-heading-done{ opacity: 1;transform:translate(0,0); }

.screen-2-subheading{ transition:all 1s; }
.screen-2-subheading-init{ opacity: 0;transform:translate(0,100%); }
.screen-2-subheading-done{ opacity: 1;transform:translate(0,0); }

.screen-2-phone{ transition:all 1s; }
.screen-2-phone-init{ opacity: 0;transform:translate(0,100%); }
.screen-2-phone-done{ opacity: 1;transform:translate(0,0); }

.screen-2-point{ transition:all 1s .5s; }
.screen-2-point-i1-init{ opacity: 0;transform:translate(-100%,0); }
.screen-2-point-i1-done{ opacity: 1;transform:translate(0,0); }

.screen-2-point-i2-init{ opacity: 0;transform:translate(100%,0); }
.screen-2-point-i2-done{ opacity: 1;transform:translate(0,0); }

.screen-2-point-i3-init{ opacity: 0;transform:translate(100%,0); }
.screen-2-point-i3-done{ opacity: 1;transform:translate(0,0); }

/*圆点呼吸动画*/
.screen-2-point::before,
.screen-2-point::after{
    content:"";
    display: block;
    width:20px;
    height:20px;
    position: absolute;
    top:0;
    left:0;
    background-color:rgba(255,0,0,.5);
    border-radius:50%;
    animation:bounce 2s infinite;
}
.screen-2-point::before{ animation:bounce 2s infinite 1s; }
.screen-2-point-i1::before,
.screen-2-point-i1::after{ top:0; left:auto; right:0; }
@keyframes bounce{
    0%,100%{ transform:scale(0); }
    50%{ transform:scale(1); }
}

/*第三屏*/
.screen-3-heading{ transition:all 1s; }
.screen-3-heading-init{ opacity: 0;transform:translate(0,-100%); }
.screen-3-heading-done{ opacity: 1;transform:translate(0,0); }

.screen-3-subheading{ transition:all 1s; }
.screen-3-subheading-init{ opacity: 0;transform:translate(0,100%); }
.screen-3-subheading-done{ opacity: 1;transform:translate(0,0); }

.screen-3-phone{ transition:all 1s; }
.screen-3-phone-init{ opacity: 0;transform:translate(0,100%); }
.screen-3-phone-done{ opacity: 1;transform:translate(0,0); }

.screen-3-detail{ transition:all 1s; }
.screen-3-detail-init{ opacity: 0;transform:scale(.5); }
.screen-3-detail-done{ opacity: 1;transform:scale(1); }

/*鼠标悬停时放大效果*/
.screen-3-detail-item{ transition: all .5s;cursor: pointer; }
.screen-3-detail-item:hover{ transform:scale(1.1);border-color:#fff; }

/*第四屏*/
.screen-4-heading{ transition:all 1s; }
.screen-4-heading-init{ opacity: 0;transform:translate(0,-100%); }
.screen-4-heading-done{ opacity: 1;transform:translate(0,0); }

.screen-4-subheading{ transition:all 1s; }
.screen-4-subheading-init{ opacity: 0;transform:translate(0,100%); }
.screen-4-subheading-done{ opacity: 1;transform:translate(0,0); }

.screen-4-phone-i1{ transition:all 1s .5s; }
.screen-4-phone-i1-init{ opacity: 0; }
.screen-4-phone-i1-done{ opacity: 1; }

.screen-4-phone-i2{ transition:all 1s 1s; }
.screen-4-phone-i2-init{ opacity: 0; }
.screen-4-phone-i2-done{ opacity: 1; }

.screen-4-phone-i3{ transition:all 1s 1.5s; }
.screen-4-phone-i3-init{ opacity: 0; }
.screen-4-phone-i3-done{ opacity: 1; }

.screen-4-phone-i4{ transition:all 1s 2s; }
.screen-4-phone-i4-init{ opacity: 0; }
.screen-4-phone-i4-done{ opacity: 1; }

/*第五屏*/
.screen-5-heading{ transition:all 1s; }
.screen-5-heading-init{ opacity: 0;transform:translate(0,-100%); }
.screen-5-heading-done{ opacity: 1;transform:translate(0,0); }

.screen-5-subheading{ transition:all 1s; }
.screen-5-subheading-init{ opacity: 0;transform:translate(0,100%); }
.screen-5-subheading-done{ opacity: 1;transform:translate(0,0); }

.screen-5-bg{ transition:all 1s; }
.screen-5-bg-init{ opacity: 0;transform:translate(0,100%); }
.screen-5-bg-done{ opacity: 1;transform:translate(0,0); }
/*# sourceMappingURL=animate.css.map */

test.js

// 需要设置动画的元素
var animateElements={
    ".screen-1":[
        ".screen-1-heading",
        ".screen-1-phone",
        ".screen-1-shadow"
    ],
    ".screen-2":[
        ".screen-2-heading",
        ".screen-2-subheading",
        ".screen-2-phone",
        ".screen-2-point-i1",
        ".screen-2-point-i2",
        ".screen-2-point-i3"
    ],
    ".screen-3":[
        ".screen-3-heading",
        ".screen-3-subheading",
        ".screen-3-phone",
        ".screen-3-detail"
    ],
    ".screen-4":[
        ".screen-4-heading",
        ".screen-4-subheading",
        ".screen-4-phone-i1",
        ".screen-4-phone-i2",
        ".screen-4-phone-i3",
        ".screen-4-phone-i4"
    ],
    ".screen-5":[
        ".screen-5-heading",
        ".screen-5-subheading",
        ".screen-5-bg"
    ]
}

//设置动画
function setAnimate(screenName){//屏的类名，如： ".screen-1"
    var screen=document.querySelector(screenName);//获取哪一屏
    var screenEles=animateElements[screenName];//获取该屏下要动画的所有元素
    var isInit=false; //动画是否初始化
    var isDone=false;//动画是否完成

    screen.onclick=function(){
        //初始化
        if(isInit===false){
            for(var i=0,len=screenEles.length;i<len;i++){
                var newCls=screenEles[i].substr(1)+"-init";
                var screenEle=document.querySelector(screenEles[i]);//某个要动画的元素
                var baseCls=screenEle.getAttribute("class");//获取原来的类
                screenEle.setAttribute("class", baseCls+" "+newCls);//添加init类
            }
            isInit=true;
            return;
        }

        //完成动画
        if(isDone===false){
            for(var i=0,len=screenEles.length;i<len;i++){            
                var screenEle=document.querySelector(screenEles[i]);//某个要动画的元素
                var baseCls=screenEle.getAttribute("class");//获取原来的类
                var newCls=baseCls.replace("-init", "-done");
                screenEle.setAttribute("class", newCls);//添加init类
            }
            isDone=true;
            return;
        }

        //切换done到init
        if(isDone===true){
            for(var i=0,len=screenEles.length;i<len;i++){            
                var screenEle=document.querySelector(screenEles[i]);//某个要动画的元素
                var baseCls=screenEle.getAttribute("class");//获取原来的类
                var newCls=baseCls.replace("-done", "-init");
                screenEle.setAttribute("class", newCls);//添加init类
            }
            isDone=false;
            return;
        }
    }

}

for(k in animateElements){
    setAnimate(k);
}

网页动态效果完成~


原文链接:https://www.cnblogs.com/chenyingying0/p/12290918.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：宣传页项目实战

下一篇：html网页基本概念

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签