Css3做的旋转显示文字和角度的变化

Css:
.spinner{
width:245px;
height:245px;
position:relative;
}
.coly{
border-radius:130px;
font-size:19px;
background:#333;
border:10px solid #ecab18;
border-right-color:#1ad280;
border-bottom-color:#1ad280;
width:230px;
height:230px;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.imgT{
position:absolute;
top: 10px;
left: 10px;
border-radius:120px;
width:230px;
overflow: hidden;
height:230px;
}
.spinner:hover .coly{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.info-back{
opacity: 0;
display: block;
width: 100%;
position:absolute;
top:0;
color:#fff;
height: 100%;
text-align: center;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.info-back:hover{
opacity:1;
}
.info-back h3{
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 55px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.info-back p{
color: #bbb;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
html代码: <div class="spinner">
<div class="coly"> </div> <div class="imgT">
<img src="http://www.gbtags.com/gb/networks/uploads/0f8c4c4d-f612-4476-bfa4-fa49a461fb08/ihover-gh-pages/dist/images/assets/2.jpg"/>
</div> <div class="info-back"> <h3>Heading here</h3>
<p>Description goes here</p> </div> </div>
Css3做的旋转显示文字和角度的变化的更多相关文章
- 【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动
前言:之前我有写过CSS3的transform这一这特性,对于它的用法,还不是很透彻,今天补充补充,呵呵 你懂的,小司机准备开车了. a)再提一提transform的四个属性 ①旋转--->ro ...
- OpenGL------在Windows系统中显示文字
增加了两个文件,showline.c, showtext.c.分别为第二个和第三个示例程序的main函数相关部分.在ctbuf.h和textarea.h最开头部分增加了一句#include <s ...
- 利用HTML5 与CSS3 做的放大镜
利用HTML5 与CSS3 做的放大镜 html结构 <div class="wrap"> <div class="move"> < ...
- 好玩的WPF第一弹:窗口抖动+边框阴影效果+倒计时显示文字
原文:好玩的WPF第一弹:窗口抖动+边框阴影效果+倒计时显示文字 版权声明:转载请联系本人,感谢配合!本站地址:http://blog.csdn.net/nomasp https://blog.csd ...
- HTML5+CSS3制作无限滚动与文字跳动效果
㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例 前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...
- 根据html容器大小和显示文字多少调节字体大小
在做html相关的东西的时候经常会遇到这样的问题,容器大小(长x宽)固定,容器包含内容(特指文字)多少不固定,这个时候就让人很苦恼了,将字体大小设置成多少才合适呢?下面看看我的解决思路: 首先要知道网 ...
- 用Js+css3实现图片旋转,缩放,裁剪,滤镜
还是前端图片的老话题,花了半天时间,东拼西凑,凑出个demo,优点在于代码少,核心代码就6行,目前刚做了旋转,缩放,裁剪,滤镜要js做,网络上也有现成的代码, 但是想做到自定义的滤镜咋办呢?这还要从底 ...
- 【学】CSS3基础实例1 - 用CSS3做网页中的小三角,以及transition的用法
自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...
- 用CSS3制作的旋转六面体动画
这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back
随机推荐
- 关于LEA指令(单周期就可以做简单的算术计算)
堆栈种分配的局部变量所谓的“标号”,你以为是什么?(都是那些该死的宏惹的祸,大家要都是老老实实写代码,就不会有这些疑问了). 比如你用local在栈上定义了一个局部变量LocalVar,你知 ...
- Delphi TdxBarmanager
在 Form 上放一个 BarManager鼠标右键它,可以建立一个 MainToolBar,鼠标右键MainToolBar,建什么随便你选.只不过,最后设置一下 BarManager 的 Image ...
- InstallShield: cannot extract icon with index 0错误解决方案
在VS2012打包过程中,遇到这个错误,困扰我好几天,后来通过谷歌找到解决方案,如下: Expand the deploy solution (+) on the right panel (Solut ...
- CSS padding margin border属性详解【转载】
本文转载自:http://www.cnblogs.com/linjiqin/p/3556497.html ,感谢相关博主. 图解CSS padding.margin.border属性 W3C组织建议把 ...
- 《算法问题实战策略》-chaper14-整数论
Lucas定理: 在组合计数问题中,我们常面临组合数C(n,m)过大而无法直接计算的困境,那么这里的Lucas定理给出了一个较大组合数进行取余运算的一种递归算法. 什么是Lucas定理? Lucas定 ...
- java操作xml方式比较与详解(DOM、SAX、JDOM、DOM4J)
java中四种操作(DOM.SAX.JDOM.DOM4J)xml方式的比较与详解 1)DOM(JAXP Crimson解析器) DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准. ...
- error in invoking target 'mkldflags ntcontab.o nnfgt.o' of makefile
error in invoking target 'mkldflags ntcontab.o nnfgt.o' of makefile 今天是2013-08-04,在安装oracle11g r2 数据 ...
- web前端面试试题总结---css篇
CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...
- motan源码分析七:序列化
motan的序列化支持两种协议,一种是json,另一种是hessian2.主要涉及到的类和接口是是:FastJsonSerialization.Hessian2Serialization.Serial ...
- linux命令详解--tcpdump
工作中一直在用tcpdump,感觉非常方便,今天心血来潮百度了一下tcpdump的用法,才发现原来还有这么多强大的功能自己都不知道,那叫一个汗啊. 以此文作为备份,记录一些新知道的用法,各位网友谁有新 ...