html 直线旋转,HTML实现旋转动画

文章目录

前言

一、实现效果

二、整体分析

1. 设置背景图：

2. 设置坐标系

3. 创建动画，设置参数

4. 定义动画的关键帧

三、实现代码

四、添加鼠标选中暂停效果

运行效果

前言

本文利用HTML+CSS在网页实现旋转动画，源码以及素材已经全部放到了Gitee仓库中，需要源码的小伙伴们到仓库自取(本文在仓库中对应的项目名为Rotate)

仓库地址：https://gitee.com/dream-flight/repository

提示：以下是本篇文章正文内容，下面案例可供参考

一、实现效果

本文代码要实现的旋转动画的最终显示效果

二、整体分析

在HTML界面实现旋转效果时，要完成以下几点：(在body标签中添加了一个div，class的值为picture，下面的操作都是对于picture的操作)

1. 设置背景图：

利用CSS属性中的background-image来设置要转动的背景图片

这个时候要注意到，本身图片是正方形的，HTML中没有定义圆形，所以要将正方形的图片修改为圆形时要设置CSS属性中的border-radius，通过调整圆角矩形的角度来构造出圆形

当border-radius的值大于等于正方形图片边长的一半时就会显示为圆形

2. 设置坐标系

需要将CSS属性中的position属性值设置为relative

因为将position属性设置为relative时支持动画

3. 创建动画

html 直线旋转,HTML实现旋转动画相关推荐

android+动画+锯齿,Android_rotate--animation 动画旋转两图片,消除动画锯齿现象 android 开发：动画旋转两图片 - 下载 - 搜珍网...
Android+动画旋转两图/ Android+动画旋转两图/.classpath Android+动画旋转两图/.project Android+动画旋转两图/.settings/ Android+ ...
IOS--CALayer实现，界限、透明度、位置、旋转、缩放组合动画（转）
首先引入框架:QuartzCore.framework 在头文件声明:CALayer *logoLayer { //界限 CABasicAnimation *boundsAnimation = [CA ...
android酷炫转圈动画,android常用旋转线条加载动画
想要知道关于更多自定义View的实例,请参考:android自定义View索引先上个效果图,以免大家跑错地了. 嗯,整个来说呢,除了舍不得充VIP去掉水印之外,其他都挺好的. 下面开始实现我们的效果 ...
html 向下展开,css3箭头旋转+向下展开动画
箭头旋转+向下展开动画 .closeBox { display: inline-block; width: 50px; height: 50px; transition: transform 0.5s ...
CSS 实现图片旋转和水波纹动画效果
CSS 实现图片旋转和水波纹动画效果背景通过 CSS 动画实现图片旋转和水波纹动画效果,并做成 Vue 组件,方便以后复用. 代码 <template><view class=& ...
CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载页面
前言日子总是像从指尖流过的细沙,在不经意间悄然的滑落.转眼2019年第一季度已经过去了,提前祝大家愚人节快乐,当心被人愚弄哦(就算被愚弄也不要生气啦). 先来看看今天要实现的效果原图: 玩过王者的应 ...
css3动画旋转360度,CSS3动画（360度旋转、旋转放大、放大、移动）
Title div{ width:120px; height:120px; line-height:120px; margin: 20px; background-color: #5cb85c; fl ...
css根据某个角旋转，设置旋转中心点
前言: css3里面是有动画的属性的,里面有个旋转,那么旋转怎么来根据元素的不同点来旋转呢?这里分享下方法. 实现源码: 1.旋转的代码: transform:rotate(7deg); 旋转的兼容性 ...
css同时旋转rotate3d,CSS3 旋转 rotate3d()rotatez()应用实例
在CSS3中,rotate属性用于设置对象(如 div.ul li.文字等)旋转,可设置对象在 X.Y 和 Z轴的旋转角度:只设置X和Y轴的称为2d旋转,X.Y和Z轴同时设置的称为3d旋转:2d旋转在 ...
【Android RTMP】NV21 图像旋转处理 ( 图像旋转算法 | 后置摄像头顺时针旋转 90 度 | 前置摄像头顺时针旋转 90 度 )
文章目录安卓直播推流专栏博客总结一. 后置摄像头顺时针旋转 90 度二. 前置摄像头顺时针旋转 90 度三. NV21 格式图像旋转代码安卓直播推流专栏博客总结 Android RTMP 直 ...

html 直线旋转,HTML实现旋转动画

html 直线旋转,HTML实现旋转动画相关推荐

最新文章

热门文章