标签：

原文:【CSS】CSS特效集锦，视觉魔法的碰撞与融合（一）

目录

正文

前言

在本文中我讲述了7种CSS的特效，它们也许看起来并不惊艳，但是我认为却足够转达本文的理念：编写一些特殊的CSS样式的时候需要不拘于常理，要用特殊的认识角度对待标签和样式属性，从而用「绕个弯」的方法到达效果。

一.走马看花

首先我们看第一个实现效果：在鼠标浮动到图片上方时，让一片白影一闪而过。

实现思路

画一个竖直的长方形的白色div，设置opcity将其变为半透明

借助transform:skewX将长方形酿成等高的平行四边形

白条div绝对定位，外层div相对定位，一开始left属性默认是0

在:hover伪元素中改削left值，例如left=600px（超过图片长度），通过transition指定left和时间，形成过渡

图示

HTML

<div class="flash"> <div class="flash-bar"></div> <img src="{图片地点}" /> </div>

CSS

.flash { position: relative; width: 500px; } .flash img { width: 100%; } .flash-bar { position: absolute; left:-100px; width: 20px; height: 100%; background: #fff; opacity: 0.5; transform: skewX(-30deg); transform-origin: 0 100%; } .flash:hover .flash-bar { left:900px; transition: left ease-in-out 1s; }

二.发光球体

实现思路

让一个球体散发光芒，一开始仿佛有点蒙，但是换个角度思考一下，光芒只是另一种颜色的box-shadow而已，然后我们通过animation让它动起来就好了

HTML

<div class="light"></div>

CSS

@keyframes light { from { box-shadow:0px 0px 4px #f00; } to { box-shadow:0px 0px 16px #f00; } } .light { margin:300px; width: 100px; height: 100px; margin:20px; border-radius: 50%; animation: light 2s ease-in-out infinite alternate; }

三.圆环进度条

很显然，圆框是通过border去实现的，但具体怎么做呢？

这个进度条，外貌上看它是由一个div圆框构成，实则不然，它是由摆布两个半圆的div构成的，此中一个div动弹180度，然后另一个div再转180度。看一下下面的例子你就大白了,我们把颜色调成蓝色和红色，以比拟

我们一步一步来解释，首先我们整个圆的外部是一个正方形，摆布由两个div,div-left和div-right构成，各占一半，分袂放左半圆和右半圆。而且两个div分袂设置overflow:hidden实现溢出隐藏，这样的功效是，左边的圆的右半边被隐藏了，右边的圆的左半边被隐藏了。