CSS3 implémente des effets de rotation des bordures lorsque la souris survole

Cette fois, je vais vous apporter CSS3 pour implémenter l'effet spécial de rotation des bordures lorsque la souris survole. Quelles sont les précautions pour implémenter l'effet spécial de rotation des bordures lorsque la souris survole avec CSS3. Ce qui suit est un cas pratique, jetons-y un œil.

L'effet de la rotation des bordures lorsque la souris est survolée en utilisant du CSS3 pur :

Le code d'implémentation est le suivant. Les commentaires dans le code sont déjà assez nombreux. détaillé, donc je n'en dirai pas plus. ：

nbsp;html>


    <meta>
    <title>Document</title>
    <style>
        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>


    <section>
        <p>
            </p>
<p>新年好新年好新年好</p>
        
    </section>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le php. Site chinois !

Lecture recommandée :

Liste de prix pour la mise en œuvre de Bootstrap

Utiliser le CSS pour obtenir un effet de relief

CSS implémente une barre de progression visible avec un processus de flèche

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!