［HTML/CSS］布局学习笔记－CSS网页平滑移动

来源：互联网发布：nba球员生涯数据编辑：程序博客网时间：2024/04/29 22:48

跟着imooc 学习

不用任何 JavaScript 脚本，使用纯 CSS 实现页面之间的平滑过渡，体验 transform、transition、animation 带来的神奇体验。
1、如何分析动画效果 2、如何使用transform变换实现平移、旋转 3、如何使用transition实现过渡动画 4、如何使用animaition和keyframes定义动画

设计的总体样式，用CSS实现类似Fullpage.js的平滑翻页过渡展示效果；

大体思路

网页布分为两部分：类似的 nav 区与 .st-scroll>section 翻页页面

设计其中

step1.类似的nav区：其中使用input type：radio 与 a 标签进行布局，将一个input与a 标签组合,现实设置z-index，并将input标签通过设置透明度的方式设置隐藏，利用 input的check属性与 css样式选择的＋来对选中的check的标签的相邻a 标签进行样式修改，也就是input的选中与否的样式体现在 a 标签的样式上；

step2.翻动页面区：与上述 a 与 input 组合类似，利用 css 样式选择的～将#st-container-id （即 input的id ）与.st-scroll组合，设置的 transition 动画，点击不同动画，.st-scroll 就设置不同的位置移动(transform:translateY())

step3.翻页中文字动画：与上述类似利用 css 样式选择的～将#st-container-id （即 input的id ）与.st-scroll ＃st-pannel-id 组合，设置animation 动画，设置关键帧

step4.@media screen and (max-width:XXpx) {} 做自适应处理

小细节：

1.文字变化中，可设置透明度变化；

2.一个父元素为 .st-scroll section{position: relative;width: 100%;height:100%;overflow: hidden;}，其中已知宽的子元素左右居中设置position:absolute;left:50%;margin-left:－宽度／2；不知宽的子元素文字 position:absolute;width:W ％；left:(50-W/2)％

3.动画设置时 animation: moveUp 0.6s ease-in 0.2sbackwards; －在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。还有 forwards 停留在最后一帧

4.注意元素级别

5.translate3D（）可开启硬件加速

展示部分动画变化过程中效果

HTML代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 谷歌做了个外挂：Google Chrome Frame(谷歌内嵌浏览器框架GCF)。这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片平滑移动</title><link rel="stylesheet" href="css/normalize.css" type="text/css"><link rel="stylesheet" href="css/main.css" type="text/css"></head><body><div class="container"><div class="st-container"><input type="radio" id="st-container-1" name="st-container" checked="checked"><a href="#st-pannel-1">item1</a></input><input type="radio" id="st-container-2" name="st-container"><a href="#st-pannel-2">item2</a></input><input type="radio" id="st-container-3" name="st-container"><a href="#st-pannel-3">item3</a></input><input type="radio" id="st-container-4" name="st-container"><a href="#st-pannel-4">item4</a></input><input type="radio" id="st-container-5" name="st-container"><a href="#st-pannel-5">item5</a></input><div class="st-scroll"><section id="st-pannel-1"><div class="st-desc"></div><h2>标题1</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo iusto quis, autem cum commodi voluptatum molestiae libero sint. Iusto tenetur totam cupiditate fuga voluptate cum deleniti suscipit dolore similique rem!</p></section><section id="st-pannel-2"><div class="st-desc"></div><h2>标题2</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias inventore possimus laudantium repellat ipsam iusto ipsum ullam vel sapiente architecto temporibus distinctio praesentium in, nobis corrupti esse eligendi quos. Inventore.</p></section><section id="st-pannel-3"><div class="st-desc"></div><h2>标题3</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis consequuntur obcaecati velit fugit quo quasi dicta nemo, dolore, optio nulla minus nobis, corrupti rerum magni rem architecto cum. Molestiae, voluptatum.</p></section><section id="st-pannel-4"><div class="st-desc"></div><h2>标题4</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa eos nemo consectetur earum quidem itaque iure pariatur sint ea molestias fugiat, voluptatum at minima, necessitatibus totam? Tenetur, aliquam, quam!</p></section><section id="st-pannel-5"><div class="st-desc"></div><h2>标题5</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore perferendis ex, molestiae quasi impedit quidem aut beatae debitis optio doloremque ea vel voluptate distinctio quis, blanditiis saepe, autem nobis voluptatem.</p></section></div></div><!-- st-container结束 --></div></body></html>

main.css代码

*{margin:0px;padding:0px;}body{overflow: hidden;}.st-container{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}.st-container>input,.st-container>a{height: 34px;width: 20%;position: absolute;bottom: 0px;line-height: 34px;}.st-container input{z-index:1000;opacity: 0;cursor: pointer;}.st-container>a{z-index:100;font-size: #eee;background-color: #e23a6e;font-size: 16px;color:#fff;text-align: center;text-decoration:none;}/*w位置分散*/#st-container-1,#st-container-1 + a{left:0%;}#st-container-2,#st-container-2 + a{left:20%;}#st-container-3,#st-container-3 + a{left:40%;}#st-container-4,#st-container-4 + a{left:60%;}#st-container-5,#st-container-5 + a{left:80%;}/*选中样式修改*/.st-container input:checked+a,.st-container input:checked:hover+a{background-color: #821134;}.st-container input:checked+a:after{content: "";height: 0px;width: 0px;overflow: hidden;border: 20px solid transparent;border-bottom-color: #821134;position: absolute;bottom: 100%;left:50%;margin-left:-20px;}.st-container input:hover+a{background-color: #ad2442;}.st-scroll{width: 100%;height: 100%;position:relative;left:0px;top:0px;/*开启手机赢家加速*/-webkit-transform: translate3D(0,0,0);-ms-transform: translate3D(0,0,0);-o-transform: translate3D(0,0,0);transform: translate3D(0,0,0);-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;/*添加动画 不要忘记加单位s*/-webkit-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}.st-scroll section{position: relative;width: 100%;height:100%;overflow: hidden;}.st-scroll section:nth-child(odd){background-color: #fa96b5;}#st-container-1:checked ~ .st-scroll{-webkit-transform: translateY(0%);-ms-transform: translateY(0%);-o-transform: translateY(0%);transform: translateY(0%);}#st-container-2:checked ~ .st-scroll{-webkit-transform: translateY(-100%);-ms-transform: translateY(-100%);-o-transform: translateY(-100%);transform: translateY(-100%);}#st-container-3:checked ~ .st-scroll{-webkit-transform: translateY(-200%);-ms-transform: translateY(-200%);-o-transform: translateY(-200%);transform: translateY(-200%);}#st-container-4:checked ~ .st-scroll{-webkit-transform: translateY(-300%);-ms-transform: translateY(-300%);-o-transform: translateY(-300%);transform: translateY(-300%);}#st-container-5:checked ~ .st-scroll{-webkit-transform: translateY(-400%);-ms-transform: translateY(-400%);-o-transform: translateY(-400%);transform: translateY(-400%);}/*翻页三角形*/.st-desc{height: 200px;width: 200px;background-color:#fa96b5;position: absolute;left:50%;margin-left: -100px;-webkit-transform: translateY(-50%) rotate(45deg);-ms-transform: translateY(-50%) rotate(45deg);-o-transform: translateY(-50%) rotate(45deg);transform: translateY(-50%) rotate(45deg);}.st-scroll section:nth-child(odd) .st-desc{background-color: #fff;}/*标题样式*/.st-scroll h2{position: absolute;width:20%;color: #e23a6e;font-weight: 900;text-align: center;top: 50%;font-size: 54px;line-height: 50px;left:40%;margin-top: -70px;text-shadow:1px 1px 1px rgba(1,24,64,0.1);-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;}.st-scroll section:nth-child(odd) h2{color: #fff;}/*段落样式*/.st-scroll p{position: absolute;left:25%;top:50%;font-size: 16px;line-height: 22px;color:#8b8b8b;width:50%;margin-top: 10px;text-align: center;padding: 0;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;}.st-scroll section:nth-child(odd) p{color: rgba(255,255,255,0.8);}/*动画设计部分*/#st-container-1:checked ~ .st-scroll #st-pannel-1 h2,#st-container-2:checked ~ .st-scroll #st-pannel-2 h2,#st-container-3:checked ~ .st-scroll #st-pannel-3 h2,#st-container-4:checked ~ .st-scroll #st-pannel-4 h2,#st-container-5:checked ~ .st-scroll #st-pannel-5 h2{-webkit-animation: moveUp 0.6s ease-in 0.2s backwards;-moz-animation: moveUp 0.6s ease-in 0.2s backwards;-ms-animation: moveUp 0.6s ease-in 0.2s backwards;-o-animation: moveUp 0.6s ease-in 0.2s backwards;animation: moveUp 0.6s ease-in 0.2s backwards;}#st-container-1:checked ~ .st-scroll #st-pannel-1 p,#st-container-2:checked ~ .st-scroll #st-pannel-2 p,#st-container-3:checked ~ .st-scroll #st-pannel-3 p,#st-container-4:checked ~ .st-scroll #st-pannel-4 p,#st-container-5:checked ~ .st-scroll #st-pannel-5 p{-webkit-animation: moveDown 0.6s ease-in 0.2s backwards;-moz-animation: moveDown 0.6s ease-in 0.2s backwards;-ms-animation: moveDown 0.6s ease-in 0.2s backwards;-o-animation: moveDown 0.6s ease-in 0.2s backwards;animation: moveDown 0.6s ease-in 0.2s backwards;}/*moveUp关键帧设计*/@keyframes moveUp{from {transform:translateY(-40px);opacity: 0;}to {transform:translateY(0px);opacity: 1;}}@-moz-keyframes moveUp /* Firefox */{from {-moz-transform:translateY(-40px);opacity: 0;}to {-moz-transform:translateY(0px);opacity: 1;}}@-webkit-keyframes moveUp /* Safari 和 Chrome */{from {-webkit-transform:translateY(-40px);opacity: 0;}to {-webkit-transform:translateY(0px);opacity: 1;}}@-o-keyframes moveUp /* Opera */{from {-o-transform:translateY(-40px);opacity: 0;}to {-o-transform:translateY(0px);opacity: 1;}}@keyframes moveDown{from {transform:translateY(40px);opacity: 0;}to {transform:translateY(0px);opacity: 1;}}@-moz-keyframes moveDown /* Firefox */{from {-moz-transform:translateY(40px);opacity: 0;}to {-moz-transform:translateY(0px);opacity: 1;}}@-webkit-keyframes moveDown /* Safari 和 Chrome */{from {-webkit-transform:translateY(40px);opacity: 0;}to {-webkit-transform:translateY(0px);opacity: 1;}}@-o-keyframes moveDown /* Opera */{from {-o-transform:translateY(40px);opacity: 0;}to {-o-transform:translateY(0px);opacity: 1;}}@media screen and (max-width: 520px){.st-container > a{font-size: 12px;}.st-scroll h2{font-size: 30px;margin-top:-100px;}.st-scroll p{width: 90%;left:5%;margin-top: 0px;}.st-scroll .st-desc{height: 100px;width: 100px;margin-left: -50px;}}

code：https://github.com/lulufeng/PageSmooth

0 0