Der Rahmen dreht sich, wenn die Maus mit CSS3 bewegt wird-CSS-Tutorial-php.cn

Der Rahmen dreht sich, wenn die Maus mit CSS3 bewegt wird

高洛峰

Freigeben： 2017-02-24 13:32:00

Original

1576 Leute haben es durchsucht

In diesem Artikel wird ein Stück CSS3-Code mitgeteilt, um den Effekt der Randrotation beim Schweben der Maus zu erzielen. Der Code ist einfach und leicht zu verstehen, sehr gut und hat Referenzwert dazu

Das Folgende sind die Neujahrsgrüße für 2017. Nehmen wir ein Beispiel, um Ihnen die Wirkung zu zeigen.

Der Effekt der Randrotation, wenn die Maus mit reinem CSS3 bewegt wird:

Der Rahmen dreht sich, wenn die Maus mit CSS3 bewegt wird

Der Implementierungscode lautet wie folgt und der Die Kommentare im Code sind ziemlich detailliert, ich werde nicht mehr sagen:

<!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;                     /* 使用此属性防止边框撑开盒子，border-box会让边框占用盒子里面的空间 */
            transition: all 2s;                          /* 该元素的所有属性的变化会在2s内完成 */
        }
        /* 使用伪类before设置需要转动的边框 */
        /* 因为如果元素边框转动，内容也会跟着转动 */
        /* 此处要的效果是只有边框转动而内容不转动 */
        .content:before {
            display: inline-block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            box-sizing: border-box;
            content: &#39;&#39;;
        }
        /* 设置鼠标悬停在content元素上时content属性的变化 */
        .content:hover {
            /*border: solid 15px rgba(255, 255, 255, 0);*/
        }
        /* 设置鼠标悬停在content上时content的before伪类属性的变化 */
        .content:hover:before {
            border: dashed 30px #fff;
            animation: whirl 9s linear infinite;  /* 执行动画whirl,执行一次的周期是9s,执行期间的速度曲线为linear,无限循环 */
        }
        /* 设置文本内容显示的样式 */
        .con-text {
            margin: -60% auto;
            width: 80%;
            font-size: 3rem;
            /* 以下三个属性为了让文字超出宽度时显示省略号，必须同时使用才有效果 */
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        /* 动画whirl,从0度旋转到360度 */
        @keyframes whirl {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <section class="container">
        <p class="content" title="新年好新年好新年好">
            <p class="con-text">新年好新年好新年好</p>
        </p>
    </section>
</body>
</html>

Nach dem Login kopieren

Das Obige ist die Randdrehung, wenn die Maus mit Pure bewegt wird CSS3 wurde vom Herausgeber vorgestellt. Ich hoffe, es ist hilfreich für Sie. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für Ihre Unterstützung der Script House-Website bedanken!

Weitere Artikel zum Thema Randrotation beim Bewegen der Maus mit CSS3 finden Sie auf der chinesischen PHP-Website!