Css Secret 案例Demo全套
Css Secret 案例全套
github地址
案例地址
去年买了一本CSS揭秘的css专题书,该书揭示了 47 个鲜为人知的 CSS 技巧,主要内容包括背景与边框、形状、 视觉效果、字体排印、用户体验、结构与布局、过渡与动画等。去年买入时,就决定将里面所有Demo案例全部撸一遍,作为自己2018年学习清单中的首项。这个过程中也可以学习到一些比较实用的css技巧,对于工作中css布局上面也有挺大的帮助。
下面是几种比较有趣的css场景的实现方式:
饼图(基于transform实现方式)
<div class="picture1">20</div
/*基于transform的解决方案*/.picture1 {position: relative;width: 100px;line-height: 100px;text-align: center;color: transparent;background: yellowgreen;background-image: linear-gradient(to right, transparent 50%, #655 0);border-radius: 50%;/*animation-delay: -20s;*/}@keyframes spin {to { transform: rotate(.5turn); }}@keyframes bg {50% { background: #655; }}.picture1::before {content: '';position: absolute;top: 0;left: 50%;width: 50%;height: 100%;border-radius: 0 100% 100% 0 / 50%;background-color: inherit;transform-origin: left;animation: spin 50s linear infinite,bg 100s step-end infinite;animation-play-state: paused;animation-delay: inherit;}
// 基于transform的解决方案let picture1 = document.querySelector('.picture1');let rate1 = parseFloat(picture1.textContent);picture1.style.animationDelay = `-${rate1}s`;
饼图(基于svg实现方式)
<svg viewBox="0 0 32 32"><circle id="circle2" r="16" cx="16" cy="16"></circle></svg>
/*基于svg的解决方案*/svg {width: 100px;height: 100px;transform: rotate(-90deg);background: yellowgreen;border-radius: 50%;}circle{fill: yellowgreen;stroke: #655;stroke-width: 32;}#circle2 {stroke-dasharray: 38 100;}
插入换行
<dl><dt>Name:</dt><dd>wushaobin</dd><dt>Email:</dt><dd>739288994@qq.com</dd><dd>12345@qq.com</dd><dd>54321@qq.com</dd><dt>Location:</dt><dd>shenzhen</dd></dl>
dt,dd {display: inline;}dd{margin: 0;font-weight: bold;}dd dt::before {content: '\A';white-space: pre;}dd dd::before {content: ', ';font-weight: normal;}
Css Secret 案例Demo全套相关推荐
- 微信小程序入门教程+案例demo
微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,--微信小程序开发也就那么回事.你只需要 ...
- CSS实验案例02简单专业介绍网页
文章目录 CSS实验案例02简单专业介绍网页 2.1CSS 2.2HTML CSS实验案例02简单专业介绍网页 2.1CSS body {/* 主体*/font-size: 24px;text-ali ...
- 经典网页设计:30个创意的 CSS 应用案例
2012年涌现出众多令人印象深刻的 CSS 网站作品,这些网站充分应用 CSS 的强大特性实现各种绚丽的视觉效果.我根据过去 CSS 典型的应用场景挑选了其中的优秀作品组成一个列表,如果你有收藏更好的 ...
- 挑战杯三创互联网+创青春等创新创业类竞赛国家级作品案例模板全套资料分享
挑战杯三创互联网+创青春等创新创业类竞赛国家级作品案例模板全套资料分享 三创创青春互联网+都参加过,这些竞赛大同小异.时间都在本学年的下学期,一般在学校教务处官网通知公告中可以看到具体参赛时间. 而大 ...
- Flink CDC 系列(3)—— Flink CDC MySQL Connector 与 Flink SQL 的结合使用案例Demo
Flink CDC 系列文章: <Flink CDC 系列(1)-- 什么是 Flink CDC> <Flink CDC 系列(2)-- Flink CDC 源码编译> < ...
- CSS颜色操作案例Demo【彩色标记笔】
案例代码: Html代码 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
- Winform开发框架中的综合案例Demo
在实际的系统开发中,我们往往需要一些简单的的案例代码,基于此目的我把Winform开发框架中各种闪光点和不错的功能,有些是我们对功能模块的简单封装,而有些则是引入了一些应用广泛的开源组件进行集成使用, ...
- client netty 主动发数据_netty案例,netty4.1基础入门篇十一《netty udp通信方式案例Demo》...
小傅哥 | https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获.专注于原创专题案例编写,目前已完成的专题有:Netty4.x实战专题案例.用Java实现JVM.基于Ja ...
- 《CSS实战案例汇总》涟漪
涟漪 实现效果 HTML代码 CSS代码 实现效果 HTML代码 <!DOCTYPE html> <head><link rel="stylesheet&quo ...
最新文章
- Scrapy学习教程
- centos上用yum安装rar/unrar
- 机器之心助推长三角建设数据智能产业新高地:2018长三角数据智能盛典
- 011_CSS子元素选择器
- linux中memcpy实现分析,ARM64 的 memcpy 优化与实现
- linux bind日志级别,BIND日志相关(一)
- 垂直型电商的投资魔法
- Microsoft Azure 简介及信息汇总
- Spring Bean配置默认为单实例 pring Bean生命周期
- python爬虫案例——百度贴吧数据采集
- Google推荐的15条军规:HTML5代码规范
- 有趣的 Mysql 存储引擎 1
- vs code调试console程序报错--preLaunchTask“build”
- Go语言--编程哲学
- 计算机二级c语言程序设计题评分标准,计算机二级C语言题型和评分标准
- 浅谈机器人比赛中的系统工程和组织管理
- 系统日报-20220421(Databricks 缘何成功?)
- QT根据参数绘制图形+重复绘制路径的简单方法(QT系列8)
- 一招教会你语音转文字转换器怎么使用
- Vim 复制 全部复制
热门文章
- java 循环拼接字符串用分号隔开_Java 8中字符串拼接新姿势:StringJoiner
- php laravel 调试,php – Xdebug laravel artisan命令
- OSI模型和TCP/IP协议族
- C# 获取对象 大小 Marshal.SizeOf (sizeof 只能在不安全的上下文中使用)
- element table 组件内容换行方案
- MongoDB和Java(5):Spring Data整合MongoDB(注解配置)
- StringTokenizer(字符串分隔解析类型)
- sizeof和strlen的区别(其中涉及NUL的讲解)
- oracle中sql语句的优化(转帖)
- MATLAB正太分布函数