首页

关于

推荐9款使用CSS3实现的超酷动画效果

大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。CSS3CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。本周极客社区推荐9款使用CSS3实现的超酷前端动画效果。希望对大家有所帮助!

让我们晃动起来 - CSS小脚本工具:CSS Shake

推荐9款使用CSS3实现的超酷动画效果

本地演示

UI或者网站设计中,或许在某些情况下你希望你的用户能够关注某一个区域或者某一个界面元素,过去大家常用的方式是使用一个GIF图片,或者土一点儿方法生成一个高亮的区域,但随着浏览器的发展及其CSS动画的实现,我们可以借助一点点代码来生成。

在今天这篇小文章中,我们将介绍一个小巧的CSS脚本工具 - CSS Shake,它能够帮助你快速高效的生成一个"晃动"效果,你可以通过它来添加一个晃动效果到你的页面元素中。

标签: css, css3

阅读更多

快速提升CSS编码能力的五个必备知识点

快速提升CSS编码能力的五个必备知识点

作为web开发人员,无论你是前端开发或者是后端开发,也无论你是新手还是大神,对于CSS的知识了解都是需要,在这篇文章中,我们将从五个不同的角度帮助大家快速的提升自己的CSS水平,如果你能够在以下五点有所突破的话,CSS的编码能力肯定会有一定的提升。

1. 了解CSS中的定位(position)

快速提升CSS编码能力的五个必备知识点

如果你需要深度的了解CSS如何移动HTML元素,或者控制元素的位置和显示的话,定位是一个不可获取的基本知识,而且除了了解简单和具有普遍性的定位外,你需要了解他们具体的不同。

其实这里包含了5个基本的定位方式,如果你不能直接说出名字来的话,那么你需要好好的了解一下这方便的知识了,包含:

  • static
  • relative
  • absolute
  • inherit
  • fixed

以上五种定位你都需要了解,但是实际最常用的是relative和absolue。

2. 熟练的掌握float

快速提升CSS编码能力的五个必备知识点

当你初次学习CSS的时候,float肯定是最让你头疼的地方,但是一旦你了解了基本的知识,你就慢慢会了解如何处理clear…

标签: css, css3, 编码, php

阅读更多

使用CSS开发一个扁平风格的面包屑样式当前位置

使用CSS开发一个扁平风格的面包屑样式当前位置

使用的技巧和前面的动画生成三角形类似,如下:

使用CSS开发一个扁平风格的面包屑样式当前位置

#crumbs ul li a {
  display: block;
  float: left;
  height: 50px;
  background: #3498db;
  text-align: center;
  padding: 30px 40px 0 40px;
  position: relative;
  margin: 0 10px 0 0;     font-size: 20px;
  text-decoration: none;
  color: #fff;
}

使用CSS开发一个扁平风格的面包屑样式当前位置

#crumbs ul li a:after {
  content: "";  
  border-top: 40px solid red;
  border-bottom: 40px solid red;
  border-left: 40px solid blue;
  position: absolute; right: -40px; top: 0;
}

使用CSS开发一个扁平风格的面包屑样式当前位置

border-top: 40px solid transparent;
border-bottom:…

标签: css, css3, 页面设计, 扁平效果

阅读更多

CSS中有关圆圈的趣味设计

CSS中有关圆圈的趣味设计

曾被设计师抛弃的圆圈元素,现在又卷土重来了。圆形并不会像其他矩形那样堆叠,所以可以营造出不一样的整体感觉。圆圈的形状是完美的,无论从哪个角度看它都一样。圆圈是完整的,与自然相和谐的--想想有多少自然元素都是以圆形为基调的。让我们来看看用圆圈能做些什么吧!

基础的圆形

圆圈对于我们来说是既熟悉又安全的图形。圆圈里面的物质被保护起来,圆圈外围的物质无法影响到圈内。这种形状非常有趣,很有特点。将圆形应用到设计中去是经 过深思熟虑的。但是处理圆形也是具有挑战的,因为这种奇怪的形状可能与其他设计元素无法融合。以圆圈为主题的设计方案必须经过详细计划、设计和执行。

在现代设计作品里,除了传统意义上的圆圈之外,我们通常还能见到更多的圆状元素。椭圆形、拥有显著弧形边缘的类似矩形等等,这类元素都带有各自的设计风格。今天我们专注于标准的圆形图案,讨论近期火热的设计作品。

圆圈体现的内容

CSS中有关圆圈的趣味设计

圆圈可以带有很多关联性。它们是流体的,与运行和移动联系在一起(想想车轮)。由于圆形是大自然中一种基础图案--月亮,花朵,水果--所以圆形代表的图案能够表达真实与生活。此外,圆形的弧度还可以与能源,力量,和谐,无限联系起来。

作为设计师,我们经常见到带有颜色的轮子形状,它是最易于辨认的圆圈。这种运用很成功,因为结合了上述特征,创造了一个传递信息的对象,这是一种简单,有力,和谐的方式。圆形是完整的,用于突出强调。

网页设计中的圆圈

CSS中有关圆圈的趣味设计

圆圈,曾经很少用于网页设计中,如今却成为一种主流。很多年前,在CSS中很难创建圆形图案,但现在情况不同了。那么一个很棒的带有圆圈的网站设计包括哪些特点呢?通常有以下五种展示形式:

作为占主导地位的形状或框架

比起矩形图案,一些设计师更愿意使用圆圈。圆圈可能被用于标志或按钮。圆圈能够增加趣味性,把图案"困"在圈内。图案是否适合圆形呢(相机拍的照片就不是圆…

标签: css, design, 设计, 趣味设计, 网页设计

阅读更多

用Sass创建MetaFizzy效果

用Sass创建MetaFizzy效果

Hugo发现了一个绚丽的css效果应用于web中并教会你如何聪明的重建和使用它。两天前,我看见笔者Hugo在css帮助下重写MetaFizzy的效果,Hugo帮助我们找到了一个用于理解Sass的JavaScript源代码。但我认为他的代码仍有可改之处,它比原版本的css多出了许多重复代码,我们找到了一种方法使其更加效率。重点:这是一个实验,如果你想要实验,请使用JavaScriptcss版本需要500个线程,占用很多的CPU。所以这是一个Sass实验,只是为了好玩。

你从哪儿开始

对于这个问题如果一开始没有Hugo的Demo我还不知道从哪儿开始。以下是我们需要做的。给我们的文本一个长长的影子,渐变到黑色。岁颜色的阴影随着时间的变化盘旋,快速的彩虹动画,最后我们需要做以下几点,一个动画光影,一个动画鼠标悬停,一个列表的颜色鼠标悬停差不多就是这样。

平滑阴影

用Sass创建MetaFizzy效果

数据帧

我们会做简单的光影效果,我们做的是让文本阴影颜色逐渐变黑。然后我们需要一个动画,随着时间改变颜色,这个效果需要hsl().因为我们希望Sass代码成为可能。我们将使用一个叫做mixin的关键帧在处理这些文本阴影。首先,纲要。

@mixin…

标签: sass, css, javascript, metafizzy, 效果

阅读更多

帮助自定义选择框样式的Javascript - DropKick.js

DropKick - 自定义你的<select>的样式

在线演示   在线下载

当你想要设计一个页面样式时,没有什么比表单更让人头疼了。而当你设计一个表单的样式时,最让你头疼的就应该非下拉框<select>莫属了。

我们可以使用CSS来给<select>定一个样式,但是只用CSS的话,这里就会有很大的局限性。通常情况下,唯一的可行选择就是用JavaScript来做下拉框的样式。

在这篇文章中,我们使用DropKick - 一个jQuery的插件,来创建我们的下拉列表。它做了什么呢?DropKick <select>列表转换成完全自定义的HTML元素做的下拉列表,而当你选择了一个下拉选项时,这个选项对应的选项值会更新成表单的一部分。好了,现在让我们开始吧!

创建<select>

我们要做的第一件事,是创建一个<select>列表,我们在例子中创建一个一周工作日的列表:

<select id='mySelect'>

标签: jquery插件, html5, css, 自定义样式

阅读更多

如何构建下拉滑动式响应导航菜单

如何构建下拉滑动式响应导航菜单

在线演示 在线下载

经过长时间研究移动响应布局,我花了很大功夫研究不同的UI设计。在页面上的主要亮点往往是网站主导航。用户需要快速访问到内容页面,而且这一点是最基本的,无论是在完整的显示器或较小的移动响应屏幕。

在本教程中,我要演示如何结合CSS3 media queries和jQuery管理滑动导航菜单。链接出现在前端,但下降为一个隐藏的菜单,调整后的大小低于600px。同时将出现一个小的下拉菜单,图标会切换打开和关闭命令。

演示及下载源代码

设定文件

顶部区域包含文件的一小部分,我们用来创建效果。我从由谷歌托管的最新 jQuery库中复制了常规样式表,所有自定义JS函数被存储在外部文件命名为menu.js。

<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type"…

标签: 导航菜单, css3, javascript, 响应式菜单, html, css

阅读更多

创建CSS3警示框渐变动画

创建CSS3警示框渐变动画

在线演示 在线下载

现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画,其中消息警示是非常普遍的。由于默认的JavaScript警示框往往设计不佳和过于侵入式,这导致开发人员想到找出一个更友好的用户界面解决方案。在本教程中,我会解释如何可以将CSS3警示框放在页面主体的顶部,然后, 用户可以通过点击让警示框消失,最终从DOM中删除。作为一个有趣的附加功能,我还提供了按钮,在这里你可以点击到页面顶部追加新的警示框。查看以下示例 演示,进一步了解我们的设计概念。

在线演示--下载源代码

创建CSS3警示框渐变动画

创建页面

首先我们需要命名"index.html"和"style.css"两个文件夹,我引用了由谷歌代码内容分发网络承载的最新 jQuery库。HTML相当简单,因为我们只需要创建一些虚拟文本警示框。所有的JavaScript已添加到页面底部,以减少HTTP请求。

<!doctype html>
<html…

标签: css, jquery, css3, 网页设计, 动画效果

阅读更多

前端性能优化:使用Data URI代替图片SRC

前端性能优化:使用Data URI代替图片SRC

提升页面大小的效率,不仅仅是取决于使用精灵或是压缩代码,给定页面的请求数量在前端性能中也占有了很不小的重量。减少请求可以让你的网站加载更快,而其中一种减少页面请求的方法就是用 Data URI代替图片的src属性:

<!-- 以前的写法 -->
<img src="/images/logo.png" />

<!-- 使用data URI的写法 -->
<img src="data: image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fH…

标签: 前端性能优化, html, css, web前端最佳实践

阅读更多

CSS的未来:游戏的变革Flexbox

css的未来,游戏的变革flexbox

相关阅读:

使用Flexbox布局方式的简单演示

HTML5CSS3给网络开发者提供了新的语法标签,本地动画工具,服务器端字体等等新增功能,这些并不是结束。开发者正苦于为网页设计挖出一条战壕 - 真正的页面排版工具,事实上,即便是最有前途的CSS3现在也仍旧是在地平线上。

虽然它可以创造出令人惊讶的复杂布局,例如CSS悬浮,定位规则,以及有些怪异的JavaScript,但是这些工具中,没有一个是用于明确布局内容的,这就是为什么你想要在浏览器用这些工具实现你想要的布局是如此令人惊讶的复杂。很快的,你就可以嵌入抛出你的悬浮效果用一种更好的方式 - CSS Flexible Box Model,可以简单称为Flexbox。Flexbox可以让你用几行非常简单的代码创建一个复杂的布局 - 不再需要悬浮和"清除悬浮"

也许它更加强大的一点 - 特别是建设响应网站 - Flexbox的order属性允许你在HTML源顺序中创建一个完全独立的布局。基于一些理由,你想要自己的页脚出现在页面上方?没问题,只要将你的页脚CSS设置为顺序1,Flexbox也可以使它垂直居中。

Flexbox早就存在,但是它的规范被重写了,旧的代码就已经过时了。如果你想学习新的语法,…

标签: css, css的未来, flexbox, css3, html5

阅读更多

将CSS CLIP属性应用在:扩展覆盖效果

在线演示

我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡。这个想法是为了实现某种叠加效果,好像它实际上在各个元素的下面。点击其中一个元素将创建一个切断图片的效果,展示将被宽展开的另一层。

更多相关前端技术内容,请关注极客标签

怎样做?

首先,我们要创建一个项目列表,它将看起来像是装满不同城市名称的盒子:

每 一个箱子将包含一个元素(覆盖层),该元素的位置将被固定。实际上这个元素会铺满整个页面,但我们不会看到它,因为透明度opacity将被设置为0。当 我们点击一个盒子,我们将使用clip:rect()修剪各自的内部固定元素。然后我们将动态展示所有叠加的宽度和高度,做为整个视窗:

单击关闭按钮将反转这个效果,并且使列表项的大小最小化并消失。

那么,让我们从HTML开始吧!

标记:

我 们将为这些盒子使用一个无序列表。每个列表项将会有一个图标类和一个可选的"span"类,将控制盒子的宽度。在里面将添加一些文本和覆盖的层。叠加的部…

标签: jQuery, css, html, 扩展覆盖效果, clip属性

阅读更多

SASS(Syntactically Awesome Stylesheets Sass)绝对新手入门教程

SASS(Syntactically Awesome Stylesheets Sass)绝对新手入门教程

什么是SASS?

SASS英文意思是Syntactically Awesome Stylesheets Sass,最早由Hampton Catlin开发和设计。SASS是一种帮助你简化CSS工作流程的方式,帮助你更容易的维和和开发CSS内容。

如果你不明白为什么用SASS,你可以先看看这篇文章 为什么需要将SASS和Compass融入CSS代码开发流程 - CSS编译器帮助你提高CSS开发效率和乐趣

最简单的例子,你是不是经常需要使用"查询"和"替换"功能来修改CSS文件中某一个16进制的颜色?或者是打开一个计算器来计算多列设计中的列宽? SASS介绍了一个新的概念例如,variables,mixins,镶套或者是选择器继承。 从外形上看起来,非常像CSS,但是并没有分割号或者大括号。

看看下面这个简单的CSS:

#skyscraper_ad
{
display: block;
width: 120px;
height: 600px;…

标签: sass, css, 预编译器

阅读更多

帮助你生成响应式布局的CSS模板 - xyCSS

帮助你生成响应式布局的CSS模板 - xyCSS

在线演示

在前面的文章中我们介绍了响应式的网格profound grid,用来帮助你开发固定或者响应式的流动布局设计,如果你希望使用纯CSS生成响应式的布局的话,相信xyCSS将会是一个不错的选择,xyCSS是一个简化的轻量级CSS框架,只使用一个CSS文件,能够帮助你创建流动或者响应式的布局。

这个框架包含了结构和版面字体相关的样式定义,帮助你有效的使用语义化方式管理你的布局结构。

主要特性

  • 通过CSS的media queries来生成响应式的设计
  • 通过使用CSS reset来解决缺省浏览器的样式问题
  • 水平风格的流体网格布局
  • 垂直风格的可缩放印刷版网格风格
  • 不使用class属性定义
  • 为HTML5设计,支持任何标记
  • 通过CSS3加强
  • 动态的media query过渡效果
  • 支持移动,iphone/ipad,桌面大屏幕
  • 支持prent media的网格样式定义
  • 轻量级的单个css文件
  • 开源并且免费使用
  • 拥有完善的文档和在线演示
  • 支持各种不同类库,例如,jQuery插件,兼容wordpress插件等等

如何使用?

标签: css, css模板, 响应式布局, xyCSS

阅读更多

CSS技巧荟萃:了解CSS页面布局和加载流程

CSS技巧荟萃:了解CSS页面布局和加载流程

如果你开发web相关应用或者网站的话,肯定知道CSS对于页面布局的重要性。在本篇CSS技巧中我们将介绍页面加载的流程来帮助你更好的实现页面布局。

介绍

在我们开始正式的介绍页面流程前,我们需要简单了解几种不同类型的html元素,以及它们的缺省显示方式。这里我们主要重点介绍两个类型的元素:

  • block
  • inline

如果大家关心html5的话,你应该知道在HTML5中也包含了几个新的元素,例如,section,article等等,但是仍旧遵循这里我们介绍的显示类型。

inline类型的元素包括: img,span,a等,用来定义文字或者数据,通常显示方式是"同一行显示"。更具体的说就是,如果很多的inline类型的元素在同一行的时候,它们会显示在同一行,直到宽度不够显示了,再转到下一行。例如,如下代码:

<a href="http://gbtags.com">gbtags.com</a>…

标签: 布局, css, css布局

阅读更多

5个能够有效帮助你快速创建超棒CSS3动画效果的类库

如果你开发前端特效的话,肯定会首选javascript类库,例如,jQuery,使用它能够帮助你快速的帮助你生成兼容性相对良好的动画特效。或者,如果你对于兼容性没有太多的要求的话,你可以考虑使用性能更加优良的CSS3动画特效。大家可能还记得我们以前介绍过的 animate.css, Easingsliffect三个超棒的CSS3动画类库吧。今天我们这里总结了5款有效帮助你生成CSS3动画效果的类库和工具,希望大家喜欢!

Animate.css

5个能够有效帮助你快速创建超棒CSS3动画效果的类库

Liffect

5个能够有效帮助你快速创建超棒CSS3动画效果的类库

Easings

5个能够有效帮助你快速创建超棒CSS3动画效果的类库

Animatable

5个能够有效帮助你快速创建超棒CSS3动画效果的类库

Morf

5个能够有效帮助你快速创建超棒CSS3动画效果的类库

使用以上的CSS3动画类库可以帮助你快速的实现基于CSS3的动画,如果你有其它CSS3动画类库,请留言与我们分享 !

标签: css, css3, 动画, 特效, liffect, animate.css, animatable, morf.js

阅读更多

下一页

目录

© Copywrite by gbin1.com, all rights reserved.