纯CSS3实现动画旋转动效

最新推荐文章于 2024-08-14 14:37:33 发布

Dylan_洋

最新推荐文章于 2024-08-14 14:37:33 发布

阅读量2.1k

点赞数 2

本文链接：https://blog.csdn.net/qq_35960760/article/details/55261474

版权

本文通过HTML和CSS3展示了如何创建一个旋转动画效果。利用border-radius、box-sizing、transition和animation属性，实现了内容不旋转仅边框旋转的视觉效果。当鼠标悬停在元素上时，边框会以dashed样式以9秒的周期进行360度的线性无限循环旋转。

摘要由CSDN通过智能技术生成

不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
            width: 40rem;
            height: 30rem;
            font-size: 62.50%;   /* 把body的字体设置为10px以方便使用rem时的计算 */
        }
        .container {
            width: 100%;
            height: 100%;
            background: #0f0;
            text-align: center;
        }
        /* 设置content元素的属性 */
        /* 此元素的宽和高必须相等，即设置border-radius: 50%;后应该是一个圆 */
        /* 使用rem相对于body的字体尺寸设置了宽和高 */
        .content {
            display: inline-block;
            margin-top: 5rem;
            width: 20rem;
            height: 20rem;
            border: solid 15px rgba(255, 255, 255, 1);  /* 此处设置边框，使用rgba的方式是为了后面隐藏时方便，只需要设置a的值为0即可隐藏 */
            border-radius: 50%;
            box-sizing: border-box;