首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

CSS小猪佩奇

—— Cristiano Bottlejiang 接下来,便是正式开工用CSS小猪佩奇了! · 预研 找了腾讯视频上面小猪佩奇第四季纸飞机一集11秒处的画面作为绘画模板。...于是我想用纯粹的css来做,这样更有挑战,因为画图画曲线不是css擅长的事情。 · 难点 CSS是没法直接曲线的,曲线救国的办法就是 border-radius。后面整个绘画都是围绕这个属性展开。...[ 椭圆 ] [ 曲线 ] · 猪头 了解了 border-radius 的用法之后就可以开始实战了。...大体绘画步骤如下: 椭圆; 调 border-radius 参数; 上色; 调角度; 图层遮盖补充。 [ 猪头 ] 猪头轮廓样式代码: 嘴巴 三个半椭圆依次叠加即可~同样是图层遮盖来实现。

1.1K50

CSS三角形

首先,创建一个空的div 然后,CSS处理它的边框,给它不一样的颜色,好观察 .triangle{ border-left:100px...100px solid green; border-bottom:100px solid pink; } 结果是这样子的 这个结果我非常满意,看到这里你们应该也知道三角形怎么截取了,而且是任意方向...因为任意三个方向的边框为0,都会使4个正方形都消失,只剩下一个矩形,然而我们的宽高为0,因此,就使图形消失。再来看看这个图案。...完整的CSS如下: .triangle{ width:0px; border-left:100px solid red; border-top:100px solid transparent;...border-bottom:100px solid transparent; } CSS三角形的介绍就到这里,大家也可以用span标签来话,但是会发现有一个纵向的高度,一开始我以为是line-height

87320

CSS三角形及其原理

搜索网络之后发现三角形可以通过以下CSS代码实现: #triangle_bottom{ height:0px; width:0px; border-left:20px solid transparent...接下来是我学习CSS三角形原理的一点小总结。 其实使用CSS代码绘制三角形,只是对盒子模型中的”border”属性的简单应用。...border-bottom:0px; 4、由此我们不难得出CSS三角形所需的第一条结论:每条边(以黄色边为例)与其邻边所成夹角A,tanA=n/m(n,m分别为自己和邻边的宽度),当邻边宽度为0px...由此我们可以得出CSS三角形所需的第二条结论:当盒子模型中的内容(Content)+填充(Padding)的大小为0px时,Border边的形状将由梯形变为三角形。...以向上的底角45°的等腰三角形为例,由于tan(45°)=1,我们需将border-bottom、border-left、border-right三者设置为相等的宽度,并将border-left和border-right

75510

CSS卡通蓝天白云草坪动画效果

效果展示 背景效果实现 效果展示 在这里插入图片描述 HTML结构 直接使用的body作为整个内容的大背景 CSS样式 元素具有一个从顶部到底部渐变的背景...最后添加一个CSS动画。动画的持续时间为5秒,使用ease缓动函数,并且无限次地重复。 云效果实现 效果展示 在这里插入图片描述 HTML结构 在HTML中定义云朵的容器。...CSS样式 接下来,我们使用CSS来定义云朵的样式和动画效果。 主要使用到的是以下四种: 基本样式: 设置云朵的颜色、形状、大小和透明度。...定位: 使用position: absolute;将云朵定位在页面的任意位置。 动画: 定义float动画,使云朵看起来像是在空中漂浮。 阴影: 为云朵添加一些阴影效果,使其看起来更加立体。...动画 (animation): 为了使云朵看起来像是在漂浮,我们使用了CSS动画。

12110

CSS-T | Mysql Client 任意文件读取攻击链拓展

MySQL LOCAL INFILE to read client files (2018年4月23日) 在围绕这个漏洞的挖掘过程中,我们不断地发现新的利用方式,所以将其中大部分的发现都总结并准备了议题在CSS...受到这个思路的启发,我们想到可以找online的excel的这个功能,这样就可以实现任意文件读取了。...既然是围绕任意文件读取来讨论,那么最能直接想到的一定是有关配置文件的泄露所导致的漏洞了。...,有一个ucenter的设置功能,这个功能中提供了ucenter的数据库服务器配置功能,通过配置数据库链接恶意服务器,可以实现任意文件读取获取配置信息。...然后就会触发任意文件读取,当然,如果读取文件为phar,则会触发反序列化。 我们需要先生成相应的phar <?

1.4K30

两行 CSS 代码实现图片任意颜色赋色技术

很久之前在张鑫旭大大的博客看到过一篇 PNG格式小图标的CSS任意颜色赋色技术,当时惊为天人,感慨还可以这样玩,私底下也曾多次想过有没有其他方法可以实现,又或者不仅仅局限于 PNG 图片。...使用 background-blend-mode: lighten 实现任意图片颜色赋色技术 OK,下面进入正文。如何通过纯 CSS 技术实现任意图片的任意颜色赋色技术呢?...任意颜色赋色技术尝试 -- PNG图片 很遗憾,当底色是透明的时候,会被混合模式混合上叠加层的颜色,无法使用。...background-blend-mode 实现图片任意颜色赋色技术总结 综上,我们确实只需要两行代码就可以实现白色底色黑色主色图片的任意颜色赋色技术。...那么由此方法本身可以想到,一些能对图形进行色彩调整的 CSS 属性是否也能达到同样的功能呢?

1.1K20

CSS-T | Mysql Client 任意文件读取攻击链拓展

MySQL LOCAL INFILE to read client files (2018年4月23日) 在围绕这个漏洞的挖掘过程中,我们不断地发现新的利用方式,所以将其中大部分的发现都总结并准备了议题在CSS...受到这个思路的启发,我们想到可以找online的excel的这个功能,这样就可以实现任意文件读取了。...既然是围绕任意文件读取来讨论,那么最能直接想到的一定是有关配置文件的泄露所导致的漏洞了。...有一个ucenter的设置功能,这个功能中提供了ucenter的数据库服务器配置功能,通过配置数据库链接恶意服务器,可以实现任意文件读取获取配置信息。...然后就会触发任意文件读取,当然,如果读取文件为phar,则会触发反序列化。 我们需要先生成相应的phar <?

1.6K10

两行 CSS 代码实现图片任意颜色赋色技术

很久之前在张鑫旭大大的博客看到过一篇 PNG格式小图标的CSS任意颜色赋色技术,当时惊为天人,感慨还可以这样玩,私底下也曾多次想过有没有其他方法可以实现,又或者不仅仅局限于 PNG 图片。...使用 background-blend-mode: lighten 实现任意图片颜色赋色技术 OK,下面进入正文。如何通过纯 CSS 技术实现任意图片的任意颜色赋色技术呢?...任意颜色赋色技术尝试 -- PNG图片 很遗憾,当底色是透明的时候,会被混合模式混合上叠加层的颜色,无法使用。...background-blend-mode 实现图片任意颜色赋色技术总结 综上,我们确实只需要两行代码就可以实现白色底色黑色主色图片的任意颜色赋色技术。...那么由此方法本身可以想到,一些能对图形进行色彩调整的 CSS 属性是否也能达到同样的功能呢?

2.1K30

box-shadow 高阶玩法:纯 CSS 蒙娜丽莎和星空

想必写过 CSS 的同学都用过 box-shadow,它可以给元素设置阴影,增加立体效果。...我们来试一下: box-shadow 星空 星空大概是这样的: 完蒙娜丽莎,我们知道了可以通过 box-shadow 多重阴影画出任意多个方块。...css 里确实设置不了随机的东西,但是可以通过预处理器来做到,比如 sass。...效果是这样的: 看下现在的 css: 确实有随机生成的 700 个 box-shadow 值。 这就是预处理器的作用。...通过多重阴影顺序排列阴影块可以达到像素块的效果,画出蒙娜丽莎或者其他任意的图片。 也可以通过 sass 预处理器随机生成不同位置的阴影块来做出粒子效果,比如星空。

935100

如何使用CSS3出懂你的3D魔方~

[如何使用CSS3出懂你的3D魔方~] 作者:首席填坑官∙苏南 交流:912594095,公众号:honeyBadger8;本文原创,著作权归作者所有,转载请注明原链接及出处。...前言   最近在写《动画点点系列》文章,上一期分享了,本期给大家带来是结合CSS3出来的一个立体3d魔方,结合了js让你随心所欲想怎么转,就怎么转,这里是 @IT·...平头哥联盟,我是首席填坑官∙苏南(South·Su),我们先来看看效果,然后再分解它的实现过程吧 [CSS3出懂你的3D魔方] 绘制过程:   好吧,gif图看着好像有点不是很清晰,想在线预览的同学,...了解更多 hue-rotate : The hue-rotate() CSS function rotates the hue of an element and its contents....360°旋转 : 上面是一个鼠标经过的过渡动画,可以看出立体效果是已经有了,接下来就写一个CSS animation的动画,让它360度旋转,每个角都能看到,这样会显的很666; animation

1.1K50

如何用CSS3出懂你的3D魔方?

前言   最近在写《每周动画点点系列》文章,上一期分享了,本期给大家带来是结合CSS3出来的一个 立体3d魔方,结合了 js让你随心所欲想怎么转,就怎么转,这里是...我们要指定它们是在三维空间内的 preserve-3d,也就是6个面的父级要设置 transform-style 样式; 以上都设置好后,再来看看6个面吧,为了便于区分,给它们每个都设置了不同颜色(用了css3...了解更多 hue-rotate : The hue-rotate() CSS function rotates the hue of an element and its contents....∙ CSS 360°旋转 : 上面是一个鼠标经过的过渡动画,可以看出立体效果是已经有了,接下来就写一个CSS animation的动画,让它360度旋转,每个角都能看到,这样会显的很666; animation...Math.PI)) + 180) / 90),参考司徒大神的JS判断鼠标从什么方向进入一个容器; 最后,给容器绑上事件: mouseover、 mousemove、 mouseout,鼠标进入时,暂停css

85630

3D场景中BIM剖切面参数化开发ThingJS

3D场景内的模型剖切 ThingJS支持对模型的方盒子六面剖切以及任意面剖切,让我们来看看官方示例示怎么做到的吧。...值可以为plane, box, sphere等 步骤二,设置父物体为剖切方向的箭头,拖动指引箭头则剖切面会被激活 步骤三,设置剖切面样式,如颜色、透明度、双面渲染,以包围盒的效果出现 /** * 创建方向箭头和剖切面...*/ function create() { if (cuttingPlane == null) { // 创建方向箭头 cuttingArrow = app.create...height: cuttingBoxOptions.planeHeight, // 高度 parent: cuttingArrow, // 设置父物体为创建的方向箭头...步骤一,鼠标操作为主,方向箭头绑定鼠标进行剖切 步骤二,设置剖切时需要的箭头位置、剖切高度和方向 步骤三,别忘了摄像机视角,剖切时关闭默认旋转事件 显示剖切面 剖切后的建筑体 结尾 ThingJS利用参数化控制剖切面

1.1K30
领券