css3 - 图标元素动画效果1 - 只执行一次动画

原创于 2017-05-08 08:20:45 发布 · 1.2w 阅读

2 ·

CC 4.0 BY-SA版权

css3 专栏收录该内容

35 篇文章

订阅专栏

本文展示了如何使用CSS3的transform属性和transition动画，实现鼠标悬停时图标在1秒内匀速旋转360度的效果。该动画只执行一次，提供在线演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在线演示

这里写图片描述

鼠标指针滑过时，图标在1秒内匀速旋转360度。
使用transform属性来实现图标的旋转，并且设置transitio动画，将变化的属性名称设置为transform。所以我们看到图标的旋转效果。

图标文件引入：

<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">

html：

<div class="close"><i class="fa fa-close (alias) fa-5x"></i></div>

css：

.close {    
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #96CEB4;
    cursor: pointer;
    position: relative;
  }

  i { /*图标样式*/
    color: #FFEEAD;
    font-size: 48px;
    position: absolute;
    top: 8%;
    left: 19%;
  }

  .close:hover i {  /*该动画只执行一次*/
    -webkit-transform: rotate(360deg);/*鼠标hover时，i图标旋转*/
    transform: rotate(360deg);

    -webkit-transition: -webkit-transform 1s linear;/*transform进行动画，动画用时1秒钟*/
    transition: -webkit-transform 1s linear;
  }