CSS3实现关闭 icon

CSS3实现关闭 icon关闭 icon 有两条线组成,所以很简单的设想就是两条横线,分别旋转不同角度即可。HTML<span id="close"></span>CSS#close { display: inline-block; width: 23px; height: 2px; background: red;

- 阅读全文 -

CSS3实现向右导航icon

CSS 实现向右导航 icon对于看过CSS绘制三角形的童鞋来说,实现向右导航 icon 很好理解,可能大家稍加即可知晓实现方式。是的,只需要设置一个元素的相邻 border,之后旋转一下即可。HTML<span id="right-arrow"></span>CSS#right-arrow { display: inline-block;

- 阅读全文 -

CSS3按钮大小变化效果

按钮大小变化效果我们经常会看到有的网页上按钮由大变小、再由小变大,这样不停变化的情况。今天就来和大家介绍如何实现这种效果。 首先将效果的实现过程分为两个阶段:第一阶段,按钮由大变小; 第二阶段,按钮由小变大。 说到这里,有没有联想到 CSS3 的自定义动画规则 keyframes,是的,通过 keyframes 就可以实现两个动画阶段的控制。而按钮大小变化的效果,可以通过 CSS

- 阅读全文 -

CSS3多图滚动切换

多图滚动切换写在前面的话之前写多图切换时有童鞋建议多写写动画效果,也想和大家多多分享的,怎奈想象力不足,一直没找到合适的效果。最近在网上无意看到了一个多图滚动切换的效果,感觉看起来不错,遂写下来和大家分享一下。思路动画效果技术上严格依赖于以下几点,请大家熟练掌握,然后看下文就比较好理解了transform 属性animation 属性keyframes 自定义动画规则本文为3张图片滚动切换,每滚动

- 阅读全文 -

CSS3加载动画之菊花旋转

加载动画之菊花旋转写在前面的话“读书破万卷”,不仅仅在于“万”,更重要的是要“破”。给大家推荐一本书《远见》,对于即将步入职场或者正在职场拼搏的你来说,值得一看! 看到目前很多网站的加载效果用的是 gif 图片,于是很好奇了,仅仅用 CSS 怎么实现呢?干货来袭,请接招。效果图思路CSS 用于修饰 HTML,所以即便是再简单的效果,都是要依赖于 HTML 的,而本例效果的实现 HTML 布局

- 阅读全文 -

CSS3加载动画之线条伸缩

加载动画之线条伸缩效果图思路通过 3 个线条高度的动态变化实现加载动画,为了突出效果,给线条增加了阴影。对动画而言,keyframes 和 animation 是必不可少的技巧。同时本例中使用了 first-child 和 nth-child 选择器,用于给特定位置的元素添加其特有的动画属性。HTML<div class="loading-container">

- 阅读全文 -

CSS3鼠标经过放大元素

鼠标经过放大元素如题,这是一种访问网页时经常会出现的效果。当鼠标经过某一图片或某一容器时,对应元素会有一个放大的动画,有木有好奇这是怎么实现的?那就继续往下看吧!效果图思路本文用到的动画效果不是自定义 keyframes 了,而是 CSS 的 transition 属性。transition 属性用来设置元素变化的过渡效果。例如:元素正常宽度是 100px,鼠标经过时宽度变为 200px,如果只设

- 阅读全文 -

CSS3图片亮度变化动效

效果图思路CSS 动画效果依赖于以下知识点的掌握:animation 属性@ keyframes 自定义动画规则图片亮度变化需要用到 filter 属性的 brightness 方法。brightness 的介绍如下:brightness 会给 DOM 元素应用亮度的线性变化效果其值为百分数时,如果值是 0%,图像会全黑;值是 100%,则图像无变化;超过100%,元素亮度线性增加其值为整数时,对

- 阅读全文 -