纯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 绘制BMW logo实的现代码
Apr 25 HTML / CSS
css3高级选择器使用方法
Dec 02 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 HTML / CSS
CSS实现鼠标悬浮动画特效
May 07 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判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
PHP静态成员变量
2017/02/14 PHP
javascript window对象属性整理
2009/10/24 Javascript
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
Python可变参数函数用法实例
2015/07/07 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
三十年同学聚会感言
2015/07/30 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
vue特效之翻牌动画
2022/04/20 Vue.js