From f5c88d3fb79467ea153751fb0d67c14d31a762f1 Mon Sep 17 00:00:00 2001 From: gitee-bot Date: Mon, 30 Jun 2025 15:27:02 +0000 Subject: [PATCH] Update README.md --- README.md | 558 +++++------------------------------------------------- 1 file changed, 43 insertions(+), 515 deletions(-) diff --git a/README.md b/README.md index 68c744d..44d3a1c 100644 --- a/README.md +++ b/README.md @@ -1,520 +1,48 @@ -# CSS3实现的页面平滑效果 - 效果如下： -![](gif.gif) - css代码 -```angularjs -@font-face { - font-family: "Raphaelicons"; - src:url("../fonts/raphaelicons-webfont.eot") format('eot'), - url("../fonts/raphaelicons-webfont.woff") format("woff"), - url("../fonts/raphaelicons-webfont.svg") format("svg"), - url("../fonts/raphaelicons-webfont.ttf") format("truetype"); - font-weight: normal; - font-style: normal; -} -body{ - font-family: Georgia,Serif; - background: #ddd; - font-weight: 400; - font-size: 15px; - color:#333; - overflow: hidden; - -webkit-font-smoothing: antialiased; - font-smoothing: antialiased; - /*CSS抗锯齿 font-smoothing 属性介绍*/ - /*CSS3里面加入了一个“-webkit-font-smoothing”属性。*/ - /*这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。*/ - /*加上之后就顿时感觉页面小清晰了。 淘宝也在用哦！*/ - /*它有三个属性：*/ - /*none ------ 对低像素的文本比较好*/ - /*subpixel-antialiased ------默认值*/ - /*antialiased ------抗锯齿很好*/ +# CSS3 实现的页面平滑效果 -} -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; - font-family: "Josefin Slab","Myrid Pro",Arial,sans-serif; -} -.st-container>input, -.st-container>a{ - width: 20%; - height: 34px; - line-height: 34px; - position: fixed; - bottom: 0; - cursor: pointer; -} -.st-container>input{ - opacity: 0; - z-index: 1000; -} -.st-container>a{ - z-index: 10; - font-weight: 700; - font-size: 16px; - background: #e23a6e; - text-align: center; - color:#fff; - 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: #821e34; -} -.st-container input:checked+a:after{ - content: ""; - width: 0; - height: 0; - 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: #ad244f; -} -/*内容*/ -.st-scroll, -.st-panel{ - width: 100%; - height: 100%; - position:relative; -} -.st-scroll{ - left: 0; - top: 0; - -webkit-transform: translate3d(0,0,0); - -moz-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; - -webkit-transition: all 0.6s ease-in-out; - -moz-transition: all 0.6s ease-in-out; - -ms-transition: all 0.6s ease-in-out; - -o-transition: all 0.6s ease-in-out; - transition: all 0.6s ease-in-out; -} -.st-panel{ - background: #fff; - overflow: hidden; -} -#st-control-1:checked~.st-scroll{ - -webkit-transform: translateY(0%); - -moz-transform: translateY(0%); - -ms-transform: translateY(0%); - -o-transform: translateY(0%); - transform: translateY(0%); -} -#st-control-2:checked~.st-scroll{ - -webkit-transform: translateY(-100%); - -moz-transform: translateY(-100%); - -ms-transform: translateY(-100%); - -o-transform: translateY(-100%); - transform: translateY(-100%); -} -#st-control-3:checked~.st-scroll{ - -webkit-transform: translateY(-200%); - -moz-transform: translateY(-200%); - -ms-transform: translateY(-200%); - -o-transform: translateY(-200%); - transform: translateY(-200%); -} -#st-control-4:checked~.st-scroll{ - -webkit-transform: translateY(-300%); - -moz-transform: translateY(-300%); - -ms-transform: translateY(-300%); - -o-transform: translateY(-300%); - transform: translateY(-300%); -} -#st-control-5:checked~.st-scroll{ - -webkit-transform: translateY(-400%); - -moz-transform: translateY(-400%); - -ms-transform: translateY(-400%); - -o-transform: translateY(-400%); - transform: translateY(-400%); -} -.st-desc{ - width: 200px; - height: 200px; - background: #fa96b5; - position: absolute; - top: 0; - left:50%; - 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; - /*background: #0f0;*/ - color:#fff; - 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%); - font-family: "Raphaelicons"; - text-shadow:1px 1px 1px rgba(151,24,64,0.2); -} -.st-panel h2{ - color:#e23a6e; - font-size: 54px; - line-height: 54px; - text-align: center; - font-weight: 900; - width: 80%; - position: absolute; - left: 10%; - top: 50%; - margin-top:-70px; - text-shadow:1px 1px 1px rgba(151,24,64,0.2); - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - -ms-backface-visibility: hidden; - 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 0.6s ease-in-out 0.2s backwards; - -o-animation: moveDown 0.6s ease-in-out 0.2s backwards; - animation: moveDown 0.6s ease-in-out 0.2s backwards; -} -@keyframes moveDown { - 0%{ - transform: translateY(-40px); - opacity: 0; - } - 100%{ - 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; - } -} -@-webkit-keyframes moveDown { - 0%{ - -webkit-transform: translateY(-40px); - opacity: 0; - } - 100%{ - -webkit-transform: translateY(0px); - opacity: 1; - } -} -.st-panel p{ - position: absolute; - width: 50%; - left: 25%; - top: 50%; - font-size: 16px; - line-height: 22px; - padding: 0; - text-align: center; - color:#8b8b8b; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - -ms-backface-visibility: hidden; - backface-visibility: hidden; - margin-top: 10px; -} -#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 0.6s ease-in-out backwards; - -o-animation: moveUp 0.6s ease-in-out backwards; - animation: moveUp 0.6s ease-in-out backwards; -} -@keyframes moveUp { - 0%{ - transform: translateY(40px); - opacity: 0; - } - 100%{ - transform: translateY(0px); - opacity: 1; - } -} -@-webkit-keyframes moveUp { - 0%{ - -webkit-transform: translateY(40px); - opacity: 0; - } - 100%{ - -webkit-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; - } -} -@-moz-keyframes moveUp { - 0%{ - -moz-transform: translateY(40px); - opacity: 0; - } - 100%{ - -moz-transform: translateY(0px); - opacity: 1; - } -} -.st-color{ - background: #fa96b5; -} -.st-color .st-desc{ - background:#fff; -} -.st-color [data-icon]:after{ - color:#fa96b5; -} -.st-color h2{ - color:#fff; - text-shadow:1px 1px 1px rgba(151,24,64,0.2); -} -.st-color p{ - color:rgba(255,255,255,0.8); -} -@media screen and (max-width: 520px){ - .st-panel h2{ - font-size: 42px; - } - .st-panel p{ - width: 90%; - left: 10%; - margin-top: 0; - } - .st-container > a{ - font-size: 13px; - } -} -@media screen and (max-width: 360px){ - .st-panel h2{ - font-size: 42px; - } - .st-panel p{ - width: 90%; - left: 10%; - margin-top: 0; - } - .st-container > a{ - font-size: 13px; - } - .st-desc{ - width: 120px; - height: 120px; - margin-left: -60px; - } - [data-icon]:after{ - font-size: 60px; - -webkit-transform: rotate(-45deg) translateY(15%); - -moz-transform: rotate(-45deg) translateY(15%); - -ms-transform: rotate(-45deg) translateY(15%); - -o-transform: rotate(-45deg) translateY(15%); - transform: rotate(-45deg) translateY(15%); - } -} -``` +这是一个使用 CSS3 实现页面平滑滚动和动画效果的示例项目。通过纯 CSS 技术，可以实现页面中多个区块之间的平滑过渡效果，适用于滚动导航或单页应用的视觉优化。 - html代码 -```angularjs - - - - - CSS3实现的页面平滑效果 - - - - - - - -
-
- - - 页面1 - - 页面2 - - 页面3 - - 页面4 - - 页面5 - -
-
-
-

标题一

-

- Lorem ipsum dolor sit amet, - consectetur adipisicing elit. - Asperiores dignissimos error maxime - nemo nisi numquam quis ratione recusandae - suscipit? Accusantium aliquid illo ipsa ipsum - molestias ratione recusandae saepe sint - voluptatum. -

-
-
-
-

标题二

-

- Lorem ipsum dolor sit amet, - consectetur adipisicing elit. - Asperiores dignissimos error maxime - nemo nisi numquam quis ratione recusandae - suscipit? Accusantium aliquid illo ipsa ipsum - molestias ratione recusandae saepe sint - voluptatum. -

-
-
-
-

标题三

-

- Lorem ipsum dolor sit amet, - consectetur adipisicing elit. - Asperiores dignissimos error maxime - nemo nisi numquam quis ratione recusandae - suscipit? Accusantium aliquid illo ipsa ipsum - molestias ratione recusandae saepe sint - voluptatum. -

-
-
-
-

标题四

-

- Lorem ipsum dolor sit amet, - consectetur adipisicing elit. - Asperiores dignissimos error maxime - nemo nisi numquam quis ratione recusandae - suscipit? Accusantium aliquid illo ipsa ipsum - molestias ratione recusandae saepe sint - voluptatum. -

-
-
-
-

标题五

-

- Lorem ipsum dolor sit amet, - consectetur adipisicing elit. - Asperiores dignissimos error maxime - nemo nisi numquam quis ratione recusandae - suscipit? Accusantium aliquid illo ipsa ipsum - molestias ratione recusandae saepe sint - voluptatum. -

-
-
-
-
- - -``` +## 特点 +- 纯 CSS3 实现，无需 JavaScript +- 使用 checkbox 控件控制页面滚动状态 +- 支持动画过渡效果，提升用户体验 + +## 文件结构 + +- `index.html`：主页面结构 +- `css/normalize.css`：样式重置文件，确保不同浏览器下的一致性 +- `css/style.css`：核心动画与滚动效果样式文件 +- `fonts/`：字体图标资源目录 +- `gif.gif`：动画效果演示 + +## 使用方式 + +1. 打开 `index.html` 文件，查看页面结构。 +2. 通过点击导航按钮，切换不同的 `#st-control-x` checkbox 状态，从而控制对应区块的滚动与动画效果。 +3. 所有动画和滚动效果通过 `style.css` 中的 `:checked` 伪类和过渡样式实现。 + +## 核心实现 + +- 使用 `` 或 `>` 控制页面状态。 +- 利用 CSS 的 `~` 选择器实现标签与内容区块之间的联动。 +- 通过 `transition` 和 `transform` 实现平滑滚动和动画效果。 + +## 注意事项 + +- 该项目仅使用 HTML 和 CSS，适合学习 CSS3 动画与布局技巧。 +- 不需要后端支持，直接在浏览器中打开即可运行。 + +## 许可证 + +该项目遵循 MIT 许可证。有关详细信息，请参阅 `fonts/license.txt` 文件。 + +## 贡献指南 + +如果你有兴趣为该项目做出贡献，请提交一个 Pull Request，或者提出你的改进建议。我们欢迎任何形式的贡献！ + +## 示例截图 + +![示例动画](gif.gif) \ No newline at end of file -- Gitee