使用css制作吊扇转动的效果
原理
1、 画一个吊扇，旋转中心为吊扇几何中心
2、 使用 @keyframes 描述旋转动画，使用 animation 旋转吊扇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fan</title>
<style>
@keyframes run {
from {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
to {
transform: rotate(360deg);
}
}
.fan-wrap {
position: relative;
width: 400px;
height: 400px;
animation: 100ms run infinite;
}
.fan-wrap:hover {
animation-play-state: paused;
}
.fan-wrap>div {
background-color: pink;
}
.fan-cricle {
width: 40px;
height: 40px;
border-radius: 40px;
position: absolute;
top: 180px;
left: 180px;
}
.fan-leaf {
width: 200px;
height: 20px;
position: absolute;
top: 190px;
left: 200px;
transform-origin: 0 10px;
}
.roate-120 {
transform: rotate(120deg);
}
.roate-240 {
transform: rotate(240deg);
}
</style>
</head>
<body>
<div class="fan-wrap">
<div class="fan-cricle"></div>
<div class="fan-leaf"></div>
<div class="fan-leaf roate-120"></div>
<div class="fan-leaf roate-240"></div>
</div>
</body>
</html>
-
本文向大家介绍使用css3制作下雨动画的效果相关面试题，主要包含被问及使用css3制作下雨动画的效果时的应答技巧和注意事项，需要的朋友参考一下 主要使用box-shadow和animation配合实现，只需要一个div 1、box-shadow 生成若干数量、不同偏移量的“雨滴”， 2、animation 设置雨滴从上往下落的动画效果
-
我正在工作的css动画过渡。我有我的div id mybus。它的位置是相对的。它是多个divs位置相对的容器。我正在尝试移动mybus，它是所有其他div的容器，使用动画转换：translateX（）。不是沃金。（问题是，动画时位置重要吗？）我单独地将transform：rotate（）动画应用到div类车轮（它也在mybus内部）中，效果很好。（我没有包含这部分代码）如果需要，我可以给出更多关
-
这种类似喇叭的效果怎么实现啊 自己通过css去做，感觉达不到这种效果
-
本文向大家介绍使用css将图片转换成黑白的效果相关面试题，主要包含被问及使用css将图片转换成黑白的效果时的应答技巧和注意事项，需要的朋友参考一下
-
本文向大家介绍jQuery制作图片旋转效果，包括了jQuery制作图片旋转效果的使用技巧和注意事项，需要的朋友参考一下 以前用JQuery写过一个纵深方向上的图片旋转效果，在这里拿出来跟大家分享下,贴上一张图片看看效果是如何的： 其实现原理并不复杂，在数学上只用到了其中的正弦函数，制作过程大致如下： （1）先定义好图片旋转的半径 （2）图片旋转的过程需要用到setInterval()方法，来获取每
-
本文向大家介绍使用css写一个水平翻转文字的效果相关面试题，主要包含被问及使用css写一个水平翻转文字的效果时的应答技巧和注意事项，需要的朋友参考一下