纯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字体效果的设置方法小结
Jun 13 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
css3圆角边框和边框阴影示例
May 05 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
php下统计用户在线时间的一种尝试
2010/08/26 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
php绘制一个矩形的方法
2015/01/24 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
css图片自适应大小
2007/11/28 Javascript
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
JS跨域问题详解
2014/11/25 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
Python标准库os.path包、glob包使用实例
2014/11/25 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
学习python可以干什么
2019/02/26 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
四川成都导游欢迎词
2014/01/18 职场文书
大学生找工作求职信
2014/07/09 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
社会实践单位意见
2015/06/05 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
Pandas加速代码之避免使用for循环
2021/05/30 Python