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

最新推荐文章于 2023-09-05 15:50:11 发布

iteye_983

最新推荐文章于 2023-09-05 15:50:11 发布

阅读量1.4k

点赞数

分类专栏： html 5，web前端开发 css 文章标签： javascript ViewUI

本文链接：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"

最低0.47元/天解锁文章

iteye_983

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
纯Css制作页面的平滑切换及页面内容动画效果

使用Css制作的炫酷的页面平滑切换(学自慕课网) 其实这种东西使用js或jquery也可以实现，代码量也不大，但是纯css制作比较新鲜嘛。就是css代码略多。。。我们也可以添加不同的字体来使页面更加好看。基本原理：主要用了css的check hover after 以及定义动画等方法 1,首先利用radio制作导航，固定在底部2,主...
复制链接

扫一扫

专栏目录