微风效果预览

微风源码

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>微风</title>

         <style type="text/css">

         h1 {

             font-size: 25px;

         }

         .breeze-container{

               position: absolute;

               top: 50%;left: 50%;

               width:200px;height:260px;

               transform: translate(-50%, -50%);

               text-align:center;

               font-size:200%;

               color:#fff;

               background:#00BBFF;

               border-radius:5px;

         }

         .breeze-container:after{

               content:"";

               position:absolute;

               top:58%;

               left:50%;

               transform: translate(-50%, -50%);

               width:6px;

               height:70px;

               background:#fff;

         }

         .breeze {

               position:absolute;

               top: 30%;

               left: 50%;

               transform: translate(-50%, -50%) rotate(1deg);

               border-bottom:60px solid #fff;

               border-left:5px solid transparent;

               border-right:5px solid transparent;

               animation: windmill 12s infinite linear;

               transform-origin:50.5% 62px;

         }

         .breeze:before {

               position:absolute;

               top: 75px;left: -59px;

               content:"";

               border-right:60px solid #fff;

               border-top:5px solid transparent;

               border-bottom:5px solid transparent;

               transform:rotate(-30deg);

         }

         .breeze:after{

               position:absolute;

               top: 75px;left: -1px;

               content:"";

               border-left:60px solid #fff;

               border-top:5px solid transparent;

               border-bottom:5px solid transparent;

               transform:rotate(30deg);

         }

         @keyframes windmill{

               0%{

                 transform: translate(-50%, -50%) rotate(0deg);

               }

               100%{

                 transform: translate(-50%, -50%) rotate(360deg);

               }

         }

         </style>

     </head>

     <body>

         <hgroup class="breeze-container">

             <h1>.breeze</h1>

             <div class="breeze"></div>

         </hgroup>

     </body>

 </html>

文章转载 css3奇思妙想

文章转载利用border、transparent实现微风的更多相关文章

  1. 利用border和伪类画出三角形 ps：好久没写博客了。。。

    有一个半月没有写博客了,这段时间,小哥我经历了自入行前端最为黑暗的时期,迷茫,空虚,不想写代码,不想做研究了.连打游戏都没有兴趣,如同行尸走肉一般.还好,毕业论文的初稿完成后,整个时间段最恶心最难熬的 ...

  2. 利用border制作三角形原理

    网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...

  3. 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果

    1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...

  4. [转载]利用@media screen实现网页布局的自适应,@media screen and

    开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...

  5. 文章转载至CSDN社区罗升阳的安卓之旅，原文地址：

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6720261 前面我们在分析Activity启动 ...

  6. 转载——利用C#自带组件强壮程序日志

    利用C#自带组件强壮程序日志   在项目正式上线后,如果出现错误,异常,崩溃等情况 我们往往第一想到的事就是查看日志 所以日志对于一个系统的维护是非常重要的 声明 正文中的代码只是一个栗子,一个非常简 ...

  7. 利用border属性制作各种图形。

    这是一个比较正常的 但如果我们把宽度和高度去掉呢? 好像看不太出来对吧,我们来给边框加上不同颜色. 看出啥了没,分明就是每个边都是一个三角形啊. 那假如我想要一个朝下的三角形是不是我只要把border ...

  8. Android性能优化文章转载

    今天看到几篇比较好的文章就转了!(链接如下) 转载注明出处:Sunzxyong Android性能优化之Bitmap的内存优化 Android性能优化之常见的内存泄漏 Android最佳实践之Syst ...

  9. android service文章转载

    郑重转载几篇网络文章: Android Service使用 http://www.cnblogs.com/linlf03/archive/2013/06/14/3135273.html Android ...

随机推荐

  1. Sublime Text3 Package Control 在菜单栏中不显示

    前言 最近由于在 Sublime Text3 下配置了React 开发环境,最近也更新了Sublime Text3 的版本,由此装上了很多的插件.今天打开Sublime 想要通过 `Package C ...

  2. Android-webview和js互相调用

    Android-webview和js互相调用 Android 和 H5 都是移动开发应用的非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的 ...

  3. LINQ系列：LINQ to SQL Concat/Union

    1. Concat 单列Concat var expr = (from p in context.Products select p.ProductName) .Concat( from c in c ...

  4. Entity Framework Code First使用DbContext查询

    DbContext.DbSet及DbQuery是Entity Framework Code First引入的3个新的类,其中DbContext用于保持数据库会话连接,实体变化跟踪及保存,DbSet用于 ...

  5. 深入学习jQuery动画队列

    前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...

  6. ES6学习--搭建环境

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发 ...

  7. php广告图片循环播放 幻灯片效果

    <!DOCTYPE> <html> <head> <meta http-equiv="content-type" content=&quo ...

  8. java 大数据处理类 BigDecimal 解析

    这两天,由于我的必修课概率论里经常要用到排列组合的计算,感觉很麻烦,加上现代智能手机的计算器是没有这方面功能的. 所以,就自己动手写了个安卓的 排列组合 计算器,用了一天,发现有很大的问题,阶乘达百亿 ...

  9. 云计算之路-阿里云上：从ASP.NET线程角度对“黑色30秒”问题的全新分析

    在这篇博文中,我们抛开对阿里云的怀疑,完全从ASP.NET的角度进行分析,看能不能找到针对问题现象的更合理的解释. “黑色30秒”问题现象的主要特征是:排队的请求(Requests Queued)突增 ...

  10. 实验记录：Oracle redo logfile的resize过程

    实验记录:Oracle redo logfile的resize过程. 实验环境:RHEL 6.4 + Oracle 11.2.0.3 单实例 文件系统 实验目的:本实验是修改redo logfile的 ...