时间：2023-10-06 08:18:01 | 来源：网站运营
时间：2023-10-06 08:18:01 来源：网站运营
html+css技能，制作书本翻页效果：
在线咨询
<div class="shu"> <div class="feng"></div> <div class="wen"> <h3 style="padding-top: 50px;padding-left: 40px;">Life of Pi</h3> <p style=" padding-top: 20px; padding-left: 40px;padding-right: 15px;"> He lives in Scarborough. He's a small, slim man – nomore than five foot five. Dark hair, dark eyes. Hair greyingat the temples. Can't be older than forty. leasingcoffee-coloured complexion1. Mild fall weather, yet puts on abig winter parka with fur-lined hood2 for the walk to thediner. </p> </div> </div>.shu{ position: relative; width: 300px; height: 400px; background-color: rgba(255, 255, 255, 0.774); transform-style: preserve-3d; box-shadow: 300px 0px 30px rgb(0, 0, 0,.6) inset; transition: 1s cubic-bezier(.79,.34,.47,.92); } .shu::after{ content: ''; position: absolute; height: 3px; width: 303px; left: 0px; bottom: -3px; /* background-color: rgb(100, 96, 96); */ background-image: linear-gradient(to right,rgb(71, 68, 68),rgba(124, 120, 120, 0.3) ); border-bottom-left-radius: 5px; } .shu::before{ content: ''; position: absolute; width: 3px; height: 100%; right: -3px; top: 0px; background-color: rgb(112, 108, 108); background-image: linear-gradient(to top,rgb(114, 111, 111),rgba(90, 87, 87, 0.5) );; border-top-right-radius: 3px; }transition: 1s cubic-bezier(.79,.34,.47,.92); 变化时间为1s，运动曲线为 cubic-bezier(.79,.34,.47,.92)，这个可以去一个网站自定义生成：点我。.shu:hover{ box-shadow: 30px 0px 30px rgb(0, 0, 0,.6) inset; transform: rotate(-5deg); }transform: rotate(-5deg);旋转；.feng{ position: absolute; width: 100%; height: 100%; z-index: 2; background-image: url(4.jpg); background-size: 100% ; transform-origin: left; transition: 1s cubic-bezier(.79,.34,.47,.92); border-top-left-radius: 2px; border-bottom-left-radius: 2px; }transform-origin: left; 封面旋转的位置，旋转点.shu:hover .feng{ transform: rotateY(-140deg); }.wen{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-family: 'fangsong'; text-align: left; }<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; background-image: radial-gradient(white,black); display: flex; justify-content: center; align-items: center; } .shu{ position: relative; width: 300px; height: 400px; background-color: rgba(255, 255, 255, 0.774); transform-style: preserve-3d; box-shadow: 300px 0px 30px rgb(0, 0, 0,.6) inset; transition: 1s cubic-bezier(.79,.34,.47,.92); } .shu::after{ content: ''; position: absolute; height: 3px; width: 303px; left: 0px; bottom: -3px; /* background-color: rgb(100, 96, 96); */ background-image: linear-gradient(to right,rgb(71, 68, 68),rgba(124, 120, 120, 0.3) ); border-bottom-left-radius: 5px; } .shu::before{ content: ''; position: absolute; width: 3px; height: 100%; right: -3px; top: 0px; background-color: rgb(112, 108, 108); background-image: linear-gradient(to top,rgb(114, 111, 111),rgba(90, 87, 87, 0.5) );; border-top-right-radius: 3px; } .shu:hover{ box-shadow: 30px 0px 30px rgb(0, 0, 0,.6) inset; transform: rotate(-5deg); } .feng{ position: absolute; width: 100%; height: 100%; z-index: 2; background-image: url(4.jpg); background-size: 100% ; transform-origin: left; transition: 1s cubic-bezier(.79,.34,.47,.92); border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .shu:hover .feng{ transform: rotateY(-140deg); } .wen{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-family: 'fangsong'; text-align: left; } </style></head><body> <div class="shu"> <div class="feng"></div> <div class="wen"> <h3 style="padding-top: 50px;padding-left: 40px;">Life of Pi</h3> <p style=" padding-top: 20px; padding-left: 40px;padding-right: 15px;"> He lives in Scarborough. He's a small, slim man – nomore than five foot five. Dark hair, dark eyes. Hair greyingat the temples. Can't be older than forty. leasingcoffee-coloured complexion1. Mild fall weather, yet puts on abig winter parka with fur-lined hood2 for the walk to thediner. </p> </div> </div></body></html>1.认知基础课程2. java入门阶段3. 面向对象编程4. 飞机小项目5. 面向对象和数组6. 常用类7. 异常机制8. 容器和数据结构9. IO流技术10. 多线程11. 网络编程12. 手写服务器13. 注解和反射14. GOF23种设计模式15. 正则表达式16. JDBC数据库操作17. 手写SORM框架18. JAVA10新特性19.数据结构和算法20. JVM虚拟机讲解21. XML技术解析第2阶段：数据库开发全套课程
1.Oracle和SQL语言2.Mysql快速使用3.PowerDesigner使用4.JDBC数据库5.Mysql优化6.oracle深度讲解第3阶段：网页开发和设计
1.HTML基础2.CSS基础3.JavaScript编程4.jQuery5.easyUI第4阶段：Servlet和JSP实战深入课程
1.Servlet入门和Tomcat2.request和response对象3.转发和重定向_Cookie4.session_Context对象5.JSP6.用户管理系统7.Ajax技术8.EL和JSTL标签库9.过滤器10.监听器第5阶段：高级框架阶段
1.Mybatis2.Spring3.Spring MVC4.SSM框架整合5.RBAC权限控制项目6.Hibernate37.Hibernate48.jFinal9.Shiro安全框架10.Solr搜索框架11.Struts212.Nginx服务器13.Redis缓存技术14.JVM虚拟机优化15.Zookeeper第6阶段：微服务架构阶段
1.Spring Boot2.Spring Data3.Spring Cloud第7阶段：互联网架构阶段
1.Linux系统2.Maven技术3.Git4.SVN5.高并发编程6.系统和虚拟机调优7.JAVA编程规范8.高级网络编程9.Netty框架10.ActiveMQ消息中间件11.单点登录SSO12.数据库和SQL优化13.数据库集群和高并发14.Dubbo15.Redis16.VSFTPD+NGINX第8阶段：分布式亿级高并发电商项目
1.基于SOA架构介绍2.VSFTPD和Nginx和商品新增3.商品规格参数管理4.Jsonp5.CMS模块6.广告位数据缓存7.SolrJ和SolrCloud8.商品搜索9.商品详情10.单点登录11.购物车12.订单系统13.分库和分表14.分布式部署第9阶段：毕设项目第1季
1. 电子政务网2. 企业合同管理系统3. 健康管理系统4. 商品供应管理系统5. 土地档案管理系统6. 聊天室设计和实现7. 码头配套和货柜管理系统8. 百货中心供应链系统9. 病历管理系统10. 超市积分管理系统11. 动漫论坛12. 俄罗斯方块13. 个人博客系统14. 固定资产管理系统15. 影视创作论坛16. 屏幕截图工具17. 超级玛丽游戏18. 飞机大战游戏19. 雷电第10阶段：毕设项目第2季
1. 微博系统2. 写字板3. 坦克大战4. 推箱子5. 电脑彩票系统6. 记账管理系统7. 新闻发布系统8. 医院挂号系统9. 仓库管理系统10. 停车场管理系统11. 网络爬虫12. 酒店管理系统13. 企业财务管理系统14. 车辆管理系统15. 员工信息管理系统16. 旅游网站17. 搜索引擎18. 进销存管理系统19. 在线考试系统20. 物流信息网21. 住院管理系统22. 银行柜员业务绩效系统
关键词：效果,书本,技能
