CSS3实现图片循环旋转

顺晟科技

2021-08-12 11:30:46

205

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片循环旋转</title>
<style>
*{margin: 0; padding: 0;}

.ta_c{text-align: center;
margin-top: 100px;}

@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

.Rotation{
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}

.img{border-radius: 250px;}

</style>
</head>
<body>

<div class="ta_c">
<img class="Rotation img" src="img/01.png" width="500" height="500"/>
</div>

</body>
</html>

上一篇：网页中流行的css3样式下一篇：RGBa颜色css3的希腊字母的个字

22

2022-10

javascript - 利用思否猫素材实现一个丝滑的轮播图（html + css + js）_个人文章 - SegmentFault 思否

使用思否猫素材实现一个轮播图本文参与了1024程序员节，欢迎正在阅读的你也加入。通过本文，你将学到:htmlcssjs没错，就是html，css,js,现在是框架盛行的时代，所以很少会有人在意原生三件
19

2022-10

一款纯js实现的轻量化图片编辑器叫什么,一款纯 JS 实现的轻量化图片编辑器

介绍因为一些特点的工作场景, 写文章的需要每次处理一些图片, 在上面加说明文字, 或者加一些图形刚开始使用 PPT 来处理, 一张张复制过去, 做一些边框阴影处理, 再加一些图形, 然后再导出来复制到
19

2022-10

用纯CSS实现优惠券剪卡风格

在做商城类项目的时候，我们可能都会经历过“优惠券”这类需求，笔者在过往工作中，都是直接要求UI切图来实现，直到有一天产品告诉我一个奇思妙想：这个优惠券的宽度会随内容变化的！一下子让我陷入了人生的大思考
19

2022-10

HTML5如何制作一个拼图游戏:妙啊！纯 CSS 实现拼图游戏

本文，将向大家介绍一种将多个 CSS 技巧运用到极致的技巧，利用纯 CSS 实现拼图游戏。本技巧源自于 Temani Afif 的 CodePen CSS Only Puzzle game。一款完全
19

2022-10

前端打印输出?前端打印功能实现及css设置

首先是使用下边代码，实现js局部打印功能。参数dom为需要打印的节点，为了保证页面功能的单一性，最好弹出一个新的预览页面完成打印功能。function print(dom){var body = do
22

2022-09

借助 :has 实现3d轮播图

欢迎关注我的公众号：前端侦探前不久在这篇文章：CSS 有了:has伪类可以做些什么中介绍了:has伪类的一些使用场景，可以说大大颠覆了 CSS 选择器的认知，让很多繁琐的 js逻辑通过灵活的CSS轻

Html
Js
Css

Css

CSS3实现图片循环旋转