html头像动画,用CSS3实现头像旋转效动画

这次给大家带来用CSS3实现头像旋转效动画，用CSS3实现头像旋转效动画的注意事项有哪些，下面就是实战案例，一起来看一下。

鼠标未放上效果：

鼠标放上之后旋转效果：

transition: all 2.0s;表示所有的属性变换在2秒内完成；

transform: rotate(360deg);表示图片旋转360度。

img{

border: #000 solid 2px;

display: block;

margin: 50px auto;

border-radius: 50%;

transition: all 2.0s;

}

img:hover{

transform: rotate(360deg);

}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

html头像动画,用CSS3实现头像旋转效动画相关推荐

html帧动画效果,CSS3 animation实现逐帧动画效果
这篇文章主要介绍了CSS3 animation实现逐帧动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被 ...
html头像动画,纯CSS3实现光芒旋转四射的头像动画
之前我写过一篇用JavaScript和CSS3制作出光芒四射的肖像的文章,这篇文章受到了大家火热的追捧,因为只使用了很少的js代码和简单的CSS语句就创造出来神奇的效果.本文里我是想改进一下之前的技术 ...
CSS3做齿轮旋转的动画
大致思路: 1.先建立一个大盒子,并设为圆形,然后在其中添加齿轮图片,使用z-index实现齿轮的层次感. 2.为齿轮添加旋转特效,注意旋转角度布局: <div class="cri ...
css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构该css3线条波浪动画效果的HTML结构如下: CSS样式然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...
CSS3 帧动画分段,CSS3 animation实现逐帧动画效果
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
css 动画抖动,css3实现循环抖动等动画
CSS3抖动 /*实现图片旋转,当鼠标移动上去就停止*/ /*实现的是过渡*/img:hover{width:1000px; /*开始之前等待两秒*/transition:width 10s line ...
css海浪动画代码,CSS3实现的线条波浪动画效果
演示: http://demo.shanhubei.com/demo/waveAnimation/ 这是一款使用CSS3 animation动画和png图片制作的css3线条波浪动画效果.该特效中,使 ...
css动画帧动画效果,CSS3 animation实现逐帧动画效果
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
【CSS3初探之变形与动画】令人惊叹的CSS3
前言这个标题比较狗血了,我一直知道CSS3可以做很多事情,但是我昨天看到一个人用CSS3华丽的画了一个太极八卦! 若是这个还可以接受,那么我今天就看见一个人用CSS3画了一个叮当猫!!!我突然就在想 ...

html头像动画,用CSS3实现头像旋转效动画

html头像动画,用CSS3实现头像旋转效动画相关推荐

最新文章

热门文章