CSS3翻页按钮

最新推荐文章于 2021-07-06 11:55:27 发布
最新推荐文章于 2021-07-06 11:55:27 发布
阅读量2.5k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/limu693992297/article/details/51595746
版权

CSS3翻页按钮

用CSS3做出的翻页按钮样式

按钮样式图

​在CSS当中设定按钮的样式，颜色、阴影、大小、圆角、文字颜色、大小、线性渐变等属性:

.button {

display: inline-block;

position: relative;

color: #888;

text-shadow: 0 1px 0 rgba(255,255,255, 0.8);

text-decoration: none;

text-align: center;

padding: 8px 12px;

font-size: 12px;

font-weight: 700;

font-family: helvetica, arial, sans-serif;

border-radius: 4px;

border: 1px solid #bcbcbc;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12);

box-shadow: 0 1px 3px rgba(0,0,0,0.12);

background-image: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);

background-image: -moz-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);

background-image: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);

background-image: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);

background-image: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 60%,rgba(225,223,226,1) 100%);

}

然后设定上一页与下一页的按钮不同的样式

上一页：

.button.back {

border-left: none;

}

.button.back:after {

content: '';

position: absolute;

height: 50%;

width: 15px;

border-left: 1px solid #bcbcbc;

background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);

background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);

background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);

background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);

background-image: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);

left: -5px;

top: 1px;

-webkit-transform: skew(-35deg, 0);

-moz-transform: skew(-35deg, 0);

-o-transform: skew(-35deg, 0);

-ms-transform: skew(-35deg, 0);

transform: skew(-35deg, 0);

}

.button.back:before {

content: '';

position: absolute;

height: 48%;

width: 15px;

border-left: 1px solid #bcbcbc;

bottom: 1px;

left: -5px;

-webkit-transform: skew(35deg, 0);

-moz-transform: skew(35deg, 0);

-o-transform: skew(35deg, 0);

-ms-transform: skew(35deg, 0);

transform: skew(35deg, 0);

background-image: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);

background-image: -moz-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);

background-image: -o-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);

background-image: -ms-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);

background-image: linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);

-webkit-box-shadow: -2px 1px 2px rgba(100,100,100,0.1);

box-shadow: -2px 1px 2px rgba(100,100,100,0.1);

}

下一页：

.button.next {

border-right: none;

}

.button.next:after {

content: '';

position: absolute;

height: 48%;

width: 15px;

border-right: 1px solid #bcbcbc;

background-image: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);

background-image: -moz-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);

background-image: -o-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);

background-image: -ms-linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);

background-image: linear-gradient(top, rgba(240,240,240,1) 0%,rgba(239,239,239,1) 10%,rgba(225,223,226,1) 100%);

right: -5px;

bottom: 1px;

-webkit-transform: skew(-35deg, 0);

-moz-transform: skew(-35deg, 0);

-o-transform: skew(-35deg, 0);

-ms-transform: skew(-35deg, 0);

transform: skew(-35deg, 0);

-webkit-box-shadow: 2px 1px 2px rgba(100,100,100,0.1);

box-shadow: 2px 1px 2px rgba(100,100,100,0.1);

}

.button.next:before {

content: '';

position: absolute;

background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);

background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);

background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);

background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);

background-image: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 1%,rgba(240,240,240,1) 100%);

height: 50%;

width: 15px;

border-right: 1px solid #bcbcbc;

top: 1px;

right: -5px;

-webkit-transform: skew(35deg, 0);

-moz-transform: skew(35deg, 0);

-o-transform: skew(35deg, 0);

-ms-transform: skew(35deg, 0);

transform: skew(35deg, 0);

}

​


_limmmm
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单的翻页按钮插件
11-21
该简单的插件用于翻页的时候页码数字的变动，具有页码点击标识的功效，上一页，下一页，首页，尾页页码标识的功效
css实现点击滚动翻页的效果(无js)
09-25
滚动翻页这样的效果想必各位在浏览网页的时候都有见过吧，本文将使用纯css实现这个效果，不含有任何的辅助代码，感兴趣的朋友可以参考下哈，希望可以帮助到你
图片切换上一页 下一页
ylh__990925的博客
07-06 838
切换图片 点击上一页切换到上一张，点击一下页切换到下一张 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上一页 下一页</title> <style type="text/css"> /*设置图片宽高*/ img{ width: 500px; height: 300px; } </style&
html点击翻页,css实现点击滚动翻页的效果(无js)
weixin_39681621的博客
06-15 357
复制代码代码如下:dl {position:absolute;width:389px;height:154px;border:10px solid #eee;}dd {margin:0;width:389px;height:154px;overflow:hidden;}img {border:1px solid black}dt {position:absolute;right:3px;top:5...
怎么用html做成翻页按钮,一个不错的html 打印代码支持翻页
weixin_42527665的博客
05-31 764
ylbtech_html_printhtml打印代码，支持翻页复制代码代码如下:看看.Noprint{display:none;}.PageNext{page-break-after: always;}.tdp{border-bottom: 1 solid #000000;border-left: 1 solid #000000;border-right: 0 solid #ffffff;bord...
CSS3前后翻页按钮.rar_CSS3前后翻页按钮
09-21
本资源"CSS3前后翻页按钮.rar"就是一个利用CSS3技术实现的翻页按钮设计，它具有优雅的3D效果和前后翻页功能，适用于各种需要导航的场景，如电子书、幻灯片展示或者长篇文章阅读等。 首先，我们来了解一下CSS3中的...
html+css翻页动画效果
01-27
然后，利用CSS3的transform属性来实现翻页效果。翻页动画通常涉及到旋转和平移，我们可以使用`transform: rotateY()`和`transform-origin`来实现3D翻转效果。例如： ```css .page { perspective: 1000px; /* 创建...
纯CSS3杂志翻页动画特效
12-13
【CSS3杂志翻页动画特效】是一种利用现代浏览器对CSS3特性的支持，实现的具有交互性和视觉吸引力的网页设计技术。此特效旨在为用户提供一种类似真实杂志的阅读体验，通过点击导航按钮，用户可以前后翻动页面，感受...
CSS3实现答题卡翻页切换特效
06-24
在本教程中，我们将探讨如何利用CSS3实现答题卡的翻页切换特效，这是一种吸引用户注意力并提升用户体验的创新设计方法。 首先，我们需要理解CSS3中的关键帧动画（@keyframes）是实现翻页效果的基础。通过定义动画的...
HTML5/CSS3超酷焦点图特效 带前后翻页按钮
08-23
今天要分享的这款HTML5/CSS3焦点图插件切换效果比较简单，但是外观和功能却十分强大。该CSS3焦点图在切换图片时，图片以淡入淡出的方式缩小消失并显示下一张图片。焦点图插件还拥有一套非常大气的前后翻页按钮，是一款非常实用HTML5/CSS3焦点图应用。
CSS带点可左右翻页幻灯片特效
05-07
CSS带点可左右翻页幻灯片特效
HTML5 实现翻页的效果
11-07
在网页中实现翻页的效果
24种CSS翻页样式 效果漂亮
05-29
24种CSS翻页样式 效果漂亮! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
html5 css3实现的3D全屏翻页效果代码
11-24
在本项目中，CSS3的3D转换和透视效果是实现3D翻页的关键。3D转换可以改变元素的三维空间位置，如旋转、缩放和位移；而透视属性（`perspective`）则为场景添加了深度感，使3D效果更加逼真。同时，CSS3的过渡（`...
html中有序列表的css样式,使用有序列表实现CSs分页样式的美化
weixin_28327051的博客
06-03 270
CSS美化分页样式.pagination{overflow:hidden;margin:0;padding:10px 10px 6px 10px;border-top:1px solid #f60;_zoom:1;}.pagination *{display:inline;float:left;margin:0;padding:0;font-size:12px;}.pagination i{flo...
一个简单的翻页代码
深蓝忧郁的技术空间
03-19 4406
...@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>...    String currentPage=request.getParameter("currentPage");    String pages=request.getParamet
书册翻页html css代码,3种简洁漂亮的CSS分页按钮样式
weixin_29446529的博客
06-08 716
3种CSS分页按钮样式#pagination-clean li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }#pagination-clean a { border-right:solid 1px #DEDEDE; margin-right:2px; }#pa...
html翻页按钮
最新发布
05-26
HTML本身不提供翻页按钮的功能，但可以使用JavaScript或CSS来实现。下面是一个使用JavaScript实现翻页按钮的示例： HTML代码： ```html 第一页内容 第二页内容 第三页内容 上一页 下一页 ``` ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值