纯CSS3制作的鼠标悬停时边框旋转


Posted in HTML / CSS onJanuary 03, 2017

下面以2017年新年祝福语为例给大家展示下效果。

纯CSS3实现的鼠标悬停时边框旋转的效果:

纯CSS3制作的鼠标悬停时边框旋转

 

实现代码如下,代码中注释已经比较详细,就不再多说了:

<!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: '';
        }
        /* 设置鼠标悬停在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">
        <div class="content" title="新年好新年好新年好">
            <p class="con-text">新年好新年好新年好</p>
        </div>
    </section>
</body>
</html>

以上所述是小编给大家介绍的纯CSS3制作的鼠标悬停时边框旋转,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
纯css3实现走马灯效果
Dec 26 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 #HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 #HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 #HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 #HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 #HTML / CSS
详解CSS3浏览器兼容
Dec 14 #HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 #HTML / CSS
You might like
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
利用python汇总统计多张Excel
2020/09/22 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
自荐信包含哪些内容
2013/10/30 职场文书
党员个人思想汇报
2013/12/28 职场文书
旅游节目策划方案
2014/05/26 职场文书
测控技术自荐信
2014/06/05 职场文书
德育标兵事迹材料
2014/08/24 职场文书
委托书范本
2014/09/13 职场文书
校友回访母校寄语
2015/02/26 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
公司联欢会主持词
2015/07/04 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python