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
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 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实现的MySQL通用查询程序
2007/03/11 PHP
composer.lock文件的作用
2016/02/03 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
jQuery实现购物车全功能
2021/01/11 jQuery
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
使用django自带的user做外键的方法
2020/11/30 Python
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
我的网上商城创业计划书
2013/12/26 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
社会学专业求职信
2014/02/24 职场文书
安全生产责任书
2014/03/12 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
社区反邪教工作方案
2014/06/16 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis