chokcoco的个人主页 - 赞过 - web秀

chokcoco

iCSS前端趣闻

6年前

CSS利用mask 实现图片的斜线拼接

CSS利用mask 实现图片的斜线拼接

什么是斜线拼接效果图下面所示：发现，上面这张图是两个美女拼接在一起的，看中间的斜线。但是呢，刚接到这个需求的时候，开发是抓狂的——第一反应就是用canvas画图，这得多累啊，只是要显示张图片而已，竟然还要动用一坨JS，O__O"…不过依稀记得，CSS貌似有个遮罩的特性，可以实现图片的部分显示的效果的。CSSmask&lineargradient要实现这个特性，就需要用到CSS遮罩和线性渐变。至于这两个是什么东西，我就不班门弄斧的介绍了，毕竟这两个属性出生也挺久了的，不了解的筒子可以看这两篇文章CS

562817 6366 0

5年前

CSS3动画解析抖音 LOGO制作

CSS3动画解析抖音 LOGO制作

前言“字节跳动”现今也是如日中天，旗下产品，除头条外，还有短视频平台“抖音”，人气也是非常高，据说拥有7亿用户。今天我们就来研究研究抖音的logo，蹭蹭热度。效果预览：主要用css3新增属性mix-blend-mode，混合模式来实现。分解我们先来看看它的组成，由大写的“J”组成，然后有3种颜色，白色、红色、和天蓝色。ok，我们先来完成一个“J”。根据以往的经验，我们把它拆分成3部分。下面我们来分步骤实现。完成单个“J”<divclass="jitter"><divclass="logo

563439 6284 0

5年前

CSS制作可爱的小猪，祝大家2019“猪”事顺心

CSS制作可爱的小猪，祝大家2019“猪”事顺心

前言时间过得真快，2019年也是说来就来，时间是真的不等人啊。新的一年小伙伴们都有什么目标呢？赶紧向着目标努力吧，2020也会眨眼即到。2019，祝大家“猪”事顺利，事事顺心！接下来进入今天的课题。用CSS制作一个小小的、可爱的小猪。主要用到的技术有border-radius、transform:rotate等等。预览图：主体结构<divclass="pig"><divclass="body"><divclass="ear"></div><divcla

556332 3759 0

2年前

如何快速上手基础的CSS3动画

如何快速上手基础的CSS3动画

前言说起CSS3动画，就必须说说transform，translate，transition，animation这4个属性，transform主要定义元素的动作，比如旋转、倾斜、位移等，translate是transform里面的属性，用于2D/3D位移。后2个主要对动作进行描述，动画时间、速度曲线、次数等。下面我用是一些简单的示例，让大家快速的入门上手:快速开始第一个动画<style>.div1{width:100px;background:red;/**动画描述：宽度改变动画用时1s*/t

555177 3795 0

5年前

纯CSS3实现loading虚影加载效果

纯CSS3实现loading虚影加载效果

前言最近公司实在是太忙了，996的日子（当前时间凌晨2019-01-0602:04），所以更新也少了，希望大家多体谅一下，在此对小伙伴们说声抱歉。前几天接到小伙伴投稿，希望做一个类似loading的效果，也是只要手头有空就赶紧写写，今天终于给做好了，非常感谢"月球居民爱丽丝"的投稿。原件预览图：效果解析从效果而言，我们主要实现下列步骤：1、让一个圆旋转，并且是先快后慢;2、有颜色过渡效果、并且有透明度;3、然后就是复制上面的效果，5个，然后按时间执行动画好了，开始我们的表演第一步-一个圆旋转css画一个圆

557556 3638 0

6年前

Jquery和CSS3轻松实现放大镜效果

Jquery和CSS3轻松实现放大镜效果

前言每当打开淘宝，天猫等pc端时，看到心仪的物品时，点击图片时，便呈现出放大的效果。有没有去理解分析它的原理？是不是感觉非常的神奇？当真正地去接触，其实非常好理解。下面一起来学习！在线演示地址[codepen_embedheight="350"theme_id="1"slug_hash="VoaxvK"data-default-tab='result'user="javanf"]SeethePenDcHupbyEltonMesquita(@eltonmesquita)onCodePen.[/codepen

558590 6269 0

5年前

CSS3实现瀑布流布局(display: flex/column-count/display: grid)

CSS3实现瀑布流布局(display: flex/column-count/display: grid)

前言在css3到来之前，都是用js来操作dom元素，计算位置，大小，形成瀑布流布局。但是有了css3之后，一切实现起来就太简单了，没有复杂的逻辑，轻松的几行样式代码就可以搞定。回顾以前（js瀑布流）基于waterfall.js（11.8kb）,还得写入基础的样式，初始化等等，对比其他js，已经是很简单了。varwaterfall=newWaterFall({container:'#waterfall',pins:".pin",loader:'#loader',gapHeight:20,gapWidth:2

562834 4375 0

猜你喜欢

换一换

最新文章