Repository: wangzhengya/cheatsheet Branch: master Commit: 46f3c6a0db32 Files: 6 Total size: 7.9 KB Directory structure: gitextract_jixmq0hy/ ├── CNAME ├── README.md ├── _config.yml └── ebook/ ├── README.md ├── index.html └── style.css ================================================ FILE CONTENTS ================================================ ================================================ FILE: CNAME ================================================ zhengyaing.com ================================================ FILE: README.md ================================================ # 前端Cheat Sheet分享 一张图掌握一个知识点:[Github项目地址](https://github.com/wangzhengya/cheatsheet) 因为国内github网络问题,最近新增了Gitee的网址:[Gitee](https://gitee.com/zhengyaing/cheatsheet) 欢迎大家在Issues里给我提想学的知识点,也可以给我提一些改进的建议 ## B站视频分享 [B站讲解视频地址](https://space.bilibili.com/503792864) ## 截图预览 ![预览](image/preview.png) ## 百度云盘下载 链接: https://pan.baidu.com/s/1dT1Q0dft7nEY5wPkaM2CCw 提取码: 44mf ## BiliBili教学视频 【1】[一张图彻底掌握Grid网格布局](https://www.bilibili.com/video/BV1jA411h7sy/) 【2】[一张图掌握Flexbox弹性盒子布局](https://www.bilibili.com/video/BV1K64y1u7eb/) 【3】[一张图掌握BoxModel](https://www.bilibili.com/video/BV1ni4y1t7jK/) 【4】[一张图掌握Git](https://www.bilibili.com/video/BV1AZ4y1x7Do/) 【5】[一张图掌握CSS Selector](https://www.bilibili.com/video/BV1kk4y1R78f) 【6】[一张图掌握Head标签](https://www.bilibili.com/video/BV1ui4y1b7UW/) 【7】[一张图掌握Markdown](https://www.bilibili.com/video/BV1sz411z7qd/) 【8】[一张图掌握正则表达式](https://www.bilibili.com/video/BV1jT4y137qt/) 【9】[一张图掌握console](https://www.bilibili.com/video/BV1oz4y1R7yu/) 【10】[一张图掌握HTTP基础](https://www.bilibili.com/video/BV1Ua4y1e7rC/) 【11】[一张图入门SASS](https://www.bilibili.com/video/BV1e5411W7jd) 【12】[一张图掌握transform](https://www.bilibili.com/video/BV1Bz4y1r7V2/) ## 打赏 如果您觉得此项目对您有帮助,请我喝一杯咖啡☕️吧! ![alipay](image/alipay.jpeg) ![wechat](image/wechatpay.png) ================================================ FILE: _config.yml ================================================ theme: jekyll-theme-leap-day ================================================ FILE: ebook/README.md ================================================ # ebook 前端编程电子书分享 ================================================ FILE: ebook/index.html ================================================ Zhengyaing图书分享
CSS The Definitive Guide, 4th Edition
CSS The Definitive Guide, 4th Edition
CSS The Definitive Guide, 4th Edition
CSS The Definitive Guide, 4th Edition
CSS The Definitive Guide, 4th Edition
CSS The Definitive Guide, 4th Edition
CSS The Definitive Guide, 4th Edition
CSS The Definitive Guide, 4th Edition
CSS The Definitive Guide, 4th Edition
CSS The Definitive Guide, 4th Edition
CSS The Definitive Guide, 4th Edition
CSS The Definitive Guide, 4th Edition
================================================ FILE: ebook/style.css ================================================ .container { width: 100%; display: flex; flex-wrap: wrap; } .book-container { display: flex; margin: 50px; align-items: center; justify-content: center; perspective: 600px; } @keyframes initAnimation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-34deg); } } .book { margin-top: 40px; width: 200px; height: 300px; position: relative; transform-style: preserve-3d; transform: rotateY(-34deg); transition: 1s ease; animation: 1s ease 0s 1 initAnimation; } .book:hover { transform: rotateY(0deg); } .book > :first-child { position: absolute; top: 0; left: 0; background-color: red; width: 200px; height: 300px; transform: translateZ(37.5px); background-color: #01060f; border-radius: 0 2px 2px 0; box-shadow: 5px 5px 20px #666; } .book::before { position: absolute; content: " "; background-color: blue; left: 0; top: 3px; width: 73px; height: 294px; transform: translateX(159.5px) rotateY(90deg); background: linear-gradient( 90deg, #fff 0%, #f9f9f9 5%, #fff 10%, #f9f9f9 15%, #fff 20%, #f9f9f9 25%, #fff 30%, #f9f9f9 35%, #fff 40%, #f9f9f9 45%, #fff 50%, #f9f9f9 55%, #fff 60%, #f9f9f9 65%, #fff 70%, #f9f9f9 75%, #fff 80%, #f9f9f9 85%, #fff 90%, #f9f9f9 95%, #fff 100% ); } .book::after { position: absolute; top: 0; left: 0; content: " "; width: 200px; height: 300px; transform: translateZ(-37.5px); background-color: #01060f; border-radius: 0 2px 2px 0; box-shadow: -10px 0 50px 10px #666; }