广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >如何用css3制作按钮并添加动态效果
  • 371

0
分享到

如何用css3制作按钮并添加动态效果

2024-04-02 19:04:59 371人浏览 安东尼
摘要

本篇内容主要讲解“如何用css3制作按钮并添加动态效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何用CSS3制作按钮并添加动态效果”吧!

本篇内容主要讲解“如何用css3制作按钮并添加动态效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何用CSS3制作按钮并添加动态效果”吧!


css如何实现button按钮效果?

html结构：

首先定义一个body，使用button按钮，添加文字value设置为“开始游戏”以方便设置class转为id选择器。

<body>
<input id="search" name="cx" type="button" value="开始游戏" class="btn search">
</body>

效果代码

如何用css3制作按钮并添加动态效果

效果出来了，能看到按钮效果了，但是没有给它添加动态装饰，通过使用css给它添加动态效果，一起看看怎么做。

css编辑代码：

1、在style之间，对search进行样式初始化，添加设置高度和宽度，然后使用设置背景background，设置no-repeat这个属性背景图将不会被重复。

.search {
		    width: 185px;
		    height: 70px;
		    background: url(images/btn_08.jpg) no-repeat center;
		}

代码效果

如何用css3制作按钮并添加动态效果

2、接着，给css3按钮添加圆角效果设置属性每个border的四个值，最后设置居中对齐使用float: left。

border-radius: 8px;
-WEBkit-border-radius: 8px;
-o-border-radius: 8px;
-moz-border-radius: 8px;
float: left;

代码效果

如何用css3制作按钮并添加动态效果

四点边圆角效果出来了

3、再给search进行样式添加字体大小、文本对齐方式、字体的粗细，设置border元素所有边框的样式、颜色、形状。

font-size: 30px;
text-align: center;
font-weight: bold;
border: none;
color: #fff;
cursor: pointer;
line-height: 70px;
font-family: 微软雅黑;

4、在style之间，对btn进行样式初始化，添加设置高度和宽度，然后使用设置背景background。

.btn {
		    width: 383px;
		    height: 70px;line-height: 0;
		    border: 2px solid #a2f3ff;
		    background: #f3682d;
		    
		}

代码效果

如何用css3制作按钮并添加动态效果

5、再给btn进行样式添加字体大小、文本对齐方式、字体的粗细，设置border元素所有边框的样式、颜色、形状。

border-radius: 37px;
-webkit-border-radius: 37px;
-o-border-radius: 37px;
-moz-border-radius: 37px;
text-shadow: 3px 2px #d4481b;
-webkit-text-shadow: 3px 2px #d4481b;
-o-text-shadow: 3px 2px #d4481b;
-moz-text-shadow: 3px 2px #d4481b;
font-family: 微软雅黑;

代码效果

如何用css3制作按钮并添加动态效果

6、将动画与search绑定

#search{
		    animation: breathe 1.1s infinite;

7、使用@keyframes规则，创建动画。

@keyframes breathe{
		  0%{ transfORM: scale(.99); }
		  50%{ transform: scale(1.03); }
		  100%{ transform: scale(.99); }
		}

代码效果

如何用css3制作按钮并添加动态效果

ok,编辑代码完成。

完整代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>button按钮</title>
	<style type="text/css">	
		.search {
		    width: 185px;
		    height: 70px;
		    background: url(images/btn_08.jpg) no-repeat center;
		    border-radius: 8px;
		    -webkit-border-radius: 8px;
		    -o-border-radius: 8px;
		    -moz-border-radius: 8px;
		    float: left;
		    font-size: 30px;
		    text-align: center;
		    font-weight: bold;
		    border: none;
		    color: #fff;
		    cursor: pointer;
		    line-height: 70px;
		    font-family: 微软雅黑;
		}
		.btn {
		    width: 383px;
		    height: 70px;line-height: 0;
		    border: 2px solid #a2f3ff;
		    background: #f3682d;
		    margin: 22px 0 0 17px;
		    border-radius: 37px;
		    -webkit-border-radius: 37px;
		    -o-border-radius: 37px;
		    -moz-border-radius: 37px;
		    text-shadow: 3px 2px #d4481b;
		    -webkit-text-shadow: 3px 2px #d4481b;
		    -o-text-shadow: 3px 2px #d4481b;
		    -moz-text-shadow: 3px 2px #d4481b;
		    font-family: 微软雅黑;
		}
		#search{
		    animation: breathe 1.1s infinite;
		}
		@keyframes breathe{
		  0%{ transform: scale(.99); }
		  50%{ transform: scale(1.03); }
		  100%{ transform: scale(.99); }
		}
	</style>
</head>
<body>
	<input id="search" name="cx" type="button" value="开始游戏" class="btn search">
</body>
</html>

到此，相信大家对“如何用css3制作按钮并添加动态效果”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 如何用css3制作按钮并添加动态效果

本文链接: https://www.lsjlt.com/news/80362.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 如何用css3制作按钮并添加动态效果
    本篇内容主要讲解“如何用css3制作按钮并添加动态效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何用css3制作按钮并添加动态效果”吧! ...
    99+
    2022-10-19
  • Css3如何制作动态开关的效果
    小编给大家分享一下Css3如何制作动态开关的效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！<!DOCTYPE html...
    99+
    2022-10-19
  • CSS3如何给背景图片添加动态变色效果
    这篇文章主要介绍“CSS3如何给背景图片添加动态变色效果”，在日常操作中，相信很多人在CSS3如何给背景图片添加动态变色效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CS...
    99+
    2022-10-19
  • 如何使用CSS3实现按钮悬停闪烁动态特效
    本篇内容介绍了“如何使用CSS3实现按钮悬停闪烁动态特效”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！我们...
    99+
    2022-10-19
  • 如何使用CSS制作平滑过渡效果的按钮
    CSS是网页开发中不可或缺的一部分，通过运用CSS可以实现各种各样的效果，其中之一就是平滑过渡效果的按钮。当用户鼠标悬停在按钮上时，按钮能够以某种方式呈现平滑的过渡效果，这可以增强用户体验和网页的视觉吸引力。本文将介绍如何使用CSS实现平滑...
    99+
    2023-10-21
    CSS 按钮 平滑过渡
  • 如何利用css3实现进度条效果及动态添加百分比
    这篇文章主要介绍了如何利用css3实现进度条效果及动态添加百分比，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。代码：<!DOCTYPE html><...
    99+
    2023-06-08
  • 如何用Python制作一个动态爱心效果
    目录 ① Python跳动爱心 ② Python爱心泡泡 ③ JavaScript 最近「点燃我，温暖你」这部剧非常火，讲述的是程序员的爱情故事。 其中陈飞宇饰演的男主李峋，在剧中用程序做出的爱心跳动效果，非常炫。 网上各个大佬也是纷...
    99+
    2023-10-05
    python 开发语言
  • Android中如何使用TagFlowLayout制作动态添加删除标签
    这篇文章给大家分享的是有关Android中如何使用TagFlowLayout制作动态添加删除标签的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果图简单的效果图(使用开源库)[FlowLayout](“ http...
    99+
    2023-05-30
    android tagflowlayout
  • 如何使用CSS制作滚动加载的图片展示效果的实现步骤
    随着网页技术的发展，滚动加载已成为一种常见的图片展示方式。通过使用CSS，我们可以实现一个具有滚动加载功能的图片展示效果，让网页在用户滚动的同时自动加载新的图片，提升用户体验。下面将介绍一种实现滚动加载图片展示效果的具体步骤，并提供相应的代...
    99+
    2023-10-21
    图片展示 CSS 滚动加载
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作