首页

关于

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

阅读更多

如何检测移动设备方向的变化

如何检测移动设备方向的变化

除非你的应用程序限定了只在移动设备直立状态或水平状态下使用,一般情况下,你需要调整一些设定。即便你设计的布局流畅时尚,你可能需要改变某些编程代码。通常有以下一些小的策略用于检测移动设备方向的改变。

orientationchange事件

你等待一个移动API,一个简单的窗口orientationchange事件:

// 监听方向的改变
window.addEventListener("orientationchange", function() {
  // 宣布新方向的数值
  alert(window.orientation);
}, false);

发生改变的时候, window.orientation属性就改变。值为0表示直立, 90表示设备水平旋转到左边, -90表示设备水平旋转到右边。

调整大小事件

有些设备不支持orientationchange事件,但可以触发resize事件:

// 监听调整大小的改变
window.addEventListener("resize",…

标签: 移动设备, css3, javascript, web最佳实践, 检测移动设备方向的变化

阅读更多

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

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

在线演示 在线下载

经过长时间研究移动响应布局,我花了很大功夫研究不同的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, 网页设计, 动画效果

阅读更多

15个CSS3和jQuery的超棒页面过渡效果教程

15个CSS3和jQuery页面转换教程

CSS3jQuery从根本上改变了网页设计和程序开发。通过CSS3jQuery,设计员和开发者不需要太多的精力或编码,就可以创造出非常 美丽令人叹惊的效果,同时还可以令你快速完成任务。CSS3jQuery最大的方便之处在于网上有大量的不同元素效果的展示教程,这一点使得学习新技巧 和创造一些很棒的内容更加轻松。网上有很多页面过渡效果展示教程,给页面转换添加漂亮的过渡效果。这些转换效果可以相当夸张和花俏,也可以非常简单朴实。 这些效果会使得你的网页更加漂亮醒目。本章我们将展示一些运用CSS3jQuery制作出非常棒的页面转换效果,看看吧,选择自己最喜欢的加以运用,为 自己创造点什么吧。

1、全屏布局页转换DownloadDemo

一种简单响应的好看的页面转换。做法是首先显示四个项目然后加以扩展,给内置项添加进页面。

 15个CSS3和jQuery页面转换教程

 2、页面转换DownloadDemo

使用CSS动画达到网页过渡特效的展示图集。

 15个CSS3和jQuery页面转换教程

3、Pesudo动画和过渡…

标签: css3, jquery, 布局特效, 页面转换, 教程, 过渡效果

阅读更多

前端性能优化:尽可能使用CSS动画

前端性能优化:尽可能使用CSS动画

网站设计对美观特性和可配置元素动画的大量需求,使得一些JavaScript类库,如jQuery,MooTools大量的被使用。尽管现在浏览器支持CSS的 transformationkeyframe所 做的动画,现在仍有很多人使用JavaScript制作动画效果,但是实际上使用CSS动画比起JavaScript驱动的动画效率更高。CSS动画同时 需要更少的代码。很多的CSS动画是用GPU处理的,因此动画本身很流畅,当然你可以使用下面这个简单的CSS强制使你的硬件加速:

.myAnimation {
    animation: someAnimation 1s;
    transform: translate3d(0, 0, 0); /* 强制硬件加速 */
}

tansform:transform(0,0,0)在不会影响其他动画的同时将通话送入硬件加速。在不支持CSS动画的情况下(IE8及以下版本的浏览器),你可以引入JavaScript动画逻辑:

<!--[if…

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

阅读更多

CSS3实现超酷的图像动画变换特效

用CSS3实现图像动画变换

在线演示 在线演示 本地下载 

今天我们想要分享一些实验阶段的3D图像变换效果给大家,主要使用了CSS3 3D动画和jQuery

怎样起作用的?

给定一组图片,我们使用te-cover将添加第一个图片到包装器中。使用JavaScript控制过渡类,显示在te-transition包装器中的图片。这是第一个例子:

<div id="te-wrapper" class="te-wrapper">
<div class="te-images">
<img src="images/1.jpg"/>
<img src="images/2.jpg"/>
<img src="images/3.jpg"/>
<img src="images/4.jpg"/>

标签: css3, 动画效果, 动画转换, 3D, 3D动画

阅读更多

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

阅读更多

如何建立一个样式新颖的CSS3搜索框

如何建立一个样式新颖的CSS3搜索框

在线演示

搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它。无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框?

在今天的文章中,大家将会学到如何使用伪元素来创建一个超酷的CSS3搜索框。当然在开始介绍前你也可以 下载源代码或者查看在线演示

HTML举例:

正如接下来你所看到的,标记很少,并且很容易理解:

<form class="form-wrapper cf">
        <input type="text" placeholder="Search here..." required>
        <button type="submit">Search</button>
</form> 

你可能注意到了HTML5的特殊属性,像placeholder和required,简介如下:

.placeholder-基本上,这个属性的作用在于当文本框获得焦点之前,先在文本框里显示一个域的信息,直到获得焦点后,域的信息被隐藏。

.required-这个属性说明了当前元素是表单提交中的一个必需属性。

HTML5也给我们带来了一个新的type属性:type="search"。

小贴士:HTML…

标签: css3, 搜索框, search box, 创建搜索框

阅读更多

帮助开发者快速创建响应式布局的Boilerplate - Responsive Boilerplate

帮助开发者快速创建响应式布局的Boilerplate - Responsive Boilerplate

在线演示

如果你需要开发一个支持不同客户端设备的应用或者网站的话,使用一些现成的响应式框架或者模板绝对是不错的选择,在这篇文章中,我们将介绍一款超棒的响应式布局Boilerplate - Responsive Boilerplate

这个模板使用CSS3来支持响应式设计,超轻量级,只有2kb大小。这个模板拥有一个容器 + 12个列的网格,支持图片的内容有图片,视频,媒体等等。

同时,下载包含了一个PSD网格,Sublime的代码片段和响应式导航变化的javascript。你只需要稍微修改就能够快速的生成一个响应式的网页。

网站地址:http://responsiveboilerplate.com/

标签: responsive boilerplate, 响应式布局, 响应式, responsive, css3

阅读更多

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教程

阅读更多

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

阅读更多

超棒片状过渡效果的jQuery图片幻灯插件 - jq-tiles

超棒片状过渡效果的jQuery图片幻灯插件 - jq-tiles

在线演示  本地下载

今天介绍一款拥有不同片状动画过渡效果的jQuery插件-jq-tiles,使用它能够帮助你生成基于CSS3的片状动画效果。同时支持自定义选项:

  • 效果选择
  • x,y坐标片状数量选择
  • 速度
  • 其它

支持图片缩略图预览功能,并且拥有图片导航功能,最后针对每张图片还支持不同类型的回调方法,如果你需要一个高性能的动画幻灯,使用CSS3的jq-tiles肯定是一个不错的选择。当然,如果你还需要支持臭名远扬的老版本IE的话,可能会让你失望了,希望大家喜欢这个插件!

标签: css3, jq-tiles, jQuery, jquery插件

阅读更多

下一页

标签

© Copywrite by gbin1.com, all rights reserved.