标签归档:CSS3动画

CSS3鼠标悬停图片动画 多种文字动画效果

这是一款基于CSS3的图片鼠标悬停动画,这款CSS3应用的特点是当鼠标移动至图片上方时,在图片上将会出现自定义的动画,可以是文字动画、图标动画等。另外,这款CSS3鼠标悬停图片动画的形式非常丰富,基本可以满足你的需求。

css3-image-mouse-hover

在线演示源码下载

下面我们一起来看看实现这款CSS3鼠标悬停动画的过程和代码,代码主要由HTML和CSS组成。

HTML代码:

<div class="grid">
			<figure class="effect-lily">
				<img src="img/12.jpg" alt="img12"/>
				<figcaption>
					<div>
						<h2>Nice <span>Lily</span></h2>
						<p>Lily likes to play with crayons and pencils</p>
					</div>
					<a h[......]

阅读全文>>

纯CSS3实现眨眼动画 超逼真

我们在不久前分享过很多纯CSS3实现的人物和动物动画,每一款动画的效果都非常不错。今天我们要分享一个纯CSS3实现的眨眼动画,其动画效果超级逼真,拿它来做动画人物的眼睛非常适合,这款CSS3眨眼动画完全用CSS3绘制,并没有使用图片。

html5-css3-eyes

在线演示源码下载

来源:FlyLee云飞

纯CSS3实现多种箭头绘制及动画

今天要介绍的这款CSS3应用也非常实用,利用它可以用纯CSS3实现各种箭头的绘制,包括左右箭头、上下箭头以及各个方向的转弯箭头,另外还有一款更酷的CSS3箭头动画特效,可以用来做Loading加载动画。这么多箭头,你可以任选一个应用到项目中去。

pure-css3-arrow

在线演示源码下载

纯CSS3天气动画图标

这是一款基于纯CSS3的天气动画图标,利用CSS3特性,我们在这里绘制了7个关于天气的图标,并且每一个图标都有一套代表当前天气的动画特效,比如下雨天气,就会有下雨的动画,下雪也是如此。这些CSS3天气图标可以应用在关于天气预报的应用中。

pure-css3-weather-icon

在线演示源码下载

纯CSS3实现3D效果iPhone 6动画

iPhone 6刚发布不久,今天我们就用纯CSS3来把iPhone 6的外观简单地绘制出来,记得是用纯CSS3实现的哦,没有用一张图片。由于CSS3特性的运用,整个iPhone 6手机边框带有阴影,很有立体3D的视觉效果。

css3-iphone6

在线演示源码下载

纯CSS3模拟烧烤动画

今天要来分享一款非常有创意的CSS3动画,这款动画模拟了一个烧烤架,烧烤架上的食物也都是用纯CSS3绘制而成,没有用一张图片,效果相当逼真。另外一个有意思的是,这个CSS3烧烤架还会冒烟,模拟了烧烤时的情景。

pure-css3-bbq

在线演示源码下载

接下来简单分析一下实现的代码,代码主要由HTML和CSS组成。

HTML代码:

<div class="BBQ">
  <div class="meat"></div>
  <div class="sausage"></div>
  <div class="corn"></div>
  <div class="waterbamboo"></div>
  <div class="shrimp"></div>
  <div class="clams"></div>
  <div class="greenpepper"></div>
  <div cla[......]

阅读全文>>

纯CSS3实现人物跑步动画

还记得之前给大家分享的这款CSS3人物行走动画吗?动画效果确实棒极了。今天我们再分享一款基于CSS3的人物跑步动画,跑步动画非常简单,跑步的人物仅仅用一些线条勾勒出来,通过这些线条的弯曲和移动形成跑步的动画效果。

pure-css3-running

在线演示源码下载

下面我们来一起分析一下实现这个跑步动画的代码和过程,代码主要由HTML和CSS组成。

HTML代码:

<div class='container'>
  <div class='person'>
    <div class='head'></div>
    <div class='part arm one'></div>
    <div class='part arm two'></div>
    <div class='torso'></div>
    <div class='part leg one'></div>
    <div class='part foot[......]

阅读全文>>

纯CSS3实现超酷的磁带动画

记得之前分享过一款HTML5磁带式古典播放器,效果相当震撼。这次我们要用纯CSS3来实现一个超酷的磁带动画特效。首先用纯CSS3绘制了一个磁带的外观,还是相当逼真的,然后用CSS3的动画属性实现了磁带的旋转,就像在播放歌曲一样,如果配合HTML5的音频播放功能,就和那个磁带播放器差不多了。

css3-cassette-tape

在线演示源码下载

纯CSS3创意Loading加载动画

今天要来分享一款非常具有创意的CSS3 Loading动画效果,整个Loading动画就像一部开足马力的发动机,在不停地循环工作,看上去Loading动画样式十分新颖。之前我们也分享过一些创意型的Loading动画,比如:HTML5 Canvas发光Loading动画

css3-robot-loading-animation

在线演示源码下载