css实现一屏一屏的效果

最新推荐文章于 2024-06-03 19:14:03 发布
最新推荐文章于 2024-06-03 19:14:03 发布
阅读量251 收藏
点赞数 2
文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62708507/article/details/136155638
版权
本文介绍了如何通过CSS的`scroll-snap-type`和`scroll-snap-align`属性，结合HTML结构，实现在网页中每个div元素自适应屏幕滚动，形成一屏一屏的效果。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>实现一屏一屏</title>
</head>
<style>
    html,
    body {
        scroll-snap-type: y mandatory;//这个属性加在滚动内容的父级
        height: 100vh;
        overflow: auto;
        margin: 0;
        padding: 0;
    }

    div.item {
        scroll-snap-align: center;//这个属性加在滚动内容上
        height: 100vh;
        font-size: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<body>
    <div style="background: aqua" class="item">
        one
    </div>
    <div style="background: rebeccapurple" class="item">
        two
    </div>
    <div style="background: greenyellow" class="item">
        three
    </div>
    <div style="background: dimgrey" class="item">
        four
    </div>
</body>

</html>

coder-w
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
css3实现导航滑动效果
05-24
使用css3打造鼠标经过导航炫酷动画
自己做的css3滑动效果
06-15
利用css3做出的滑动效果，一共四页，像信封的样式，底部有四格鼠标点击反应。
网页一次滚动一屏幕效果
yangmy_Shy的博客
05-15 2555
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <title></ti...
如何使用CSS实现一个全屏滚动效果（Fullpage Scroll）？
官方推荐
08-22 7134
如何使用CSS实现一个全屏滚动效果（Fullpage Scroll）？
【CSS】scroll-snap属性详解
最新发布
正在解锁骑着骆驼去南极的世界
06-03 830
scroll-snap 是一个用于实现流畅滚动捕捉效果的 CSS 模块。它包含多个属性，可以应用于滚动容器和滚动子项上。
【Css】Css实现div卡片【横向滑动】效果（图文+完整源代码）
【敦厚的曹操】的专栏
05-16 3691
代码： <body> <div class="box"> <div class="card">卡片1</div> <div class="card">卡片2</div> <div class="card">卡片3</div> <div class="card">卡片4</div> <di...
css实现横向滑动
m0_52518047的博客
05-12 7811
移动端滑动是一个比较常见的css样式，最近也遇到了这样的效果实现，想在此写一篇博客记录一下。 横向滑动，本质就是给了一个100ml的杯子，需要你用这去装1L，2L甚至更多L的水，现实情况是多出的水会溢出来。这样的类比在开发的时候，你就能体会到，一个100px的盒子，要放置总的宽度2,300px的盒子，同理，宽度超过父元素宽度时，盒子也会溢出，那该如何做？ （1）html代码 <div class="father1"> <div class="d1"></div>
使用CSS来实现平滑的滚动效果
attengtiong的博客
07-09 2044
使用CSS来实现平滑的滚动
使用 CSS 实现无限滚动效果的方法详解与代码示例
pleaseprintf的博客
08-21 3270
无限滚动效果是一种常见的网页交互方式，可以提供更好的用户体验。本文将介绍如何使用 CSS 实现一个简单的无限滚动效果，并提供详细的代码示例。通过本文，你已经了解了如何使用 CSS 实现一个简单的无限滚动效果。这是一个在网页设计中常用的交互效果，可以使页面看起来更加生动和有趣。希望本文对你理解无限滚动效果并实现相应的代码有所帮助。如果你有任何问题或疑问，欢迎留言讨论。
CSS 滚动效果
weixin_42659817的博客
09-06 155
【代码】CSS 滚动效果。
css 左右切换滑动效果
PrimaryColor
01-27 1万+
效果图： 简单讲讲实现逻辑，先实现简单的布局，带有颜色的滑块通过伪类并定位来实现，同时设置好active的效果，也就是滑块移动到了右边花朵上面。切换效果实现后，就可以通过transition来转换变换属性的一个过渡效果。 本项目使用的jquery，预览时请自行引入jquery。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta n
利用JS、CSS实现列表自动滑动滚动
zheshiyangyang的博客
04-05 3284
这几天在做，对于大屏有很多信息需要实时滚动，废了点力气学的明明白白的，特来记录供大家学习。
CSS实现列表滚动效果
杜永康的博客
12-06 3893
应用场景：一个竖向列表（或横向列表）中有很多行，但是随着页面上下（或左右）滑动，整个列表会随之移动。以以下代码为例： 效果：
利用CSS3的transition属性实现滑动效果
09-25
主要介绍了利用CSS3的transition属性实现滑动效果,是CSS3入门学习时的基本应用,需要的朋友可以参考下
JS+CSS实现滑动切换tab菜单效果
10-23
主要介绍了JS+CSS实现滑动切换tab菜单效果,涉及javascript鼠标事件及页面元素样式的动态切换效果实现技巧,需要的朋友可以参考下
css动画效果之transition
宇智波带土
01-09 2346
css动画之transition介绍
纯CSS实现滑动效果（Slide Up & Slide Down）
热门推荐
廿四桥明月夜的博客
12-12 1万+
只需要一个DIV元素便可实现滑动效果，避免了使用JavaScript为元素的动画（IE浏览器下仅支持IE9以上） HTML代码 这里是内容 点击看看 CSS代码 .slider { overflow-y: hidden; max-height: 500px; /* 最大高度 */ backgroun
CSS3元素滑动等效果
酒肉猿
06-23 2831
css3 animation
css滑动的效果
April
01-08 6555
一直以为只有js才能实现一些滑动效果,巧合,今天偶然看到一篇文章,知道了..css滑动的效果.想想也挺简单的;css:a:hover {    padding-left: 6px; } Hover Over Me Hover Over Me Hover Over Me Hover Over Me 这种效果有点生硬.不生硬的用法是这种:ul a {    -webkit-transition: padding .4s;    -moz-transition: padding .4s;    -o-tra
用js和css实现一个全屏移动特别大的爱心
05-11
可以使用CSS3的动画和伪元素来实现一个全屏移动特别大的爱心。 以下是代码和说明： ```html <!DOCTYPE html> <html> <head> <title>Full Screen Heart</title> <style> body { margin: 0; overflow: hidden; } .heart { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; animation: move 10s linear infinite; } .heart:before, .heart:after { content: ""; position: absolute; top: 0; left: 50px; width: 50px; height: 80px; background-color: red; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } @keyframes move { from { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.5); } to { transform: translate(-50%, -50%) scale(1); } } </style> </head> <body> <div class="heart"></div> </body> </html> ``` 解释： - `body` 元素设置为全屏并隐藏滚动条 - `.heart` 元素设置为绝对定位，并使用 `transform` 属性将其水平垂直居中 - `.heart:before` 和 `.heart:after` 伪元素分别表示爱心的两个半边，使用 `border-radius` 属性实现圆角，使用 `transform` 属性实现旋转和定位 - `@keyframes` 定义动画，将爱心在 10 秒内从原大小放大到 1.5 倍大小再缩小到原大小，使用 `animation` 属性将动画应用到 `.heart` 元素上 效果如下图所示： ![Full Screen Heart](https://i.imgur.com/e3X4Hux.gif)

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值