CSS3实现360度循环旋转功能


Posted in HTML / CSS onFebruary 12, 2022

1.整个div360度旋转

<style type="text/css">
.div3 {
	position:absolute;
	z-index:3;
	left:40px;
	top:40px;
	font-weight:bold;
	background:red;
	animation: myfirst2 15s infinite linear;
}
@keyframes myfirst2
{
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
 
@keyframes myfirst
{
from {transform: rotate(0deg);}
to {transform: rotate(-359deg);}
}
</style>
<div class="div3">旋转吧</div>

效果图:

CSS3实现360度循环旋转功能

2.div内的文字不动,底边的图片旋转

<html>
<head>
<style type="text/css">
body {
	background:#000a2d;
}
.div2 {
	position:absolute;
	z-index:2;
	left:40px;
	top:40px;
	font-weight:bold;
	height:400px;
	width:400px;
	animation: myfirst2 15s infinite linear;
}
.div3 {
	position:absolute;
	z-index:3;
	left:11%;
	top:22%;
	font-weight:bold;
	color:#fff;
	background:red;
}
@keyframes myfirst2
{
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
 
@keyframes myfirst
{
from {transform: rotate(0deg);}
to {transform: rotate(-359deg);}
}
</style>
</head>
 
<body>
 
<div class="div3">最上层</div>
<div class="div2"><img src="./centerBg3.png" style="width:100%;height:100%;"></div>
</body>
</html>

效果

CSS3实现360度循环旋转功能

到此这篇关于CSS3实现360度循环旋转的文章就介绍到这了,更多相关CSS3 循环旋转内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 HTML / CSS
css sprite简单实例
May 23 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 #HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 #HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 #HTML / CSS
HTTP中的Content-type详解
Jan 18 #HTML / CSS
POST提交数据常见的四种方式
Jan 18 #HTML / CSS
Html5获取用户当前位置的几种方式
html粘性页脚的具体使用
Jan 18 #HTML / CSS
You might like
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
vue bootstrap小例子一枚
2017/06/09 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
使用Python绘制图表大全总结
2017/02/11 Python
简单了解python反射机制的一些知识
2019/07/13 Python
Python实现把类当做字典来访问
2019/12/16 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
python爬虫请求头的使用
2020/12/01 Python
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
机械设计专业应届生求职信
2013/11/21 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
申报材料格式
2014/12/30 职场文书
围城读书笔记
2015/06/26 职场文书