纯Css制作页面的平滑切换及页面内容动画效果

最新推荐文章于 2023-09-05 15:50:11 发布
最新推荐文章于 2023-09-05 15:50:11 发布
阅读量1.4k 收藏 3
点赞数
分类专栏： html 5，web前端开发 css 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_983/article/details/82618882
版权

使用Css制作的炫酷的页面平滑切换(学自慕课网)

 

其实这种东西使用js或jquery也可以实现，代码量也不大，但是纯css制作比较新鲜嘛。就是css代码略多。。。我们也可以添加不同的字体来使页面更加好看。

 



 

 

基本原理：

 

主要用了css的check   hover    after   以及定义动画等方法 

1,首先利用radio制作导航，固定在底部

2,主体部分：写一个容器充满屏幕，里面是5个section，设置其寬高均为100%（相当于5个页面），容器设置溢出隐藏属性，切换的原理是通过css选择器使我们点击每个导航使其对应的section向上移动n*100%高度，并设置其切换时间。配合主容器的溢出隐藏属性，实际效果就是页面的平滑切换效果啦

3,图片上方的倒三角也是css制作的，里面的1234也是取自section中我们设置的内容

4,页面中的标题的动画效果也是使用css选择器通过定义动画来实现的

 

不过这样也有一点缺陷，那就是得添加大量的浏览器兼容代码，css代码略长，还有其他的零零碎碎的小问题

 

页面（需要引入全局normalize.css文件）

 

 

<link rel="stylesheet" type="text/css" href="/assets/css/main.css">
<link rel="stylesheet" type="text/css" href="/assets/css/normalize.css">
<body>
<div class="container">   <！-- 主容器 -->

  <div class="st-container">
    <input type="radio" name="radio-set" checked="checked" id="st-control-1">
    <a href="#st-panel-1">Hello</a>
    <input type="radio" name="radio-set" id="st-control-2">
    <a href="#st-panel-2">你想看什么</a>
    <input type="radio" name="radio-set" id="st-control-3">
    <a href="#st-panel-3">你想买什么</a>
    <input type="radio" name="radio-set" id="st-control-4">
    <a href="#st-panel-4">还有谁！！</a>
    <input type="radio" name="radio-set" id="st-control-5">
    <a href="#st-panel-5">Come On!!</a>
    <div class="st-scroll">

      <section class="st-panel" id="st-panel-1">
        <div class="st-desc" data-icon="1"></div>   <!-- 倒三角里面的内容 -->
        <h2>Hello</h2>
        <p>Welcome To My Shop</p>
      </section>

      <section class="st-panel st-color" id="st-panel-2">
        <div class="st-desc" data-icon="2"></div>
        <h2>你想看什么</h2>
        <p>什么都可以看</p>
      </section>

      <section class="st-panel" id="st-panel-3">
        <div class="st-desc" data-icon="3"></div>
        <h2>你想买什么</h2>
        <p>什么都可以买</p>
      </section>

      <section class="st-panel st-color" id="st-panel-4">
        <div class="st-desc" data-icon="4"></div>
        <h2>还有谁！</h2>
        <p>还有谁这么便宜！</p>
      </section>

      <section class="st-panel" id="st-panel-5">
        <div class="st-desc" data-icon="5"></div>
        <h2>Come On</h2>
        <p>不注册是不行的  不登陆也是不行的</p>
        <button id="mainButton-1" οnclick="signupButton()">注册</button>
        <button id="mainButton-2" οnclick="loginButton()">登陆</button>
      </section>

    </div>
  </div>
</div>
</body>

 

这个是css文件

 

 

/*--------------------导航部分----------------------------*/

body{
    background: #cbcbcb;
    font-weight: 400;
    font-size: 15px;
    color: white;
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased; /*字体抗锯齿*/
}

a{
    text-decoration: none;
    color: #555;
}

.clr{
    width: 0;
    height: 0;
    overflow: hidden;
    clear: both;
    padding: 0;
    margin: 0;
}

.st-container{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.st-container input,a{
    width: 20%;
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    cursor: pointer;
}

.st-container input{
    opacity: 0;
    z-index: 100;
}

.st-container a{
    z-index: 10;
    font-weight: 700;
    font-size: 16px;
    background: #5f9ace;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}

#st-control-1,#st-control-1 + a{
    left: 0%;
}

#st-control-2,#st-control-2 + a{
    left: 20%;
}

#st-control-3,#st-control-3 + a{
    left: 40%;
}

#st-control-4,#st-control-4 + a{
    left: 60%;
}

#st-control-5,#st-control-5 + a{
    left: 80%;
}

.st-container input:checked + a ,
.st-container input:checked:hover + a{
    background: #1578bb;
}

.st-container input:checked + a:after{
    content: "";
    width: 0;
    height: 0;
    overflow: hidden;
    border: 20px solid transparent;
    border-bottom-color: #1578bb;
    position: absolute;
    bottom: 100%;
    left:50% ;
    margin-left: -20px;
}

.st-container input:hover + a{
    background: #1569a6;
}

/*----------------------选中切换--------------------------*/

.st-scroll{
    width: 100%;
    height: 100%;
    position: relative;
}

.st-panel{
    width: 100%;
    height: 100%;
}

.st-scroll{
    left: 0;
    top: 0;
    -webkit-transform: translate3D(0,0,0);
    -moz-transform: translate3D(0,0,0);
    -o-transform: translate3D(0,0,0);
    -ms-transform: translate3D(0,0,0);
    transform: translate3D(0,0,0);
    -webkit-backface-visibility: hidden;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.st-panel{
    background: #57ff54;
    overflow: hidden;
}

#st-control-1:checked ~ .st-scroll{
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

#st-control-2:checked ~ .st-scroll{
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

#st-control-3:checked ~ .st-scroll{
    -webkit-transform: translateY(-200%);
    -moz-transform: translateY(-200%);
    -o-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    transform: translateY(-200%);
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

#st-control-4:checked ~ .st-scroll{
    -webkit-transform: translateY(-300%);
    -moz-transform: translateY(-300%);
    -o-transform: translateY(-300%);
    -ms-transform: translateY(-300%);
    transform: translateY(-300%);
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

#st-control-5:checked ~ .st-scroll{
    -webkit-transform: translateY(-400%);
    -moz-transform: translateY(-400%);
    -o-transform: translateY(-400%);
    -ms-transform: translateY(-400%);
    transform: translateY(-400%);
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

/*---------------------------------------------主体---------------------------------------------------*/

.st-desc{
    width: 200px;
    height: 200px;
    background: #ffeb4b;
    position: relative;
    left: 50%;
    top: 0;
    margin-left: -100px;
    -webkit-transform: translateY(-50%) rotate(45deg);
    -moz-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    -o-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
}

[data-icon]:after{
    content: attr(data-icon);
    width: 200px;
    height: 200px;
    color: white;
    font-size: 90px;
    text-align: center;
    line-height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -100px;
    -webkit-transform: rotate(-45deg) translateY(25%);
    -moz-transform: rotate(-45deg) translateY(25%);
    -ms-transform: rotate(-45deg) translateY(25%);
    -o-transform: rotate(-45deg) translateY(25%);
    transform: rotate(-45deg) translateY(25%);
}

.st-panel h2{
    color: blueviolet;
    font-size: 54px;
    line-height: 50px;
    text-align: center;
    font-weight: 900;
    width: 80%;
    position: relative;
    left: 10%;
    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
    -webkit-backface-visibility: hidden;
}

#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
    -webkit-animation: moveDown 1.3s ease-in-out 0,8s backwards;
    -moz-animation: moveDown 1.3s ease-in-out 0,8s backwards;
    -ms-animation: moveDown 1.3s ease-in-out 0,8s backwards;
    -o-animation: moveDown 1.3s ease-in-out 0,8s backwards;
    animation: moveDown 1.3s ease-in-out 0,8s backwards;
}

/*定义h2动画*/
@-webkit-keyframes moveDown {
    0%{
        -webkit-transform: translateY(-40px);
        opacity: 0;
    }
    100%{
        -webkit-transform: translateY(0px);
        opacity: 1;
    }
 }

@-moz-keyframes moveDown {
    0%{
        -moz-transform: translateY(-40px);
        opacity: 0;
    }
    100%{
        -moz-transform: translateY(0px);
        opacity: 1;
    }
}

@-ms-keyframes moveDown {
    0%{
        -ms-transform: translateY(-40px);
        opacity: 0;
    }
    100%{
        -ms-transform: translateY(0px);
        opacity: 1;
    }
}

@-o-keyframes moveDown {
    0%{
        -o-transform: translateY(-40px);
        opacity: 0;
    }
    100%{
        -o-transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes moveDown {
    0%{
        transform: translateY(-40px);
        opacity: 0;
    }
    100%{
        transform: translateY(0px);
        opacity: 1;
    }
}

.st-panel p{
    position: relative;
    width: 60%;
    left: 20%;
    font-size: 20px;
    line-height: 22px;
    text-align: center;
    color: blueviolet;
}

#mainButton-1{
    width:100px;
    height:40px;
    margin-top: 5%;
    left: 32%;
    font-size:20px;
    color: #6b6b6b;
    border-radius: 10px;
    background-color: #ffd625;
    border: 1px solid white;
    position: relative;

}

#mainButton-1:hover{
    background-color: #fff419;
    color: #242424;
}

#mainButton-2{
    width:100px;
    height:40px;
    margin-top: 5%;
    left: 52%;
    font-size:20px;
    color: #6b6b6b;
    border-radius: 10px;
    background-color: #ffd625;
    border: 1px solid white;
    position: relative;
}

#mainButton-2:hover{
    background-color: #fff419;
    color: #242424;
}

#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
    -webkit-animation: moveUp 1.3s ease-in-out 0,8s backwards;
    -moz-animation: moveUp 1.3s ease-in-out 0,8s backwards;
    -ms-animation: moveUp 1.3s ease-in-out 0,8s backwards;
    -o-animation: moveUp 1.3s ease-in-out 0,8s backwards;
    animation: moveUp 1.3s ease-in-out 0,8s backwards;
}

/*定义p动画*/
@-webkit-keyframes moveUp {
    0%{
        -webkit-transform: translateY(40px);
        opacity: 0;
    }
    100%{
        -webkit-transform: translateY(0px);
        opacity: 1;
    }
}

@-moz-keyframes moveUp {
    0%{
        -moz-transform: translateY(40px);
        opacity: 0;
    }
    100%{
        -moz-transform: translateY(0px);
        opacity: 1;
    }
}

@-ms-keyframes moveUp {
    0%{
        -ms-transform: translateY(40px);
        opacity: 0;
    }
    100%{
        -ms-transform: translateY(0px);
        opacity: 1;
    }
}

@-o-keyframes moveUp {
    0%{
        -o-transform: translateY(40px);
        opacity: 0;
    }
    100%{
        -o-transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes moveUp {
    0%{
        transform: translateY(40px);
        opacity: 0;
    }
    100%{
        transform: translateY(0px);
        opacity: 1;
    }
}

.st-color{
    background: #fff635;
}

.st-color .st-desc{
    background: #59ff57;
}

 

 

效果还行吧

 

 

 

iteye_983
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css实现页面平滑切换,【CSS3】页面平滑过渡
weixin_42117116的博客
08-04 1386
微信订阅号：Rabbit_svip效果图微信订阅号：Rabbit_svipHTML代码SerendipityHappinessTranquillityPositivityPassionSerendipityBanksyadipisicingeiusmodbanhmised.Squidstumptownestoddfuturenisi,commodomlkshkpop-u...
CSS3实现整屏切换效果
根是地下的枝
07-02 6645
总是能看见很多广告或者网站都是使用整屏滚动的效果，一直看着都心痒痒，想自己也实现一个。最近刚学习到css3的动画效果，所以尝试使用css3做了一个整屏切换。页面结构实现思路与大众方法类似，如图 每个section就是一页内容，它的大小充满了屏幕（红色区域），一个container由多个section构成，我们通过改变container的位置，来达到页面切换的效果。container向下走，页面
CSS3实现平滑切换
04-23
NULL 博文链接：https://zyqwst.iteye.com/blog/2261232
纯css实现元素平滑展开与收起
咸鱼的博客
12-20 9347
HTML部分： <inputid="check"type="checkbox"style="display:none"/> <divclass="box">要收起展开的盒子</div> <divclass="up-or-down"> <labelfor="check"class="check-in"> <imgsrc="@/assets/...
使用CSS制作一个比较炫酷的页面切换动画
09-25
在本文中，我们将探讨如何使用CSS来创建炫酷的页面切换动画。页面切换动画不仅可以提升用户体验，还能为网站增添互动性和趣味性。我们将通过几个关键的技术点来详细讲解这一过程。 首先，创建一个包含所有页面元素...
纯CSS3页面切换过渡动画
05-26
在网页设计中，CSS3（层叠样式表第三版）的出现为开发者提供了更丰富的样式控制和动画效果，使得页面的交互性和用户体验大幅提升。本文将深入探讨“纯CSS3页面切换过渡动画”，介绍四种超酷的特效，并通过解剖文件...
css动画切换效果
08-15
总结，CSS3的动画和切换效果为网页带来了更生动、交互性更强的用户体验。通过`@keyframes`定义动画，`animation`应用动画，以及巧妙地使用CSS伪类，开发者可以创造出各种各样的视觉特效，提升网站的吸引力和专业性。...
html5+css3 animation制作各种页面过渡切换动画效果
12-13
在本文中，我们将深入探讨如何利用HTML5和CSS3的animation属性来制作各种页面过渡和切换动画效果。 首先，HTML5的引入极大地扩展了网页的语义化元素，如`<article>`、`<section>`、`<header>`和`<footer>`等，这些...
VUE单页面切换动画代码(全网最好的切换效果)
10-16
首先，我们看到`routerTransition`函数，它是处理路由切换动画的关键部分。这个函数会检查当前(to)和前一个(from)路由在sessionStorage中的索引，以此来判断页面的切换方向。如果`toIndex`大于或等于`fromIndex`，...
CSS实现平滑滚动
qq_46032105的博客
05-27 304
对整个页面和页面的某个属性都可以。
纯css3实现页面平滑过渡
itSeven7的博客
03-22 6187
css3实现页面平滑过渡
css做圆滑展开和收起
Benz_s600的博客
08-05 586
css做圆滑展开与收起
Vue利用CSS实现点击菜单导航栏实现平滑滚动定位
weixin_43811753的博客
06-10 1159
演示图片 点击角色管理栏，内容跳转滑动到内容管理 点击消息中心滑动到消息中心内容 在Vue中新建一个XX.vue文件 <template> <div> <div class="line"></div> <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="hand
【每日一练】65—CSS实现文本裁切gif动画效果
web前端开发
09-20 164
今天这个练习是一个文本剪辑GIF图片后得到的动画效果，最终效果如下：具体的代码实现过程，可以看后面的HTML与CSS代码，这个里面的gif图片已经采用线上地址了，因此，就没有图片素材了，大家可以直接获取。具体代码如下:HTML：<html> <head> <meta charset="UTF-8"> <title&...
css实现页面切换效果
zzgzzg00的专栏
03-04 7887
&lt;!DOCTYPE&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;style&gt; *{ padding: 0; margin: 0
模拟app页面出现消失动画效果
weixin_34018202的博客
10-17 447
做这个是因为工作需要，老板要做一个app功能的演示，为了更贴切，页面的切换效果和app一样，从右边进入，从右边划出。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; [v-cloak]{ displa
css3响应式滚动,基于html5和css3响应式全屏滚动页面切换效果
weixin_35288487的博客
08-04 706
分享一款全屏响应式的HTML5和CSS3页面切换效果。这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的。效果图如下：HTMLwrapper div的class为st-container，里面包含作为导航按钮的radio和用于页面切换的面板st-scroll。SerendipityHappinessTranquillityPositivityPassionSere...
CSS实现网页翻页滚动效果
weixin_48642777的博客
09-05 863
CSS实现网页翻页滚动效果
css页面切换动画效果
最新发布
10-09
可以通过CSS的transition属性和transform属性来实现页面切换动画效果。首先在CSS中设置元素的初始状态，然后再设置元素的终止状态，同时添加transition属性和transform属性，使元素在状态改变时产生平滑过渡效果。例如，可以通过以下代码实现一个从左侧滑入的页面切换动画效果： ``` /* 初始状态 */ .page { transform: translateX(-100%); } /* 终止状态 */ .page.active { transform: translateX(0); transition: transform 0.5s ease-out; } ``` 然后在JavaScript中监听页面跳转事件，在跳转到目标页面时，给目标页面添加.active类名，即可触发页面切换动画效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值