CSS-上下滑动翻页效果

效果展示

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- <link rel="stylesheet" href="/style.css" /> --><title>Document</title></head><body><div class="hero"><h1>人物介绍</h1><div class="review-box"><div id="slide"><div class="card"><div class="profile"><img src="/image/pic1.jpg" /><div><h3>Phoenix</h3><p>Web Designer</p></div></div><p>The designer sat at their desk, surrounded by sketches and colorswatches. They carefully crafted each line and curve, choosingjust the right hue to bring their vision to life. With a steadyhand and a sharp eye, they transformed blank pages into beautifulworks of art.</p></div><div class="card"><div class="profile"><img src="data:image/pic2.jpg" /><div><h3>Steve McCurry</h3><p>UI/UX Designer</p></div></div><h3>The designer sat at their desk, surrounded by sketches and colorswatches. They carefully crafted each line and curve, choosingjust the right hue to bring their vision to life. With a steadyhand and a sharp eye, they transformed blank pages into beautifulworks of art.</h3></div><div class="card"><div class="profile"><img src="data:image/pic3.jpg" /><div><h3>Merlin Nauven</h3><p>Web Designer</p></div></div><p>The designer sat at their desk, surrounded by sketches and colorswatches. They carefully crafted each line and curve, choosingjust the right hue to bring their vision to life. With a steadyhand and a sharp eye, they transformed blank pages into beautifulworks of art.</p></div><div class="card"><div class="profile"><img src="data:image/pic4.jpg" /><div><h3>John Williams</h3><p>Web Designer</p></div></div><p>The designer sat at their desk, surrounded by sketches and colorswatches. They carefully crafted each line and curve, choosingjust the right hue to bring their vision to life. With a steadyhand and a sharp eye, they transformed blank pages into beautifulworks of art.</p></div></div><div class="sidebar"><!-- <img src="/image/up-arrow.png" id="upArrow" /> --><div id="upArrow">↑</div><div id="downArrow">↓</div></div><!-- <img src="/image/down-arrow.png" id="downArrow" /> --></div></div></div><script>var slide = document.getElementById('slide')var upArrow = document.getElementById('upArrow')var downArrow = document.getElementById('downArrow')let x = 0upArrow.onclick = function () {if (x < 0) {x = x + 300slide.style.top = x + 'px'}}downArrow.onclick = function () {if (x > -900) {x = x - 300slide.style.top = x + 'px'}}</script></body>
</html>
<style>* {padding: 0;margin: 0;font-family: sans-serif;}.hero {width: 100%;height: 100vh;background: #f6fbff;display: flex;flex-direction: column;align-items: center;justify-content: center;}h1 {font-size: 30px;position: relative;margin-bottom: 60px;}h1::after {content: '';width: 150px;height: 3px;background: linear-gradient(to right, #0780ed, #9f4db5);position: absolute;bottom: -20px;left: 50%;transform: translateX(-50%);}.review-box {width: 90%;max-width: 700px;height: 300px;border-radius: 10px;box-shadow: -10px 10px 40px rgba(0, 0, 0, 0.25);position: relative;overflow: hidden;}#upArrow {width: 30px;height: 30px;border-radius: 50%;background-color: #fff;text-align: center;line-height: 30px;cursor: pointer;}#downArrow {width: 30px;height: 30px;border-radius: 50%;background-color: #fff;text-align: center;line-height: 30px;cursor: pointer;}.card {height: 300px;padding: 40px;color: #111;line-height: 22px;box-sizing: border-box;background: #fff;position: relative;}.profile {display: flex;align-items: center;margin-bottom: 40px;}.profile img {width: 70px;border-radius: 50%;margin-right: 20px;}.profile h3 {font-size: 26px;color: #0780ed;margin-bottom: 8px;}#slide {width: 100%;padding-right: 60px;box-sizing: border-box;position: absolute;top: 0;left: 0;transition: 0.5s;}.sidebar {width: 60px;height: 100%;padding: 15px 0;box-sizing: border-box;background: #0780ed;position: absolute;right: 0;top: 0;display: flex;flex-direction: column;justify-content: space-between;align-items: center;}.sidebar img {width: 25px;padding: 5px;background: #fff;border-radius: 50%;cursor: pointer;}
</style>

Tips：觉得有用的话点个关注呦，会分享更多“有用”的前端tips

CSS-上下滑动翻页效果相关推荐

微信小程序实现滑动翻页效果源码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 微信小程序实现滑动翻页效果效果图: 源码: <view class="mainFra ...
php左右滑动翻页代码,C#_NGUI实现滑动翻页效果实例代码，废话不多说了，直接给大家上 - phpStudy...
NGUI实现滑动翻页效果实例代码废话不多说了,直接给大家上干货了. 具体代码如下所示: using UnityEngine; using System.Collections; public cla ...
ViewPager实现滑动翻页效果
实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import andr ...
android控件翻书效果,android ViewPager实现滑动翻页效果实例代码
实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下:import android.content.Context;import androi ...
android 翻书动画效果怎么做,android ViewPager实现滑动翻页效果实例代码
实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import andr ...
vue实现上下滑动翻页_基于vue实现上下滑动翻页效果
18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...
滑动翻页效果实现和移动端click事件问题
前述本文很短~ 主要是为了总结和讲述移动端click和js事件机制导致的一个问题. (:咳咳,其实几句话就能写完的还要水一篇文章,不愧是我- 正文最近做了一个小活动,里面要用到一个效果:滑动翻页. ...
简单零基础学会H5移动端滑动翻页效果
这篇文章教大家如何使用原生js和少量css3动画来实现HTML5的翻页效果,我会尽量讲得细一点,让零基础的同学也能学会这个简单的案例. 先来看下html的布局代码: index.html 一个div包 ...
滑动翻页效果_Flutter实现3D效果，一个字，炫！
老孟的博客地址: http://laomengit.com/ Flutter 中3D效果是通过Transform组件实现的,没有变换效果的实现: class TransformDemo extends ...
h5滚动时侧滑出现_HTML5移动端触摸事件以及滑动翻页效果
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

CSS-上下滑动翻页效果

CSS-上下滑动翻页效果相关推荐

最新文章

热门文章