css书本效果,如何使用纯CSS实现3D书本效果
如何使用纯CSS实现3D书本效果
发布时间:2020-07-30 10:27:15
来源:亿速云
阅读:59
作者:Leah
这期内容当中小编将会给大家带来有关如何使用纯CSS实现3D书本效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
话不多说,先来看一下效果图
源代码如下
Document
*{
margin: 0;
padding: 0;
}
body{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100vh;
background: #333333;
background-size: cover;
}
.book{
width: 400px;
height: 600px;
position: relative;
background-color: #ffffff;
transform: rotate(-37.5deg) skewX(10deg);
box-shadow: -35px 35px 50px rgb(0,0, 0, 1);
transition: 0.5s;
/* 光标呈现为指示链接的指针(一只手) */
cursor: pointer;
}
.book:hover{
/* rotate 定义 2D 旋转,在参数中规定角度。 */
/* skewX()定义沿着 X 轴的 2D 倾斜转换。
translate(x,y) 定义 2D 转换。
*/
transform: rotate(-37.5deg) skewX(10deg) translate(20px,-20px);
/* box-shadow 向框添加一个或多个阴影 */
box-shadow: -50px 50px 100px rgba(0,0,0,1);
}
/* 伪元素必须配合content进行使用,至少为空 */
.book::before{
content:'';
height:100%;
width:30px;
background: red;
position: absolute;
top: 0;
left: 0;
transform: skewY(-45deg) translate(-30px,-15px);
box-shadow: inset -10px 0 20px raba(0,0,0,0,2);
background: url(cofe.jpg);
}
.book::after{
content: '';
height: 30px;
width: 100%;
background: #fff;
position: absolute;
bottom: 0;
left: 0;
transform: skewX(-45deg) translate(15px,30px);
background: url(cofe.jpg);
}
.book h3{
position: absolute;
bottom: 100px;
left: 10px;
font-size: 5em;
line-height: 1em;
color: rgb(110, 21, 21);
}
.book h3 span{
background-image: url(cofe.jpg);
background-attachment: fixed;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.book .write i{
font-weight: 700;
}
.book .cover{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70%;
background-image: url(cofe.jpg);
background-size: cover;
}
Book javascript
written by fans
ok,效果还是相对可以得哦,如果喜欢得话,请点个赞吧!!!
上述就是小编为大家分享的如何使用纯CSS实现3D书本效果了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。
css书本效果,如何使用纯CSS实现3D书本效果相关推荐
- html如何自定义一个动画效果,30个纯css动画代码片段和效果演示
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...
- css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码,本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码 本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
- css实现人走路效果,如何使用纯CSS实现一个人独自行走的动画效果(附源码)
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个人独自行走的动画效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github ...
- html怎么实现蓝色垂直的直线,css实例教程 一款纯css实现的垂直时间线效果
今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: 复制代码代码如下 ...
- css中间镂空,怎么用纯CSS实现镂空效果
怎么用纯CSS实现镂空效果 发布时间:2021-03-19 09:49:16 来源:亿速云 阅读:99 作者:小新 小编给大家分享一下怎么用纯CSS实现镂空效果,希望大家阅读完这篇文章之后都有所收获, ...
- HTML中 css红绿黄灯,纯CSS实现红绿灯效果(面试常见)
先看题,别看答案试下吧 ~_~ 1.下面的代码输出的内容是什么? function O(name){ this.name=name||'world'; } O.prototype.hello=func ...
- html用css写彩虹,如何使用纯CSS实现彩虹条纹文字的效果(附代码)
本篇文章给大家带来的内容是关于如何使用纯CSS实现彩虹条纹文字的效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.co ...
- css如何使文字抖动,纯CSS文字彩色抖动抖音效果
效果 纯CSS文字彩色抖动抖音效果 简介 直接将这下面段放进你的 style.css doudong{ animation: uk-text-shadow-glitch .65s cubic-bezi ...
- css让图片显示圆角 纯CSS绘制漂亮的圆形图案效果
css让图片显示圆角 样式: border-radius:5px 15px 20px 25px;顺序依次是上右下左 纯CSS绘制漂亮的圆形图案效果 .circle { border-radius: 5 ...
最新文章
- mysql中数据表如何关联_mysql 如何导入/导出2个关联表中的数据
- Zuul之Filter详解
- httpservlet获取请求端IP地址
- 【珍藏】 2012.NET开发必看资料53个+经典源码77个—下载目录
- 配色没有灵感?最流行的配色案例!没有一个人不爱的
- Qt获取本地ip地址
- linux网络串口工具下载,串口调试工具手机版下载
- python判断邮箱格式是否正确_如何判断用户输入的邮箱格式是否正确?
- 【Pytorch】测试单张图片(调用transforms)
- HTB打靶(Active Directory 101 Forest)
- python bunch制作可导入数据_python – ImportError:无法导入名称Bunch scikit-learn 0.19
- for循环如果先--_JavaSE第04篇:Java基础语法之循环结构
- 今天不谈技术,分享一个引起业内轩然大波的月饼事件。
- 微分几何与广义相对论教程
- 婴幼儿体重在线计算机,【婴儿体重计算器标准_婴儿体重计算器标准专题】- 天鹅到家...
- 基于 Node.js + Koa 构建完整的 Web API (配置 ESLint 和使用 Airbnb 编码规范)
- 基于ZigBee的桥梁健康监测系统
- 超详细 Servlet工作原理解析
- 自编程实现决策树(使用ID3算法)
- pink老师JavaScript视频教程笔记
热门文章
- 中国电信网优测试软件,退CDMA时机已成熟,网友亲身测试验证中国电信网优真实原因!...
- 上海微创软件公司简介
- 建立Hexo博客-1
- 土地出让金骤降是“危”还是“机”?
- 令人震惊的大坑——python多进程多日志运用logging模块时磁盘内存不足
- linux imx6 内核编译,iMX6UL---zlg M6G2C开发板内核编译记录
- SQL sever数据库触发器设计
- Django框架学习之网上商城项目一(后端设计)
- 第三节:照相机与摄像机
- 中国民族博览杂志社《中国民族博览》编辑部2023年第2期目录