摘要:气泡三角形利用的特性实现梯形梯形利用伪类加旋转透视实现爱心太极图折角
气泡三角形
梯形利用 border 的 transparent 特性实现 .bubbly
爱心梯形
利用伪类加旋转透视实现 .trapezoid
#heart { position: relative; width: 100px; height: 90px; } #heart:before, #heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; }太极图#yin-yang { width: 96px; height: 48px; background: #eee; border-color: red; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; } #yin-yang:before { content: ""; position: absolute; top: 50%; left: 0; background: #eee; border: 18px solid red; border-radius: 100%; width: 12px; height: 12px; } #yin-yang:after { content: ""; position: absolute; top: 50%; left: 50%; background: red; border: 18px solid #eee; border-radius:100%; width: 12px; height: 12px; }折角混合模式背景图利用切角、伪类、渐变、旋转实现 .corner
多云利用渐变实现 .colorful-stripe
阴影实现多云天气图案利用线性渐变、阴影、缩放实现 .cloudy
阴影实现雨天天气图案多云(cloudy2)(单标签实现) 利用线性渐变、阴影、缩放实现 .cloudy2
彩虹天气图案雨(rainy) 利用线性渐变、阴影、缩放实现 .rainy
chrome 浏览器图标彩虹(rainbow) 利用border、box-shadow 实现 .rainbow
IE 浏览器图标Chrome(单标签实现) 利用渐变实现 safari 浏览器图标IE(单标签实现) 利用渐变、多重阴影实现 safari(单标签实现) 利用渐变、border、旋转实现
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/53559.html
摘要:原文译文基于单个的绘图译者前端外刊评论译注通读本文,强烈地感受到了技术与艺术的结合赞作者的这句话限制你的可选项,会让你重新评估手头上已有的工具。不过若能有效地使用,我们的绘图可以包含很多令人惊叹的细节。 原文: Single Div Drawings with CSS 译文: 基于单个 div 的 CSS 绘图 译者: 前端外刊评论 译注:通读本文,强烈地感受到了技术与艺...
摘要:知识扫盲简介,可缩放矢量图形,具有放大缩小不失真的特性,可以用来创建矢量图。于年月日成为推荐标准。动画如果你问我为什么用做动画,而不是其他技术,那可以告诉你以下几点本质上是一种图形绘制技术,广泛用于矢量图绘制,适用于多数商业,卡通图片制作。 1、 svg知识扫盲 svg简介 SVG(Scalable Vector Graphics),可缩放矢量图形,具有放大缩小不失真的特性,可以用来...
摘要:知识扫盲简介,可缩放矢量图形,具有放大缩小不失真的特性,可以用来创建矢量图。于年月日成为推荐标准。动画如果你问我为什么用做动画,而不是其他技术,那可以告诉你以下几点本质上是一种图形绘制技术,广泛用于矢量图绘制,适用于多数商业,卡通图片制作。 1、 svg知识扫盲 svg简介 SVG(Scalable Vector Graphics),可缩放矢量图形,具有放大缩小不失真的特性,可以用来...
摘要:在制作动画方面也非常强悍,并且还专门提供了用于加强动画制作的相关插件,比如。一个有趣的的动画效果就完成了,代码地址使用配合来制作动画效果如此简单。原文地址,根据自己理解整理了下这个教程,主要是来学习下使用来制作动画效果的思路和方法。 这是我的一个关于SVG的应用的技术分享网站svgtrick.com,会同步一些文章到这里来,更多关于SVG技术应用可以去网站看看。 最近从Dribbble...
阅读 2989·2023-04-25 20:22
阅读 3304·2019-08-30 11:14
阅读 2558·2019-08-29 13:03
阅读 3153·2019-08-26 13:47
阅读 3186·2019-08-26 10:22
阅读 1238·2019-08-23 18:26
阅读 540·2019-08-23 17:16
阅读 1877·2019-08-23 17:01