css3图标按钮动画

最新推荐文章于 2021-11-09 10:36:50 发布
最新推荐文章于 2021-11-09 10:36:50 发布
阅读量457 收藏 2
点赞数 2
文章标签： css3 html animation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46239267/article/details/107592450
版权

界面效果

在这里插入图片描述
鼠标悬停，线从四周过来
在这里插入图片描述
在这里插入图片描述
线一直转动，当鼠标悬停上面，按钮高亮
在这里插入图片描述

布局

在这里插入图片描述
小div里面再分两个功能div
在这里插入图片描述

线框功能

黄色的线从四周飞到盒子上面，其实是四个span标签，在开始的时候不设宽度，只设高度与距离盒子的距离(left:-100%)，鼠标悬浮的时候有了宽度(width:100%)，并且设置距离(left:0)

<div class="oneinner smalltong">
                <div class="mission">
                </div>
                <div class="btn">
                    <span class="line line_top"></span>
					<span class="line line_bottom"></span>
					<span class="line line_left"></span>
					<span class="line line_right"></span>
                    <span>游戏</span><a href="javascript:;"></a>

                </div>
            </div>

 /*添加四条线的样式*/
			
			.btn:hover .line {
				background: yellow;
			}
			/*是四条闪现过来的线 ，很多重复的部分*/
			
			.btn .line {
				display: block;
				position: absolute;
				background: none;
                transition: all 0.2s linear;
                /* 兼容其他浏览器 */
				-webkit-transition: all 0.2s linear;
				-moz-transition: all 0.2s linear;
			}
			/*顶端的线标注*/
            /*
            1.高度 不变
			2.盒子宽度不变
            3.位置左右位置移动
            4.先把线的高度与从哪里过来的距离定义出来，
            例如.line_top的线一开始是2px，没有宽度，所以你是看不见的，并且在盒子的left：-110%的位置
                当鼠标悬停在上面的时候，有了宽度，此时让它从left：-110%的位置到left：0的位置
                再定义一个class=“line”，让它设置一个transition（ <span class="line line_top"></span>）
                简而言之就是一个简单的动画过程
            */
			
			.btn .line_top {
				height: 2px;
				width: 0;
				left: -110%;
				top: -1px;
			}
			/* 线从left: -110%的地方过来 */
			.btn:hover .line_top {
				width: 100%;
				left: 0;
			}

按钮高亮转动功能

也是四个span标签，分别设置各自在不同的地方，以及当鼠标悬停的时候，开始动起来，这里后三个span需要设置延迟
在这里插入图片描述
当class=btn1的div没有设置overflow:hidden的时候，是这个效果，这里的span标签它各自设置的距离都不同
在这里插入图片描述

  /* 第二个box的一个高亮位置 */
            .btn1{
            position: relative;
            height:40px;
            width: 180px;
            box-sizing: border-box;
            padding: 5px 20px 5px 20px;
            line-height: 30px;
            border: 1px rgb(190, 189, 189) solid;
            overflow: hidden;
            //设置动画时间，必须设置。
            transition: all 1s;
        }
            .btn1:hover {
				background: #03e9f4;
				color: #fff;
				border-radius: 5px;
                /* 阴影效果，多个层次的效果，一层一层 */
				box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
				background-position: 20px center;
			}
			
			.btn1 span {
				position: absolute;
				display: block
			}
			
			.btn1 span:nth-child(1) {
			//开始状态
				top: 0;
				left: -100%;
				width: 100%;
				height: 2px;
				background: linear-gradient(to right, transparent, #03e9f4);
				//这个动画是自动的，不同于上面黄色线，需要悬停才出来，这个线一直在框框里面转动
				animation: btn-anim1 1s linear infinite;
			}
			/
			@keyframes btn-anim1 {
				0% {
					left: -100%;
				}
				50%,
				100% {
					left: 100%;
				}
			}

旋转功能

这个根据z轴旋转360度
在这里插入图片描述

.mission:hover,.play:hover,.touch:hover{
                transform:rotateZ(360deg);
            }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            height: 100%;
            width: 100%;
            overflow: hidden;
            background-color:#333333 ;
        }
        .bigtong{
            margin: 30px auto 0 auto;
            height:200px;
            width: 700px;
            border: 1px solid white;
            padding: 25px;
            /* margin-bottom: 0; */
        }
        .smalltong{
            height: 200px;
            width: 200px;
            /* background-color: pink; */
            float: left;
            padding: 10px;
            box-sizing:border-box;
        }
        .smalltong:not(:last-of-type){
            margin-right: 25px;
        }
        .mission{
            height: 120px;
            width: 180px;
            margin-bottom: 20px;
            padding: 20px;
            box-sizing: border-box;
            background: url(./img/mission.png) 1px  no-repeat;
            transition: 1s;
        }
        .play{
            height: 120px;
            width: 180px;
            margin-bottom: 20px;
            padding: 20px;
            box-sizing: border-box;
            background: url(./img/play.png) 1px  no-repeat;
            transition: 1s;
        }
        .touch{
            height: 140px;
            width: 180px;
            margin-bottom: 0px;
            padding: 20px;
            box-sizing: border-box;
            background: url(./img/touch.png) 1px no-repeat;
            transition: 1s;
        }

        .btn{
            position: relative;
            height:40px;
            width: 180px;
            box-sizing: border-box;
            padding: 5px 20px 5px 20px;
            line-height: 30px;
            border: 1px rgb(190, 189, 189) solid;
        }
        
        .btn span{
            font-weight: bolder;
            color:  aquamarine;

        }
        a{
            position: absolute;
            display:inline-block;
            height: 30px;
            width:50px;
            right:5px;
            background: url(./img/allow.png) 8px no-repeat;
        }
        /*添加四条线的样式*/
			
			.btn:hover .line {
				background: yellow;
			}
			/*是四条闪现过来的线 ，很多重复的部分*/
			
			.btn .line {
				display: block;
				position: absolute;
				background: none;
                transition: all 0.2s linear;
                /* 兼容其他浏览器 */
				-webkit-transition: all 0.2s linear;
				-moz-transition: all 0.2s linear;
			}
			/*顶端的线标注*/
            /*
            1.高度 不变
			2.盒子宽度不变
            3.位置左右位置移动
            4.先把线的高度与从哪里过来的距离定义出来，
            例如.line_top的线一开始是2px，没有宽度，所以你是看不见的，并且在盒子的left：-110%的位置
                当鼠标悬停在上面的时候，有了宽度，此时让它从left：-110%的位置到left：0的位置
                再定义一个class=“line”，让它设置一个transition（ <span class="line line_top"></span>）
                简而言之就是一个简单的动画过程
            */
			
			.btn .line_top {
				height: 2px;
				width: 0;
				left: -110%;
				top: -1px;
			}
			/* 线从left: -110%的地方过来 */
			.btn:hover .line_top {
				width: 100%;
				left: 0;
			}
			
			.btn .line_bottom {
				height: 2px;
				width: 0;
				right: -110%;
				bottom: -1px;
			}
			
			.btn:hover .line_bottom {
				width: 100%;
				right: 0;
			}
			
			.btn .line_right {
				height: 0px;
				width: 2px;
				right: -1px;
				top: -110%;
			}
			
			.btn:hover .line_right {
				height: 100%;
				top: 0;
			}
			
			.btn .line_left {
				height: 0px;
				width: 2px;
				left: -1px;
				bottom: -110%;
			}
			
			.btn:hover .line_left {
				height: 100%;
				bottom: 0;
			}




            /* 第二个box的一个高亮位置 */
            .btn1{
            position: relative;
            height:40px;
            width: 180px;
            box-sizing: border-box;
            padding: 5px 20px 5px 20px;
            line-height: 30px;
            border: 1px rgb(190, 189, 189) solid;
            overflow: hidden;
            transition: all 1s;
        }
            .btn1:hover {
				background: #03e9f4;
				color: #fff;
				border-radius: 5px;
                /* 多个层次的效果，一层一层 */
				box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
				background-position: 20px center;
			}
			
			.btn1 span {
				position: absolute;
				display: block
			}
			
			.btn1 span:nth-child(1) {
				top: 0;
				left: -100%;
				width: 100%;
				height: 2px;
				background: linear-gradient(to right, transparent, #03e9f4);
				animation: btn-anim1 1s linear infinite;
			}
			
			@keyframes btn-anim1 {
				0% {
					left: -100%;
				}
				50%,
				100% {
					left: 100%;
				}
			}
			
			.btn1 span:nth-child(2) {
				top: -100%;
				right: 0;
				width: 2px;
				height: 100%;
				background: linear-gradient(180deg, transparent, #03e9f4);
				animation: btn-anim2 1s linear infinite;
				/* animation-delay: .25s */
                animation-delay: .25s
			}
			
			@keyframes btn-anim2 {
				0% {
					top: -100%;
				}
				50%,
				100% {
					top: 100%;
				}
			}
			
			.btn1 span:nth-child(3) {
				bottom: 0;
				right: -100%;
				width: 100%;
				height: 2px;
				background: linear-gradient(270deg, transparent, #03e9f4);
				animation: btn-anim3 1s linear infinite;
				animation-delay: .5s
			}
			
			@keyframes btn-anim3 {
				0% {
					right: -100%;
				}
				50%,
				100% {
					right: 100%;
				}
			}
			
			.btn1 span:nth-child(4) {
				bottom: -100%;
				left: 0;
				width: 2px;
				height: 100%;
				background: linear-gradient(360deg, transparent, #03e9f4);
				animation: btn-anim4 1s linear infinite;
				animation-delay: .75s
			}
			
			@keyframes btn-anim4 {
				0% {
					bottom: -100%;
				}
				50%,
				100% {
					bottom: 100%;
				}
			}
            .mission:hover,.play:hover,.touch:hover{
                transform:rotateZ(360deg);
            }
    </style>
</head>
<body>
    <div class="container">
        <div class="onebox bigtong">
            <div class="oneinner smalltong">
                <div class="mission">
                </div>
                <div class="btn">
                    <span class="line line_top"></span>
					<span class="line line_bottom"></span>
					<span class="line line_left"></span>
					<span class="line line_right"></span>
                    <span>游戏</span><a href="javascript:;"></a>

                </div>
            </div>
            <div class="twoinner smalltong">
                <div class="play"></div>
                <div class="btn">
                    <span class="line line_top"></span>
					<span class="line line_bottom"></span>
					<span class="line line_left"></span>
					<span class="line line_right"></span>
                    <span>加速器</span><a href="javascript:;"></a>

                </div>
            </div>
            <div class="threeinner smalltong">
                <div class="touch"></div>
                <div class="btn">
                    <span class="line line_top"></span>
					<span class="line line_bottom"></span>
					<span class="line line_left"></span>
					<span class="line line_right"></span>
                    <span>位置</span><a href="javascript:;"></a>

                </div>
            </div>
        </div>
        <div class="twobox bigtong">
            <div class="box1 smalltong">
                <div class="mission"></div>
                <div class="btn1">
                    <span></span>
					<span></span>
					<span></span>
					<span></span>
                    <span>游戏</span><a href="javascript:;"></a>

                </div>
            </div>
            <div class="box2 smalltong">
                <div class="play"></div>
                <div class="btn1">
                    <span></span>
					<span></span>
					<span></span>
					<span></span>
                    <span>加速器</span><a href="javascript:;"></a>

                </div>
            </div>
            <div class="box3 smalltong">
                <div class="touch"></div>
                <div class="btn1">
                    <span></span>
					<span></span>
					<span></span>
					<span></span>
                    <span>位置</span><a href="javascript:;"></a>

                </div>
            </div>
        </div>
    </div>
</body>
</html>
chainnnn
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3动画按钮_CSS3的动画按钮
culiao9310的博客
09-29 508
css3动画按钮View demo 查看演示Download Source 下载源Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link e...
css3动画图标效果
10-31
css3动画图标效果 css3动画图标效果 css3动画图标效果
不可错过的16个纯CSS3动画小图标
08-23
一提起图标，大家可能第一个会想到PS、美工等词语，你是否相信所有的小图标都可以使用CSS3实现，不管是简单的图标还是复杂带动画的图标，对CSS3来说都不是问题。这次我们给大家分享16个基于纯CSS3绘制的小图标，有几个还带有鼠标滑过动画特效，喜欢CSS3喜欢前端的你一定不可以错过，也可以分享给你的朋友。
8款超酷而实用的CSS3按钮动画
weixin_30808253的博客
05-11 354
1、CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮，按钮非常简单，提供了分享到twitter、facebook、youtube等大型社交网站。每一个分享按钮都有个大社交网站的Logo图标，并且在鼠标滑过这些按钮时，利用CSS3的动画特性出现滑动的动画效果。 在线演示 源码下载 2、HTML5/CSS3悬浮按钮特效 Canvas彩球飞舞效果 这次要分享一个非常具有动画色...
CSS3按钮动画
bossmango的博客
09-05 347
这次我们要来分享一款很不错的CSS3按钮动画，这款CSS3按钮一共有5种动画方式，每一种都是鼠标滑过动画形式，虽然这些动画按钮不是十分华丽，但是小编觉得不像其他按钮那样很难扩展，我们可以修改CSS代码随意改变自己喜欢的颜色样式。 在线演示源码下载 让我们一起来看看实现这5中样式动画按钮的HTML代码和CSS代码吧。以第一个按钮为例，其他按钮的代码大家可以下载源代码来研究，并不是
switch按钮文字切换
Mr_yq的博客
09-27 1272
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> body{background: rgb(57, 179, 255)} label { display: b...
CSS3分享图标按钮过渡动画特效
07-28
在现代网页设计中，视觉效果和用户体验是至关重要的元素，CSS3分享图标按钮过渡动画特效便是其中一种增强网站吸引力和互动性的技术。本特效主要利用CSS3的强大功能，特别是其过渡（transition）和动画（animation）...
CSS3文件图标按钮点击特效
07-24
本主题聚焦于“CSS3文件图标按钮点击特效”，这是一种利用GSAP（GreenSock Animation Platform）和CSS3技术实现的文件图标按钮，当用户点击时，会呈现出逼真的打开文件的动画效果。下面将详细讲解这个特效的实现原理...
css3社交媒体图标按钮悬停动画特效
06-11
本文将深入探讨“css3社交媒体图标按钮悬停动画特效”这一主题，包括其设计理念、实现方法以及如何通过CSS3实现精美的动画效果。 首先，我们来看“社交媒体图标”。在当今互联网时代，社交媒体平台如Facebook、...
CSS3分享图标按钮动画特效代码.zip
最新发布
10-31
【标题】"CSS3分享图标按钮动画特效代码.zip"是一个包含使用CSS3技术实现的分享图标按钮动画效果的代码资源。CSS3是层叠样式表（Cascading Style Sheets）的第三版，它极大地扩展了网页设计者的创造力，提供了丰富的...
css3实现动画按钮.rar
07-05
css3实现动画按钮
纯CSS3动画按钮效果 5种漂亮样式
02-22
纯CSS3动画按钮效果 5种漂亮样式，在www.html5tricks.com这边看到的，分享
CSS3按钮炫酷动画hover样式
10-25
CSS3按钮炫酷动画hover样式，
推荐12个漂亮的CSS3按钮实现方案
GOBY 栏目
05-13 354
在过去，我们都是使用图片或者JavaScript来实现漂亮的按钮效果，随着越来越多的浏览器对CSS3的支持和完善，使用CSS3来实现美观的按钮已没有太多的障碍。今天，本文收集了12个很不错的CSS3按钮方案并有相关的使用教程。 BonBon Buttons Zardi CSS3 Buttons With Simple Markup Fancy Buttons 10 Nic...
css3动画按钮_使用CSS3创建奇妙的动画按钮
cuken7684698822的博客
08-02 373
css3动画按钮How to Create a Pure CSS3 animated buttons Today I want to share some experience with creating interactive animated elements (buttons) with CSS3. In our example I going to use hover and active...
100多个纯CSS3动画图标
jiang155的专栏
03-04 499
这次我们要来分享一组纯CSS3打造的动画图标，总共100多个，每一个图标没有用图片，而是利用CSS3的相关特性来实现。在这些CSS3图标中，有部分是动态的，这些带动画的图标也是利用CSS3的动画属性实现的。
8种CSS3按钮动画特效【附源码】
web前端开发
10-27 3147
这8款CSS3按钮动画特效。在该特效中，提供了8种按钮动画效果。每种动画在鼠标悬停到按钮上面的时候，都会触发按钮动画。动画效果截图：使用方法HTML结构最简单的按钮HT...
CSS3动画按钮和图标
ICode联盟
11-09 224
下载地址 我从网站上看到一些漂亮的按钮但这些都是通过图像实现的。我想重新创建,仅用CSS样式。使用css边境技巧使三角箭头和框阴影创建3 d效果,我只创建了一个简单的css按钮看起来一样好。添加转换添加一个小动画,你有一个漂亮的动画按钮。.btn { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; position: relative; display: inline-block; over
CSS3动画与布局属性详解：从背景到变换
本文将深入探讨CSS3中的关键特性，包括动画属性、边框属性、背景属性以及一系列其他实用功能。CSS3动画属性如`@keyframes`和`animation`属性允许开发者创建丰富的视觉效果，通过控制动画名称、持续时间、速度曲线、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值