CSS3 之高级动画（5）CSS3铅笔玻璃瓶

效果：

HTML：

  <div class="container"><div class="jar"></div><div class="pencils"><div class="pencil one"></div><div class="pencil two"></div><div class="pencil three"></div></div></div>

CSS：

body {background: #AFE0CE;
}.container {width: 200px;height: 300px;position: relative;margin: 200px auto 0;
}
.jar,
.pencil {position: absolute;
}.jar {width: 200px;height: 220px;background: #A5C4D4;top: 93px;opacity: 0.5;border: 5px solid #A2B9C4;border-radius: 0 0 20px 20px;border-top: none;
}.jar:before,
.jar:after {position: absolute;content: '';background: #FFF;opacity: 0.6;
}.jar:before {top: 76px;left: 184px;width: 7px;height: 120px;border-radius: 100px;
}.jar:after {top: 200px;left: 184px;width: 7px;height: 7px;border-radius: 50%;
}.pencil {z-index: -1;left: 40px;width: 20px;height: 280px;background: #FFBA49;border-radius: 3px;box-shadow: 0 -5px 0 #A6B0B5, 0 -17px 0 #EF5B5B;transform: rotate(-20deg);transform-origin: bottom;
}.pencil:before,
.pencil:after {position: absolute;content: '';
}.pencil:before {top: 280px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 30px solid #B5864D;
}.pencil:after {top: 295px;left: 5px;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 15px solid #000;
}.pencils .one {left: 15px;transform: rotate(12deg);
} .pencils .two {left: 30px;transform: rotate(24deg);
}.pencils .three {left: 45px;transform: rotate(36deg);
}

转载于:https://www.cnblogs.com/houfee/p/10612964.html

CSS3 之高级动画（5）CSS3铅笔玻璃瓶相关推荐

css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构该css3线条波浪动画效果的HTML结构如下: CSS样式然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...
css3 发光字,CSS3发光字动画
html> 无标题文档 *{ margin:; padding:} img{ width:200px; height:200px; border:2px solid #000} .back h5 ...
CSS3 变形过渡动画
文章目录 CSS3 变形过渡动画 transform(变形) 概述 translate() 平移 scale() 缩放 skew() 倾斜 rotate() 旋转 transform-origin ...
css3边框交替动画_用css3实现惊艳面试官的背景即背景动画（高级附源码）
我们传统的前端更多的是用javascript实现各种复杂动画,自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易.这篇 ...
HTML5+CSS3高级动画的应用实践
我们大概都知道css可以用来作平面旋转.扭曲.放大缩小.平移...并且用起来几乎都得心应手. 但目前来说,3D效果的"高级"动画似乎更受欢迎一些,而且我们也确实需要. 这不,前两天 ...
CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
html ie动画效果,css3强大的动画效果animate使用说明及浏览器兼容介绍
好久没更新blog,上次发文(11月8日)到现在刚好一个月,期间项目上的东西比较多,一时觉得时间比较紧,没来得及更新.这个星期总算是告一段落,补上几篇技术性的文章.好吧,第一篇是关于css3动画的使用 ...
css3圆形轨迹动画
<!doctype html> <html lang="en"> <head> <meta char ...
loading动画_超干货 CSS3/SVG Loading动画集合
随着css3实现各种炫酷动画效果越来越流行.今天给大家推荐一些css3和SVG实现loading加载动画效果. 先上一波令人愉悦的动画效果. 怎么样,是不是感觉很nice,那就继续往下看吧.这里为大家 ...

CSS3 之高级动画（5）CSS3铅笔玻璃瓶

CSS3 之高级动画（5）CSS3铅笔玻璃瓶相关推荐

最新文章

热门文章