檬味博客 » 问答 » css一个人站在一个圆上旋转动画怎么实现

css一个人站在一个圆上旋转动画怎么实现

body { background:#ddd;} .keleyi { width: 220px;height: 220px;margin: 0 auto;background: no-repeat url("http://keleyi.com/image/a/q5l1xnmf.jpg") left top;-webkit-background-size: 220px 220px;-moz-background-size: 220px 220px;background-size: 220px 220px;-web...
css一个人站在一个圆上旋转动画怎么实现
活动作品如何在一个网页实现登录_注册表单切换？14分钟带你使用CSS+JS实现炫酷滑动切换效果

2021-05-18
<html>
<head>

<style>

body {
background:#ddd;
}
.keleyi {
width: 220px;
height: 220px;
margin: 0 auto;
background: no-repeat url("http://keleyi.com/image/a/q5l1xnmf.jpg") left top;
-webkit-background-size: 220px 220px;
-moz-background-size: 220px 220px;
background-size: 220px 220px;
-webkit-border-radius: 110px;
border-radius: 110px;
-webkit-transition: -webkit-transform 2s ease-out;
-moz-transition: -moz-transform 2s ease-out;
-o-transition: -o-transform 2s ease-out;
-ms-transition: -ms-transform 2s ease-out;
}
.keleyi:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
</style>
</head>
<body>
<div class="keleyi"></div>

</body>
</html>2016-05-05
mengvlog 阅读 6 次 更新于 2025-07-19 19:09:41 我来答关注问题0
2 个回答檬味博客专题活动
  • 不秃头的程序员哟 css一个人站在一个圆上旋转动画怎么实现

    body { background:#ddd;} .keleyi { width: 220px;height: 220px;margin: 0 auto;background: no-repeat url("http://keleyi.com/image/a/q5l1xnmf.jpg") left top;-webkit-background-size: 220px 220px;-moz-background-size: 220px 220px;background-size: 220px 220px;-web...

  • 翡希信息咨询 CSS实现各种Loading效果附带解析

    实现方法：在父元素内放置多个白色圆点，设置旋转动画，并调整每个圆点的延迟时间，使它们依次出现。解析：利用CSS动画的delay属性控制每个圆点的动画开始时间，形成依次旋转的效果。通过调整延迟时间，可以创造出不同的动画节奏。两个半透明圆交替放大缩小：实现方法：两个半透明圆通过绝对定位重叠，并设置不同...

  • 翡希信息咨询 巧用 CSS 实现动态线条 Loading 动画

    1. 使用遮罩实现 核心思路：通过创建两个半圆线条，一个实际可见，另一个与背景色相同且较粗，以不同速度运动，产生动态效果。 实现步骤： 绘制红色线条。 设置背景色为白色。 使用CSS动画控制两个半圆线条以不同速度运动，实现动态变化。2. 借助SVG的stroke*能力 核心思路：利用SVG标签与CSS...

  • 猪八戒网 CSS中offset相关属性

    offsetoffset属性可以用来实现元素的不规则运动。offset属性是多个css属性的缩写。其中有offset-anchor、offset-distance、offset-path、offset-position和offset-rotate。offset-anchoroffset-anchor属性主要用来确定偏移运动的锚点，就是让元素沿着轨迹运动的点。语法简单offset-anchor:auto|，auto是初始值...

  • 我命如天不如妖 css3中怎样定义动画的旋转中心点

    1、首先新建一个html5文档，完成基本代码编写，如下图所示。2、然后新建一个长100像素，高50像素背景为红色的长方形图层。3、接着通过输入“border-radius:50%/50%”属性，如下图所示，将长方形图层设置成一个椭圆形。4、接下来就是将椭圆旋转了，用“transform:rotate(30deg)”将椭圆旋转30度。5...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部