首页前端开发CSScss3 转圈 鼠标上去停下

css3 转圈 鼠标上去停下

时间2023-12-05 18:32:03发布访客分类CSS浏览970
导读:CSS3是一种强大的样式设计语言,它可以让我们实现各种各样的动态效果,比如转圈效果。今天我们来学习如何实现一个简单的CSS3转圈效果,并且通过鼠标上下滑动去控制它的停止与继续移动。.circle {width: 100px;height:...

CSS3是一种强大的样式设计语言,它可以让我们实现各种各样的动态效果,比如转圈效果。今天我们来学习如何实现一个简单的CSS3转圈效果,并且通过鼠标上下滑动去控制它的停止与继续移动。

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #333;
    animation: circle 2s infinite linear;
    transform-origin: center center;
}
.circle:hover {
    animation-play-state: paused;
}
@keyframes circle {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
    

首先,我们创建一个圆形div,给它一个宽度和高度,并且设置边角的半径为50%,这样就实现了一个圆形的效果。然后,我们添加了一个动画效果,来使这个圆形div在2秒钟内不断旋转,并且使用无限循环的方式让它不停止。

接下来,我们添加了一个:hover伪类选择器,来实现当鼠标悬停在这个圆形div上时,停止它的旋转动画效果。这是因为我们设置了animation-play-state属性为paused,它可以控制动画的播放状态,当值为paused时,动画被停止,当值为running时,动画继续播放。

接着,我们使用@keyframes规则来实现旋转动画的关键帧(keyframe)规则,即从0度到360度的转圈效果。在这个规则中,我们定义了transform属性,来实现旋转的效果,设置transform-origin属性为圆形div的中心点,这样圆形div就会围绕它的中心点开始旋转。最后,我们将这个关键帧规则与之前定义的动画效果关联起来,即通过animation属性来实现。

至此,我们已经完成了一个简单的CSS3转圈效果,并且能够通过鼠标的悬停来控制它的停止与继续移动。相信这个效果能够让你的网站更加生动有趣。

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: css3 转圈 鼠标上去停下
本文地址: https://pptw.com/jishu/569435.html
C语言多线程局部变量共享的方法是什么 css3 转盘菜单

游客 回复需填写必要信息