超酷！纯CSS3烧烤动画实现教程

今天在老外的网站上看到一款很有创意的纯CSS3动画，是模拟烧烤活动的。款动画模拟了一个烧烤架，烧烤架上的食物也都是用纯CSS3绘制而成，没有用一张图片，效果相当逼真。另外一个有意思的是，这个CSS3烧烤架还会冒烟，模拟了烧烤时的情景。

接下来简单分析一下实现的代码，代码主要由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 class="smoke"></div>

</div>

HTML代码很简单，几个div就将整个烧烤架布局完了，当然重点还是CSS代码。

CSS代码：

这里先贴一下烧烤架的CSS代码，主要是实现一张网：

.BBQ {

  border-radius: 50%/20% 70%;

  box-shadow: 40px 48px 0 #333, -32px -49.6px 0 #333, -40px 25.6px 0 #333, 28.8px -36.8px 0 #333, 8px 80px #333, -64px 72px #333, 88px 19.2px #333, -104px 25.6px #333, -88px -25.6px #333, -96px 104px #333, -40px 128px #333, 24px 128px #333, 80px 96px #333, -16px 40px 0 120px #C33, -16px 40px 0 140px #333;

  position: relative;

  width: 40px;

  height: 40px;

  margin: 220px auto;

  background: #333;

}

.BBQ:before, .BBQ:after {

  box-shadow: 18.4px 0 0 #999, 36.8px 0 0 #999, 55.2px 0 0 #999, 73.6px 0 0 #999, 92px 0 0 #999, 110.4px 0 0 #999, 128.8px 0 0 #999, 147.2px 0 0 #999, 165.6px 0 0 #999, 184px 0 0 #999, 202.4px 0 0 #999, 220.8px 0 0 #999, 239.2px 0 0 #999, 257.6px 0 0 #999;

  display: block;

  position: absolute;

  top: -90px;

  left: -130px;

  width: 5px;

  height: 300px;

  background: #999;

}

.BBQ:after {

  -ms-transform: rotate(90deg);

  -webkit-transform: rotate(90deg);

  transform: rotate(90deg);

  top: -220px;

  left:;

}

然后我们对其中一种食物进行绘制，比如说绘制一个玉米：

.BBQ .corn {

  border-radius: 9px;

  box-shadow: 4px -2px 4px rgba(99, 33, 99, 0.3) inset, -10px -2px 10px rgba(99, 33, 99, 0.5) inset, 0 0 5px rgba(33, 33, 33, 0.3);

  position: absolute;

  top: 60px;

  left: -12px;

  width: 35px;

  height: 100px;

  background: #F2D204;

  z-index:;

}

.BBQ .corn:before {

  box-shadow: -1px 2px 2px 0 rgba(33, 33, 33, 0.5) inset;

  position: relative;

  top: 100%;

  display: block;

  margin: 0 auto;

  width: 5px;

  height: 30px;

  background: #F2E6CA;

}

.BBQ .corn:after {

  border-radius: 2px;

  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);

  opacity: 0.2;

  box-shadow: 1px 1px 0 rgba(33, 33, 33, 0.3), 8px 0 0 #F2D204, 9px 1px 0 rgba(33, 33, 33, 0.5), 16px 0 0 #F2D204, 17px 1px 0 rgba(33, 33, 33, 0.5), 24px 0 0 #F2D204, 25px 1px 0 rgba(33, 33, 33, 0.2), 0 8px 0 #F2D204, 1px 9px 0 rgba(33, 33, 33, 0.3), 8px 8px 0 #F2D204, 9px 9px 0 rgba(33, 33, 33, 0.5), 16px 8px 0 #F2D204, 17px 9px 0 rgba(33, 33, 33, 0.5), 24px 8px 0 #F2D204, 25px 9px 0 rgba(33, 33, 33, 0.2), 0 16px 0 #F2D204, 1px 17px 0 rgba(33, 33, 33, 0.3), 8px 16px 0 #F2D204, 9px 17px 0 rgba(33, 33, 33, 0.5), 16px 16px 0 #F2D204, 17px 17px 0 rgba(33, 33, 33, 0.5), 24px 16px 0 #F2D204, 25px 17px 0 rgba(33, 33, 33, 0.2), 0 24px 0 #F2D204, 1px 25px 0 rgba(33, 33, 33, 0.3), 8px 24px 0 #F2D204, 9px 25px 0 rgba(33, 33, 33, 0.5), 16px 24px 0 #F2D204, 17px 25px 0 rgba(33, 33, 33, 0.5), 24px 24px 0 #F2D204, 25px 25px 0 rgba(33, 33, 33, 0.2), 0 32px 0 #F2D204, 1px 33px 0 rgba(33, 33, 33, 0.3), 8px 32px 0 #F2D204, 9px 33px 0 rgba(33, 33, 33, 0.5), 16px 32px 0 #F2D204, 17px 33px 0 rgba(33, 33, 33, 0.5), 24px 32px 0 #F2D204, 25px 33px 0 rgba(33, 33, 33, 0.2), 0 40px 0 #F2D204, 1px 41px 0 rgba(33, 33, 33, 0.3), 8px 40px 0 #F2D204, 9px 41px 0 rgba(33, 33, 33, 0.5), 16px 40px 0 #F2D204, 17px 41px 0 rgba(33, 33, 33, 0.5), 24px 40px 0 #F2D204, 25px 41px 0 rgba(33, 33, 33, 0.2), 0 48px 0 #F2D204, 1px 49px 0 rgba(33, 33, 33, 0.3), 8px 48px 0 #F2D204, 9px 49px 0 rgba(33, 33, 33, 0.5), 16px 48px 0 #F2D204, 17px 49px 0 rgba(33, 33, 33, 0.5), 24px 48px 0 #F2D204, 25px 49px 0 rgba(33, 33, 33, 0.2), 0 56px 0 #F2D204, 1px 57px 0 rgba(33, 33, 33, 0.3), 8px 56px 0 #F2D204, 9px 57px 0 rgba(33, 33, 33, 0.5), 16px 56px 0 #F2D204, 17px 57px 0 rgba(33, 33, 33, 0.5), 24px 56px 0 #F2D204, 25px 57px 0 rgba(33, 33, 33, 0.2), 0 64px 0 #F2D204, 1px 65px 0 rgba(33, 33, 33, 0.3), 8px 64px 0 #F2D204, 9px 65px 0 rgba(33, 33, 33, 0.5), 16px 64px 0 #F2D204, 17px 65px 0 rgba(33, 33, 33, 0.5), 24px 64px 0 #F2D204, 25px 65px 0 rgba(33, 33, 33, 0.2), 0 72px 0 #F2D204, 1px 73px 0 rgba(33, 33, 33, 0.3), 8px 72px 0 #F2D204, 9px 73px 0 rgba(33, 33, 33, 0.5), 16px 72px 0 #F2D204, 17px 73px 0 rgba(33, 33, 33, 0.5), 24px 72px 0 #F2D204, 25px 73px 0 rgba(33, 33, 33, 0.2), 0 80px 0 #F2D204, 1px 81px 0 rgba(33, 33, 33, 0.3), 8px 80px 0 #F2D204, 9px 81px 0 rgba(33, 33, 33, 0.5), 16px 80px 0 #F2D204, 17px 81px 0 rgba(33, 33, 33, 0.5), 24px 80px 0 #F2D204, 25px 81px 0 rgba(33, 33, 33, 0.2), 0 88px 0 #F2D204, 1px 89px 0 rgba(33, 33, 33, 0.3), 8px 88px 0 #F2D204, 9px 89px 0 rgba(33, 33, 33, 0.5), 16px 88px 0 #F2D204, 17px 89px 0 rgba(33, 33, 33, 0.5), 24px 88px 0 #F2D204, 25px 89px 0 rgba(33, 33, 33, 0.2);

  position: absolute;

  top: 2px;

  left:;

  display: block;

  width: 22%;

  height: 6%;

}

再比如绘制一个虾：

.BBQ .shrimp {

  border-radius: 60%/30% 40% 10% 70%;

  background-image: -webkit-radial-gradient(circle at center right, rgba(0, 0, 0, 0) 67%, #cc4a04 68%, #ef6921 74%, #ef6921 85%, rgba(33, 33, 33, 0.2) 86%, rgba(0, 0, 0, 0) 90%);

  background-image: radial-gradient(circle at center right, rgba(0, 0, 0, 0) 67%, #cc4a04 68%, #ef6921 74%, #ef6921 85%, rgba(33, 33, 33, 0.2) 86%, rgba(0, 0, 0, 0) 90%);

  position: absolute;

  top: -35px;

  left: -10px;

  display: block;

  width: 86px;

  height: 70px;

  z-index:;

}

.BBQ .shrimp:before {

  -ms-transform: rotate(24deg);

  -webkit-transform: rotate(24deg);

  transform: rotate(24deg);

  border-radius: 85% 85% 50% 50%/120% 120% 50% 50%;

  box-shadow: 1px -35px 0 -7px #EF6921, 0 -36px 1px -7px rgba(33, 33, 33, 0.2), 5px -23px 0 -8px #EF6921, 5px -23px 1px -7px rgba(33, 33, 33, 0.2), 0 -2px 0 0 rgba(222, 222, 222, 0.3) inset, -2px 1px 2px rgba(33, 33, 33, 0.2);

  position: absolute;

  top: -24px;

  left: 15px;

  display: block;

  width: 18px;

  height: 45px;

  background: #EF6921;

}

.BBQ .shrimp:after {

  border-radius: 50%;

  background-image: -webkit-radial-gradient(circle at top center, #ef6921 35%, rgba(0, 0, 0, 0) 36%), -webkit-radial-gradient(circle at center left, #ef6921 27%, #cc4a04 37%, rgba(0, 0, 0, 0) 38%);

  background-image: -webkit-radial-gradient(top center, circle, #ef6921 35%, rgba(0, 0, 0, 0) 36%), -webkit-radial-gradient(circle at center left, #ef6921 27%, #cc4a04 37%, rgba(0, 0, 0, 0) 38%);

  background-image: radial-gradient(circle at top center, #ef6921 35%, rgba(0, 0, 0, 0) 36%), radial-gradient(circle at center left, #ef6921 27%, #cc4a04 37%, rgba(0, 0, 0, 0) 38%);

  box-shadow: -13px -86px 0 -9px rgba(222, 222, 222, 0.5), -14px -85px 0 -7px #212121;

  position: absolute;

  top: 60px;

  left: 25px;

  display: block;

  width: 22px;

  height: 22px;

}

其他食物的CSS代码大家可以下载源码研究，也可以查看演示效果。

超酷！纯CSS3烧烤动画实现教程的更多相关文章

纯CSS3超酷3D旋转立方体动画特效
简要教程这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...
分享9款最新超酷HTML5/CSS3应用插件
新的一周开始了,小编继续要为大家分享实用超酷的HTML5应用,今天分享的这9款最新HTML5/CSS3应用你一定会很喜欢,一起来看看. 1.HTML5 Canvas模拟衣服撕扯动画超级逼真今天又要 ...
超可爱纯CSS3实现的小猪、小老鼠、小牛
原文:超可爱纯CSS3实现的小猪.小老鼠.小牛利用纯CSS3绘制一些人物.动物.风景已经不是一件新鲜的事情了,主要是利用CSS3可以让直线变成任意的曲线,于是简单的矢量图形绘制对CSS3来说就小菜 ...
纯CSS3冒泡动画按钮实现教程
这款CSS3动画按钮非常的有创意,鼠标在滑过按钮时并不像其他按钮那样仅仅改变按钮的背景颜色,而是出现很酷的冒泡动画.这么惊艳的CSS3动画按钮,这篇文章主要将按钮实现的过程和代码分享给大家,希望能给在 ...
纯CSS3带动画效果导航菜单
随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...
纯css3云彩动画效果
效果描述: 纯CSS3实现的云彩动画飘动效果非常逼真实用使用方法: 1.将body中的代码部分拷贝到你的页面中 2.引入对应的CSS文件即可
纯css3天气动画场景特效
CSS3超强大,以下是纯用CSS3+HTML实现的场景效果图: 查看效果:http://hovertree.com/h/bjaf/cssrotate.htm css3 3d展示中rotate()介绍与 ...
纯CSS3垂直动画菜单
在线演示本地下载
8个超炫酷的纯CSS3动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...

随机推荐

Python图形编程探索系列-06-按钮批量生产函数
设计任务初步设计一个批量生产按钮的函数,根据需要的按钮数量,自动生成多少按钮. 函数设计 import tkinter as tk # 导入tkinter库 root = tk.Tk() # 建立程 ...
SpringMVC拷贝属性
A a = new A(); B b = new B(); //将A的属性拷贝到B上 BeanUtils.copyProperties(a,b)
用Canvas做视频拼图
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 几天前同事给我看了一个特效,是一个拼图游戏,不同的是,拼图里的是动画.他让我看下做个DEMO,于是就自己整了一会,也确实不难.用canva ...
json与xml数据输出类
class Response { /** * 按json方式输出通信数据 * @param integer $code 状态码 * @param string $message 提示信息 * @par ...
封装PHP验证码方法
/** * 生成验证码 * @param integer $width 图片宽度 * @param integer $height 图片高度 * @param string $type 验证码类型 * ...
(58)Wangdao.com第九天_JavaScript 对象的基本操作
对象的基本操作创建对象 var 对象名 = new Object(); // new 函数; 称为构造函数,专门用来创建对象的函数 var god = 给对象增加属性删除对象 ...
预编译头文件来自编译器的早期版本，或者预编译头为 C++ 而在 C 中使用它(或相反)(转)
用VC++ 2008 编写C语言程序,编译出现错误: 预编译头文件来自编译器的早期版本,或者预编译头为 C++ 而在 C 中使用它(或相反) 解决方法: 建工程时建立空项目或者在项目设置里关闭预编 ...
ConcurrentHashMap 的实现原理
概述我们在之前的博文中了解到关于 HashMap 和 Hashtable 这两种集合.其中 HashMap 是非线程安全的,当我们只有一个线程在使用 HashMap 的时候,自然不会有问题,但如果涉 ...
【转】Angular之constructor和ngOnInit差异及适用场景
原文:http://liuwenzhuang.github.io/2016/03/04/angular2-constructor-versus-ngOnInit.html -------------- ...
hash bucket
什么是bucket bucket的英文解释: Hash table lookup operations are often O(n/m) (where n is the number of objec ...

超酷！纯CSS3烧烤动画实现教程

HTML代码：

CSS代码：

超酷！纯CSS3烧烤动画实现教程的更多相关文章

随机推荐

热门专题