CSS的力量:用一个DIV画图
2024-10-19 08:46:16
这些图片都是用一个DIV绘制出来的,其实原理并不复杂。
这些图片都是由CSS绘制出来的,通过background-image叠加实现,
如蘑菇头的实现,通过 radial-gradient 径向渐变 , linear-gradient 线性渐变相互叠加实现,如:
div {
width: 170px;
height: 140px;
background-image:
radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%),
linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%),
radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%),
radial-gradient(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
linear-gradient(to bottom, #ef0015 20%, #b2000c 100%);
border-radius: 140px 140px 80px 80px;
}
在线演示:在此
同时有前后遮挡关系的通过:before和:after伪元素的background-image来实现。
PS: 此种手法对并不完全支持旧版IE
原文地址: 点此
最新文章
- http工作流程
- c#事件机制
- Webview获取H5页面js方法参数
- elastic-job
- CLR/.NET/C#/Visual Studio/ASP.NET各版本之间的关系(转)
- JPA事务总结
- [daily][device] linux添加打印机
- VMware虚拟机中的常用文件介绍
- UVa 1475 (二分+半平面交) Jungle Outpost
- 一天一个Java基础——对象和类
- 命令链接按钮QCommandLinkButton
- 微信公众号订阅号以及服务号通过网页授权获取用户openid方法
- __x__(34)0908第五天__ 定位 position
- mybatis-generator自动生成Mapper.dao.entity
- Hibernate的入门:
- Java中的AES加解密
- (6)Python集合
- 非阻塞 sleep
- git error: RPC failed; curl 56 GnuTLS recv error 解决方案
- NodeJS 难点(网络,文件)的 核心 stream 一:Buffer
热门文章
- Inno Setup脚本
- C++基础知识(1)
- 第二阶段Sprint8
- 蜗牛慢慢爬 LeetCode 23. Merge k Sorted Lists [Difficulty: Hard]
- createobjbyreplace(str,arr) js替换方法保存
- Android studio Gradle编译错误: Unable to tunnel through proxy. Proxy returns ";HTTP/1.1 400 Bad Reques
- blog 社会化评论插件 多说for china, disqus for global range
- springMVC的接受参数三种样例
- BZOJ2423 HAOI2010最长公共子序列(动态规划)
- java 调用 C# webapi