檬味博客 » 问答 » 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 阅读 43 次 更新于 2025-09-10 07:31:46 我来答关注问题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...

  • 深空见闻 使用vue3 css 画出圆环进度条

    方法二：使用CSS的clip属性和旋转裁剪圆形：利用CSS的clip属性，将圆形裁剪成半圆形状。拼接半圆：采用“左右半圆拼接”的方式，右半圆负责显示0-50%的进度，左半圆负责显示50-100%的进度。旋转显示：通过CSS的旋转属性，根据进度值调整半圆的旋转角度，从而显示进度。实现难度：相比SVG方法，CSS方法在实现上...

  • 文暄生活科普 CSS实现平面圆点绕椭圆动画,速速来Get吧

    transform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。transform属性可以指定为关键字值none或一个或多个值。三角函数cos()和sin()为CSS函数，分别返回某数的余弦值和正弦值，此值介于-1和1之间。这些函数使得开发者可以更加方便处理一些复杂的数学问题，...

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

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

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

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

其他CSS类似问题

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

CSS相关话题

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