CSS3 实现纸张折叠效果
今天码云笔记将带大家利用css3相关特性实现如下Gif图纸张折叠效果,它仅是CSS,不依赖JavaScript。喜欢的小伙伴可以拿去学习一下。
准备工作
首先,找一张自己喜欢的图片。
其次,要具有css3相关属性的基础知识,如果大家还是没有掌握好这方面的知识,没关系,可以先看看我之前的文章《css3属性之transform-origin属性学习笔记》、《CSS3变形与动画(上)》、《CSS3变形与动画(下)》,再往下学习。
将上面的准备工作做好,接下来我们就看看具体实现的源码。
Html代码:
<span class="mybj"> <span class="a"></span> <span class="bc"> <span class="b"></span> <span class="c"></span> </span> <img src="image/mybj.jpg"> </span>
CSS代码:
.mybj { position: relative; display: inline-flex; transform: rotateX(10deg); transform-style: preserve-3d; cursor: grab; } .mybj img { width: auto; height: auto; max-width: 100%; max-height: 56vh; opacity: 0; } .mybj .a, .mybj .b, .mybj .c { top: 0; display: inline-block; height: 100%; background-image: url(image/mybj.jpg); background-size: cover; background-repeat: no-repeat; } .mybj .a { position: absolute; left: 0; width: 50%; background-position: 0 0; } .mybj .bc { position: absolute; display: inline-flex; width: 50%; height: 100%; left: 50%; transform-origin: left; transition: transform 3s; transform-style: preserve-3d; } .mybj .b, .mybj .c { position: relative; width: 50%; backface-visibility: hidden; } .mybj .b { background-position: 66.666667% 0; transform-style: preserve-3d; } .mybj .b:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; transform: rotateY(180deg) translateZ(1px); transform-style: preserve-3d; backface-visibility: hidden; } .mybj .c { background-position: 100% 0; transform-origin: left; transition: transform 2s; } .mybj:hover .bc, .mybj:active .bc { transform: rotateY(-180deg) translateZ(-1px); transition: transform 2s; } .mybj:hover .c, .mybj:active .c { transform: rotateY(180deg) translateZ(2px); transition: transform 3s; }
结语
以上就是码云笔记今天为大家带来的纯css3实现纸张折叠效果源码,希望通过本文分享内容对大家在学习css3相关知识有帮助,更多源码分享请关注码云笔记前端教程。
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » CSS3 实现纸张折叠效果
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » CSS3 实现纸张折叠效果