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>
    
时间: 2024-11-10 07:30:17

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

好玩的WPF第一弹:窗口抖动+边框阴影效果+倒计时显示文字

大家一进到博客就应该看到这张GIF了吧--好吧,今天不是星期一-- 那么就来一起做做这个效果啦!看完记得点赞哦~ 新建一个WPF项目 如果新建WPF项目应该不用我说了吧,在C#下面找找就好了. MainWindow.xaml 在初始的Window下添加如下属性: x:Name="mainWindow" WindowStartupLocation="CenterScreen" WindowState="Normal" WindowStyle=&qu

OpenGL------在Windows系统中显示文字

增加了两个文件,showline.c, showtext.c.分别为第二个和第三个示例程序的main函数相关部分.在ctbuf.h和textarea.h最开头部分增加了一句#include <stdlib.h>附件中一共有三个示例程序:第一个,飘动的“曹”字旗.代码为:flag.c, GLee.c, GLee.h第二个,带缓冲的显示文字.代码为:showline.c, ctbuf.c, ctbuf.h, GLee.c, GLee.h第三个,显示歌词.代码为:showtext.c, ctbuf.

用CSS3做网页中的小三角,以及transition的用法

自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了,css3的部分也看过了,但是觉得讲得不太好,全部都是点到为止.无意中找到了传智播客的视频讲了一些css3的小技巧,今天就写一下用CSS3做网页中的小三角. 大致网上关于小三角的做法无非三种: 直接用背景图片,这个没什么好说的: 用块元素设置宽高都为0,三角的高用一条边框宽度,其他三条边框用dashe

根据html容器大小和显示文字多少调节字体大小

在做html相关的东西的时候经常会遇到这样的问题,容器大小(长x宽)固定,容器包含内容(特指文字)多少不固定,这个时候就让人很苦恼了,将字体大小设置成多少才合适呢?下面看看我的解决思路: 首先要知道网页中所说的字体大小的px指的是字体的宽和高,也就是说在35px显示一个中文字符,该字符占去35x35的空间.知道这个之后,我们就可以想办法动态的根据容器大小和包含内容多少显示文字了. 首先要做的就是计算一个字符串的长短(一个中文字符记1个,一个英文字符记0.5个),我这里使用了简单的判断,当蚊子Un

(原)多线程sdl_ttf显示文字

最近在使用sdl做视频显示,因为需要显示文字,所以就找了sdl的拓展库,sdl_ttf来做文字显示. 这里说明一下:sdl_ttf不支持多线程,官方上面有说明,它不是多线程安全的. 所以当我最初使用sdl_ttf来做多线程显示文字的时候,就会出现崩溃的问题. 崩溃的地方老是出现在:FT_Load_Glyph这个函数. 然后我就发现,原来sdl_ttf不支持多线程,而sdl_ttf下的freetype它其实也是非多线程安全的,也只单线程使用. 同时在查找的过程中,我找到了几个很有用的帖子,这里贴出

SDL显示文字

前面教程里,我们只显示图片,没提到如何显示文字, SDL本身没有显示文字功能,它需要用扩展库SDL_ttf来显示文字.ttf是True Type Font的缩写,ttf是Windows下的缺省字体,它有美观,放大缩小不变形的优点,因此广泛应用很多场合. 使用ttf库的第一件事要从Windows的字库下拷贝出一个字库出来,最好是中文字体,这样可以同时支持英文和中文显示.它一般在c:\windows\fonts 目录下面.比如simhei.ttf 就是仿黑体的字库,将这个文件拷贝到你的源文件目录下.

用CSS3制作的旋转六面体动画

这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back

css3鼠标滑过图片文字动画特效

在线预览   源码下载 css3鼠标滑过图片文字动画特效是一款常用的5种纯css3实现的鼠标滑过图片动画效果.悬停效果有:1.鼠标悬停图片变大文字消失.2.鼠标悬停文字消失.3.鼠标悬停整体旋转.4.鼠标悬停整体旋转放大.5.鼠标悬停整体上升 加入前端爱好者QQ群(123235875) 点击加群,共同交流进度!

CSS3.0(0):text-overflow使用文字超多div的宽度或超过在table中&lt;td&gt;

关键字:text-overflow:ellipsis 语法:text-overflow:clip | ellipsis 取值 clip:默认值.不显示省略标记(...),而是简单的裁切. ellipsis: 当对象内文本溢出时显示省略标记(...). 可惜text-overflow 还只是ie的私有属性而已,也没被收录到w3c标准里. 如果想让某个容器(div或者li或者...块级元素)显示一行文字,当文字内容过多时,不换行,而是出现... 这样写:例如 1 <!DOCTYPE html PUB