首页

关于

推荐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, 页面设计, 扁平效果

阅读更多

创建平滑的HTML5动画

创建平滑的HTML5动画

现代浏览器都内置了专用动画技术,Martin Görner为您展现四种最棒的实例。

创建平滑的HTML5动画

现代移动 操作系统将用户接口动画化,并已达到了电脑端交互的标准--精选流畅的动画,体现出沉浸效果以及支持直观的交互。我们都想当然的认为,可以设置一个列表, 使之带有运动特性,用手指轻轻一推,它就如同有重量和惯性一样运动起来,直到遇到边缘再反弹回来一点。但是,在网络上,我们还达不到这样的效果。

接 受事实吧,现有网上的动画经常被视作UI灾难,还在使用二十年前陈旧的<blink>标签技术。加入Flash有点帮助,不过它缺乏HTML DOM集成,都变成了不美观的800×600分辨率,并且JavaScript DOM操作还有其标志性的5帧/秒(fps)动画率--真是绝望啊!

改变

2013年,现代浏览器内置了专用动画技术,达到60 fps。是时候去忘掉过去,开始构建美妙的UI动画体验了。我将展示四个动画技术,帮助你决定,哪一个更适合你的项目。

CSS3动画--3D

让我们从最简单的声明式技术开始:CSS3。这里不需要JavaScript,存CSS,加上一点现代手段。

CSS通过两种基本属性来声明动画:过渡和动画。过渡属性通知浏览器计算两种状态(由各自CSS定义)间的中间帧。动画通过改变元素CSS触发。比如,当你以编程方式改变它的层,或启动一个:hover…

标签: html, html5, 动画效果, css3动画, css

阅读更多

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, 网页设计, 动画效果

阅读更多

web页面内容优化管理与性能技巧

web页面内容优化管理与性能技巧

回想一下,以前我们不得不花费大量时间去优化页面内容(图片、CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片。然而,随着移动开发的兴起,我们又回到了过去的窘状。网站优化是十分重要的,需要下载的内容少,反应速度快,就能使我 们加载应用程序更快速。

图片:控制在合适的尺寸大小

很多时候我们在不同的网站使用同样的图像,例如一个网上商店,所有产品都 有一个概览图片。打个比方,有三个页面描述产品,第一个页面显示产品清单,第二个页面显示产品细节图,第三个页面显示产品原始大小图。因此,我们需要三种 不同大小的图片。如果使用一个文件放到不同的三个页面上,那么浏览器会自动加载完整大小的图片,就连清单页也是,实际上清单页只需要200×200尺寸的 图片。如果原始文件大小在1MB左右,每页上有十个产品介绍,那么用户就要下载10MB大小的资源。这样做效果不好。如果可以的话,尽量为你的网站不同位…

标签: web页面优化, 页面优化, javascript, web页面, css, jquery

阅读更多

前端性能优化:使用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, 预编译器

阅读更多

HTML5/CSS3系列教程:HTML5 区域(Sectioning)的重要性

HTML5/CSS3系列教程:HTML5 区域(Sectioning)的重要性

不管你以前在web页面布局中如何称呼它们 - "区域"还是"块",我们一直都在布局中将页面分成可视的不同区域。但真正的问题在于我们并没有使用任何正确的工具来实现。一般情况下我们使用典型的网格来划分页头,页面主题,页尾等等区域来实现所谓的页面布局。

在过去的很多年以来,我们都使用DIV来帮助我们划分页面区域,而为此我们定义了很多class来帮助我们有效定义页面上的每一个层次,最新的HTML5最终帮助我们解决了这个问题 - 使用section 元素, 很多人都非常喜欢这个新的HTML成员,因为i终于在HTML标准中给予了我们准确的开发建议,Section增强了整个DOM的可读性,在这篇文章中我 们将介绍这些新的元素,帮助我们了解能够解决什么问题,提供了什么重要的功能并且对于"语义化Web"做出了什么样的贡献!

相关阅读:HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer

开发网站

可能大家还记得使用dreamweaver来开发网站的日子,我们通过拖拽来生成一个典型的页面,如下:

HTML5/CSS3系列教程:HTML5 区域(Sectioning)的重要性

使用dreamweaver只是为了快速的生成图形界面而非真正意义上的信息语义清晰,当然很多人都使用dreamweaver,包括我自己。典型的傻瓜式开发的产物。

web标准

当…

标签: css, css3, html5, html5教程

阅读更多

下一页

标签

© Copywrite by gbin1.com, all rights reserved.