大家都知道，在网页制作时使用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。推荐7款CSS3实现的动态特效。希望对大家有所帮助！
CSS3实现的全屏幕覆盖层效果
一个使用CSS3生成的超酷幻灯效果，拥有非常棒覆盖效果，整体设计也非常的流畅大气，大家可以直接下载演示看效果，或者使用GBdebug来在线调试。非常适合用户首页或者产品，作品集的展示。
CSS3实现的模糊文字效果
非常特别的一款效果，鼠标离开就会变得好像有点近视度一样的模糊，但把鼠标移动回来，却又清晰起来。这样效果如果用在情人节告白上，可能会更有效果吧。
用CSS3实现的按钮效果
用CSS3 实现的几种按钮的效果。当鼠标滑过按钮，就可以看到不同的效果啦！
超棒CSS3动画泡沫按钮，不影响旧版本浏览器使用
非常可爱的泡泡按钮！适用于多种风格的网站。
CSS3实现的超棒3D Grid效果
非常棒的一款3D特效，我本人非常喜欢3D效果，因为它可以让你真个页面看起来更加立体更加丰满！如果你也和我一样，赶快来收藏吧！
CSS实现的变戏法小球
#container {
width: 200px;
height: 50px;
position: absolute;
top: calc(50% + 50px);
left: calc(50% + 50px);
opacity: 0;
animation: fadeIn 1s 1;
animation-fill-mode: forwards;
}
.wrap {
animation: translateX 1000ms infinite ease-in-out alternate;
position: absolute;
}
.ball {
width: 50px;
height: 50px;
box-shadow: -5px -5px 0 rgba(0, 0, 0, 0.15) inset;
background-color: #397BF9;
border-radius: 50%;
animation: translateY 500ms infinite ease-in-out alternate;
border: 2px solid black;
}
.wrap:after {
content: '';
width: 50px;
height: 7.5px;
background: #eee;
position: absolute;
bottom: 0;
top: 70px;
border-radius: 50%;
animation: scale 500ms infinite ease-in-out alternate;
}
#wrap2, #ball2, #wrap2:after {
animation-delay: -400ms;
}
#wrap3, #ball3, #wrap3:after {
animation-delay: -800ms;
}
#wrap4, #ball4, #wrap4:after {
animation-delay: -1200ms;
}
#wrap5, #ball5, #wrap5:after {
animation-delay: -1600ms;
}
#ball2 {
background-color: #F4B400;
}
#ball3 {
background-color: #EEEEEE;
}
#ball4 {
background-color: #00A656;
}
#ball5 {
background-color: #E3746B;
}
@keyframes translateX {
100% {
transform: translateX(-150px);
}
}
@keyframes translateY {
100% {
transform: translateY(-187.5px);
}
}
@keyframes scale {
100% {
transform: scale(0.85);
}
}
@keyframes fadeIn {
100% {
opacity: 1;
}
}
复制代码
使用CSS3 keyframe生成的好玩变戏法小球特效。非常好玩，如果在有个小丑在旁边就更完美了不是吗？
使用CSS3的step()生成的动画效果
在这些DEMO中，将演示如何使用CSS3的step()来处理动画效果。
运动的小车：
.contain-car {
animation: drive 4s steps(4, end) infinite;
}
.contain-car-2 {
animation: drive 4s steps(4, start) infinite;
}
@keyframes drive {
to {
transform: translateX(640px);
}
}
复制代码
时钟效果：
.second {
animation: tick-tock 60s steps(60, end) infinite;
}
@keyframes tick-tock {
to {
transform: rotate(360deg);
}
}
复制代码
脚爪：
.cover {
animation: walk 7s steps(7, end) infinite;
}
@keyframes walk {
to {
transform: translateX(675px);
}
复制代码
进度：
.circle {
animation: fill 5s steps(5, start) forwards;
}
@keyframes fill {
to {
opacity: 1;
}
}
复制代码
网友评论