CSS3特效 - 会呼吸的button按钮

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:2838

css3特效
{}
动画过度都很流畅。这里以gif为模拟效果。 1. 效果图 2. 代码如下 <!DOCTYPE html> &...CSS3特效 - 会呼吸的button按钮</title> <style type="text/

CSS3特效 - 会呼吸的button按钮

动画过度都很流畅。这里以gif为模拟效果。

<hr>

1. 效果图

在这里插入图片描述

2. 代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3特效 - 会呼吸的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>

<hr> >

以上就是关于“ CSS3特效 - 会呼吸的button按钮 ” 的全部内容。

原文地址：https://blog.csdn.net/qq_35393869/article/details/83112681?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168940081516800188515635%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168940081516800188515635&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-18-83112681-null-null.142^v88^control_2,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/71ccc8d264264fb19bfbf00e2b2b1aac

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号