文章转载利用border、transparent实现微风
微风效果预览
微风源码
<!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实现微风的更多相关文章
- 利用border和伪类画出三角形 ps:好久没写博客了。。。
有一个半月没有写博客了,这段时间,小哥我经历了自入行前端最为黑暗的时期,迷茫,空虚,不想写代码,不想做研究了.连打游戏都没有兴趣,如同行尸走肉一般.还好,毕业论文的初稿完成后,整个时间段最恶心最难熬的 ...
- 利用border制作三角形原理
网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...
- 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果
1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...
- [转载]利用@media screen实现网页布局的自适应,@media screen and
开始研究响应式web设计,CSS3 Media Queries是入门.Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内 ...
- 文章转载至CSDN社区罗升阳的安卓之旅,原文地址:
文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6720261 前面我们在分析Activity启动 ...
- 转载——利用C#自带组件强壮程序日志
利用C#自带组件强壮程序日志 在项目正式上线后,如果出现错误,异常,崩溃等情况 我们往往第一想到的事就是查看日志 所以日志对于一个系统的维护是非常重要的 声明 正文中的代码只是一个栗子,一个非常简 ...
- 利用border属性制作各种图形。
这是一个比较正常的 但如果我们把宽度和高度去掉呢? 好像看不太出来对吧,我们来给边框加上不同颜色. 看出啥了没,分明就是每个边都是一个三角形啊. 那假如我想要一个朝下的三角形是不是我只要把border ...
- Android性能优化文章转载
今天看到几篇比较好的文章就转了!(链接如下) 转载注明出处:Sunzxyong Android性能优化之Bitmap的内存优化 Android性能优化之常见的内存泄漏 Android最佳实践之Syst ...
- android service文章转载
郑重转载几篇网络文章: Android Service使用 http://www.cnblogs.com/linlf03/archive/2013/06/14/3135273.html Android ...
随机推荐
- MongoDB 维护Replica Set
在每个MongoDB(版本 3.2.9) Instance中,都有一个本地数据库(local),用于存储 Replication 进程的信息和本地数据.local 数据库的特性是:位于local数据库 ...
- EF-InvalidOperation系列
1.InvalidOperation强制转换为值类型 'System.Guid' 失败,因为实例化的值为 null.结果类型的泛型参数或查询必须使用可以为 null 的类型 错误信息: The cas ...
- Java之控制反转和依赖注入
1.简介 依赖注入和控制反转,目的是为了使类与类之间解耦合,提高系统的可扩展性和可维护性,下面通过一个例子来引入这一概念. 2.案例 1)一般情况下的类耦合 Main.java public clas ...
- Android应用中实现系统“分享”接口
在android下各种文件管理器中,我们选择一个文件,点击分享可以看到弹出一些app供我们选择,这个是android系统分享功能,我们做的app也可以出现在这个列表中. 第一步:在Manifest.x ...
- Comet ASP.NET AJAX 示例
最近公司有个项目,里面要求要用到Comet技术,所以就到网上找了一下相关的资料和文章,发现有些人说用Ajax的长轮询比较好,后来就百度了一下,发现comet貌似就是通过ajax演变而来的,也就是com ...
- JavaSE高级之集合类
下面的内容是对java中的集合类进行的总结,过段时间会分享java的网路编程,多线程等内容,欢迎批评指正. 1.Java中的集合是用来存放对象的,即集合是对象的集合,对象是集合的元素,java AP ...
- multipart数据结构
--[boundary]\r\n [headers]\r\n \r\n [content]\r\n --[boundary]\r\n [headers]\r\n \r\n [content]\r\n ...
- geotrellis使用(四)geotrellis数据处理部分细节
前面写了几篇博客介绍了Geotrellis的简单使用,具体链接在文后,今天我主要介绍一下Geotrellis在数据处理的过程中需要注意的细节,或者一些简单的经验技巧以供参考. 一.直接操作本地Geot ...
- 回忆:#define的用法
ANSI C规定:#前可以有空格或者tab,#和指令其余部分之间也可以有空格,可以出现在任何地方,作用域从定义处到文件结尾. 因为预处理开始前,系统会删除反斜线和换行符的组合,故可以把指令扩展到几个物 ...
- 1Z0-053 争议题目解析706
1Z0-053 争议题目解析706 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 706.You execute the following command to set the ...