css如何实现图片边框运动动画

发布时间:2022-03-05 09:38:46 作者:小新
来源:亿速云 阅读:158

这篇文章给大家分享的是有关css如何实现图片边框运动动画的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

如何实现图片的边框运动,这点在一些移动端的效果的经常应用,下面是图标边框运动实现代码:

<!DOCTYPE html>

<html lang="en" class="no-js">

 

       <head>

              <meta charset="UTF-8" />

              <meta http-equiv="X-UA-Compatible" content="IE=edge">

              <meta name="viewport" content="width=device-width, initial-scale=1">

              <title>Border Animation Effect with SVG</title>

              <meta name="description" content="Border Animation Effect: Recreating the effect seen on carlphilippebrenner.com with SVG" />

              <meta name="keywords" content="svg, border effect, animated border, line, grid item, hover, css" />

              <!--<link rel="stylesheet" type="text/css" href="css/demo.css" />-->

              <!--<link rel="stylesheet" type="text/css" href="css/component.css" />-->

              <style>

                     @import url(http://fonts.useso.com/css?family=Lato:300,400,700|Ruthie);

                     @font-face {

                            font-weight: normal;

                            font-style: normal;

                            font-family: 'codropsicons';

                            src: url('../fonts/codropsicons/codropsicons.eot');

                            src: url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), url('../fonts/codropsicons/codropsicons.woff') format('woff'), url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');

                     }

                    

                     *,

                     *:after,

                     *:before {

                            -webkit-box-sizing: border-box;

                            -moz-box-sizing: border-box;

                            box-sizing: border-box;

                     }

                    

                     .clearfix:before,

                     .clearfix:after {

                            content: '';

                            display: table;

                     }

                    

                     .clearfix:after {

                            clear: both;

                     }

                    

                     body {

                            background: #2c3e50;

                            color: #ecf0f1;

                            font-size: 100%;

                            line-height: 1.25;

                            font-family: 'Lato', Arial, sans-serif;

                     }

                    

                     a {

                            color: #95a5a6;

                            text-decoration: none;

                            outline: none;

                     }

                    

                     a:hover,

                     a:focus {

                            color: #fff;

                     }

                    

                     .codrops-header {

                            margin: 0 auto;

                            padding: 2em;

                            text-align: center;

                     }

                    

                     .codrops-header h2 {

                            margin: 0;

                            font-weight: 300;

                            font-size: 2.5em;

                     }

                    

                     .codrops-header h2 span {

                            display: block;

                            padding: 0 0 0.6em 0.1em;

                            font-size: 0.6em;

                            opacity: 0.7;

                     }

                     /* To Navigation Style */

                    

                     .codrops-top {

                            width: 100%;

                            text-transform: uppercase;

                            font-weight: 700;

                            font-size: 0.69em;

                            line-height: 2.2;

                     }

                    

                     .codrops-top a {

                            display: inline-block;

                            padding: 0 1em;

                            text-decoration: none;

                            letter-spacing: 1px;

                     }

                    

                     .codrops-top span.right {

                            float: right;

                     }

                    

                     .codrops-top span.right a {

                            display: block;

                            float: left;

                     }

                    

                     .codrops-icon:before {

                            margin: 0 4px;

                            text-transform: none;

                            font-weight: normal;

                            font-style: normal;

                            font-variant: normal;

                            font-family: 'codropsicons';

                            line-height: 1;

                            speak: none;

                            -webkit-font-smoothing: antialiased;

                     }

                    

                     .codrops-icon-drop:before {

                            content: "\e001";

                     }

                    

                     .codrops-icon-prev:before {

                            content: "\e004";

                     }

                    

                     section {

                            padding: 4em 2em;

                            text-align: center;

                     }

                    

                     section h3 {

                            font-weight: 300;

                            font-size: 2em;

                            padding: 1em 0;

                     }

                    

                     .codrops-header+section {

                            padding-top: 1.5em;

                     }

                    

                     .related p {

                            font-size: 1.5em;

                     }

                    

                     .related>a {

                            background: rgba(0, 0, 0, 0.05);

                            display: inline-block;

                            text-align: center;

                            margin: 20px 10px;

                            padding: 25px;

                            -webkit-transition: color 0.3s, background-color 0.3s;

                            transition: color 0.3s, background-color 0.3s;

                     }

                    

                     .related a:hover {

                            background-color: rgba(0, 0, 0, 0.4);

                     }

                    

                     .related a img {

                            max-width: 100%;

                            opacity: 0.8;

                            -webkit-transition: opacity 0.3s;

                            transition: opacity 0.3s;

                     }

                    

                     .related a:hover img,

                     .related a:active img {

                            opacity: 1;

                     }

                    

                     .related a h4 {

                            margin: 0;

                            padding: 0.5em 0 0.3em;

                            max-width: 300px;

                            text-align: left;

                     }

                    

                     @media screen and (max-width: 25em) {

                            .codrops-icon span {

                                   display: none;

                            }

                     }

                    

                     .box {

                            width: 300px;

                            height: 460px;

                            position: relative;

                            background: rgba(255, 255, 255, 1);

                            display: inline-block;

                            margin: 0 10px;

                            cursor: pointer;

                            color: #2c3e50;

                            box-shadow: inset 0 0 0 3px #2c3e50;

                            -webkit-transition: background 0.4s 0.5s;

                            transition: background 0.4s 0.5s;

                     }

                    

                     .box:hover {

                            background: rgba(255, 255, 255, 0);

                            -webkit-transition-delay: 0s;

                            transition-delay: 0s;

                     }

                    

                     .box h4 {

                            font-family: "Ruthie", cursive;

                            font-size: 180px;

                            line-height: 370px;

                            margin: 0;

                            font-weight: 400;

                            width: 100%;

                     }

                    

                     .box span {

                            display: block;

                            font-weight: 400;

                            text-transform: uppercase;

                            letter-spacing: 1px;

                            font-size: 13px;

                            padding: 5px;

                     }

                    

                     .box h4,

                     .box span {

                            -webkit-transition: color 0.4s 0.5s;

                            transition: color 0.4s 0.5s;

                     }

                    

                     .box:hover h4,

                     .box:hover span {

                            color: #fff;

                            -webkit-transition-delay: 0s;

                            transition-delay: 0s;

                     }

                    

                     .box svg {

                            position: absolute;

                            top: 0;

                            left: 0;

                     }

                    

                     .box svg line {

                            stroke-width: 3;

                            stroke: #ecf0f1;

                            fill: none;

                            -webkit-transition: all .8s ease-in-out;

                            transition: all .8s ease-in-out;

                     }

                    

                     .box:hover svg line {

                            -webkit-transition-delay: 0.1s;

                            transition-delay: 0.1s;

                     }

                    

                     .box svg line.top,

                     .box svg line.bottom {

                            stroke-dasharray: 330 240;

                     }

                    

                     .box svg line.left,

                     .box svg line.right {

                            stroke-dasharray: 490 400;

                     }

                    

                     .box:hover svg line.top {

                            -webkit-transform: translateX(-600px);

                            transform: translateX(-600px);

                     }

                    

                     .box:hover svg line.bottom {

                            -webkit-transform: translateX(600px);

                            transform: translateX(600px);

                     }

                    

                     .box:hover svg line.left {

                            -webkit-transform: translateY(920px);

                            transform: translateY(920px);

                     }

                    

                     .box:hover svg line.right {

                            -webkit-transform: translateY(-920px);

                            transform: translateY(-920px);

                     }

                     /* Alternatives */

                     /* Color */

                    

                     .demo-2 .box {

                            box-shadow: inset 0 0 0 10px #2c3e50;

                     }

                    

                     .demo-2 .box:hover h4,

                     .demo-2 .box:hover span {

                            color: #fe6f83;

                     }

                    

                     .demo-2 .box svg line {

                            stroke-width: 8;

                     }

                    

                     .demo-2 .box:hover svg line {

                            stroke: #fe6f83;

                     }

                     /* Frame */

                    

                     .demo-3 .box {

                            background: rgba(0, 0, 0, 0);

                            color: #fff;

                            box-shadow: none;

                            -webkit-transition: background 0.3s;

                            transition: background 0.3s;

                     }

                    

                     .demo-3 .box:hover {

                            background: rgba(0, 0, 0, 0.4);

                     }

                    

                     .demo-3 .box h4,

                     .demo-3 .box span {

                            -webkit-transition: none;

                            transition: none;

                     }

                    

                     .demo-3 .box svg line {

                            -webkit-transition: all .5s;

                            transition: all .5s;

                     }

                    

                     .demo-3 .box:hover svg line {

                            stroke-width: 10;

                            -webkit-transition-delay: 0s;

                            transition-delay: 0s;

                     }

                    

                     .demo-3 .box:hover svg line.top {

                            -webkit-transform: translateX(-300px);

                            transform: translateX(-300px);

                     }

                    

                     .demo-3 .box:hover svg line.bottom {

                            -webkit-transform: translateX(300px);

                            transform: translateX(300px);

                     }

                    

                     .demo-3 .box:hover svg line.left {

                            -webkit-transform: translateY(460px);

                            transform: translateY(460px);

                     }

                    

                     .demo-3 .box:hover svg line.right {

                            -webkit-transform: translateY(-460px);

                            transform: translateY(-460px);

                     }

                     /* Spin */

                    

                     .demo-4 .box {

                            box-shadow: none;

                            background: rgba(0, 0, 0, 0.4);

                            -webkit-transition: none;

                            transition: none;

                            color: #fff;

                     }

                    

                     .demo-4 .box h4,

                     .demo-4 .box span {

                            -webkit-transform: scale(0.9);

                            transform: scale(0.9);

                            -webkit-backface-visibility: hidden;

                            backface-visibility: hidden;

                            -webkit-transition: -webkit-transform 0.5s;

                            transition: transform 0.5s;

                     }

                    

                     .demo-4 .box:hover h4,

                     .demo-4 .box:hover span {

                            -webkit-transform: scale(1);

                            transform: scale(1);

                     }

                    

                     .demo-4 .box svg line {

                            stroke-width: 30;

                            -webkit-transition: all .4s;

                            transition: all .4s;

                     }

                    

                     .demo-4 .box:hover svg line {

                            -webkit-transition-delay: 0s;

                            transition-delay: 0s;

                     }

                    

                     .demo-4 .box:hover svg line {

                            stroke-width: 0;

                     }

                    

                     .demo-4 .box svg line.top,

                     .demo-4 .box svg line.bottom {

                            stroke-dasharray: 300;

                     }

                    

                     .demo-4 .box svg line.left,

                     .demo-4 .box svg line.right {

                            stroke-dasharray: 460;

                     }

                    

                     .demo-4 .box:hover svg line.top {

                            -webkit-transform: translateX(-300px);

                            transform: translateX(-300px);

                     }

                    

                     .demo-4 .box:hover svg line.bottom {

                            -webkit-transform: translateX(300px);

                            transform: translateX(300px);

                     }

                    

                     .demo-4 .box:hover svg line.left {

                            -webkit-transform: translateY(460px);

                            transform: translateY(460px);

                     }

                    

                     .demo-4 .box:hover svg line.right {

                            -webkit-transform: translateY(-460px);

                            transform: translateY(-460px);

                     }

              </style>

              <!--[if IE]>

            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

              <![endif]-->

       </head>

 

       <body>

              <div class="container">

                     <header class="codrops-header">

                            <h2>Border Animation Effect <span>Recreating the effect seen on <a href="http://carlphilippebrenner.com/">carlphilippebrenner.com</a> with SVG</span></h2>

                            <p>Highly experimental, tested in Google Chrome and Firefox</p>

                     </header>

                     <section class="demo-1">

                            <div class="grid">

                                   <div class="box">

                                          <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

                                                 <line class="top" x1="0" y1="0" x2="900" y2="0" />

                                                 <line class="left" x1="0" y1="460" x2="0" y2="-920" />

                                                 <line class="bottom" x1="300" y1="460" x2="-600" y2="460" />

                                                 <line class="right" x1="300" y1="0" x2="300" y2="1380" />

                                          </svg>

                                          <h4>D</h4>

                                          <span>2012</span>

                                          <span>Broccoli, Asparagus, Curry</span>

                                   </div>

                                   <div class="box">

                                          <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

                                                 <line class="top" x1="0" y1="0" x2="900" y2="0" />

                                                 <line class="left" x1="0" y1="460" x2="0" y2="-920" />

                                                 <line class="bottom" x1="300" y1="460" x2="-600" y2="460" />

                                                 <line class="right" x1="300" y1="0" x2="300" y2="1380" />

                                          </svg>

                                          <h4>A</h4>

                                          <span>2013</span>

                                          <span>Arugula, Chickweed</span>

                                   </div>

                                   <div class="box">

                                          <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

                                                 <line class="top" x1="0" y1="0" x2="900" y2="0" />

                                                 <line class="left" x1="0" y1="460" x2="0" y2="-920" />

                                                 <line class="bottom" x1="300" y1="460" x2="-600" y2="460" />

                                                 <line class="right" x1="300" y1="0" x2="300" y2="1380" />

                                          </svg>

                                          <h4>S</h4>

                                          <span>2014</span>

                                          <span>Strawberry, Lemon</span>

                                   </div>

                            </div>

                            <!-- /grid -->

                     </section>

                     <section class="demo-2">

                            <h3>Color animation</h3>

                            <div class="grid">

                                   <div class="box">

                                          <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

                                                 <line class="top" x1="0" y1="0" x2="900" y2="0" />

                                                 <line class="left" x1="0" y1="460" x2="0" y2="-920" />

                                                 <line class="bottom" x1="300" y1="460" x2="-600" y2="460" />

                                                 <line class="right" x1="300" y1="0" x2="300" y2="1380" />

                                          </svg>

                                          <h4>J</h4>

                                          <span>2012</span>

                                          <span>Walnut, Pineapple</span>

                                   </div>

                                   <div class="box">

                                          <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

                                                 <line class="top" x1="0" y1="0" x2="900" y2="0" />

                                                 <line class="left" x1="0" y1="460" x2="0" y2="-920" />

                                                 <line class="bottom" x1="300" y1="460" x2="-600" y2="460" />

                                                 <line class="right" x1="300" y1="0" x2="300" y2="1380" />

                                          </svg>

                                          <h4>I</h4>

                                          <span>2013</span>

                                          <span>Curry, Beancurd</span>

                                   </div>

                                   <div class="box">

                                          <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

                                                 <line class="top" x1="0" y1="0" x2="900" y2="0" />

                                                 <line class="left" x1="0" y1="460" x2="0" y2="-920" />

                                                 <line class="bottom" x1="300" y1="460" x2="-600" y2="460" />

                                                 <line class="right" x1="300" y1="0" x2="300" y2="1380" />

                                          </svg>

                                          <h4>C</h4>

                                          <span>2014</span>

                                          <span>Lettuce, Asparagus</span>

                                   </div>

                            </div>

                            <!-- /grid -->

                     </section>

                     <section class="demo-3">

                            <h3>Frame</h3>

                            <div class="grid">

                                   <div class="box">

                                          <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

                                                 <line class="top" x1="0" y1="0" x2="900" y2="0" />

                                                 <line class="left" x1="0" y1="460" x2="0" y2="-920" />

                                                 <line class="bottom" x1="300" y1="460" x2="-600" y2="460" />

                                                 <line class="right" x1="300" y1="0" x2="300" y2="1380" />

                                          </svg>

                                          <h4>B</h4>

                                          <span>2012</span>

                                          <span>Marmalade, Honey</span>

                                   </div>

                                   <div class="box">

                                          <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

                                                 <line class="top" x1="0" y1="0" x2="900" y2="0" />

                                                 <line class="left" x1="0" y1="460" x2="0" y2="-920" />

                                                 <line class="bottom" x1="300" y1="460" x2="-600" y2="460" />

                                                 <line class="right" x1="300" y1="0" x2="300" y2="1380" />

                                          </svg>

                                          <h4>U</h4>

                                          <span>2013</span>

                                          <span>Beans, Chickweed</span>

                                   </div>

                                   <div class="box">

                                          <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

                                                 <line class="top" x1="0" y1="0" x2="900" y2="0" />

                                                 <line class="left" x1="0" y1="460" x2="0" y2="-920" />

                                                 <line class="bottom" x1="300" y1="460" x2="-600" y2="460" />

                                                 <line class="right" x1="300" y1="0" x2="300" y2="1380" />

                                          </svg>

                                          <h4>Q</h4>

                                          <span>2014</span>

                                          <span>Broccoli, Lettuce</span>

                                   </div>

                            </div>

                            <!-- /grid -->

                     </section>

                     <section class="demo-4">

                            <h3>Border spin</h3>

                            <div class="grid">

                                   <div class="box">

                                          <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

                                                 <line class="top" x1="0" y1="0" x2="900" y2="0" />

                                                 <line class="left" x1="0" y1="460" x2="0" y2="-920" />

                                                 <line class="bottom" x1="300" y1="460" x2="-600" y2="460" />

                                                 <line class="right" x1="300" y1="0" x2="300" y2="1380" />

                                          </svg>

                                          <h4>C</h4>

                                          <span>2012</span>

                                          <span>Berry, Spinach</span>

                                   </div>

                                   <div class="box">

                                          <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

                                                 <line class="top" x1="0" y1="0" x2="900" y2="0" />

                                                 <line class="left" x1="0" y1="460" x2="0" y2="-920" />

                                                 <line class="bottom" x1="300" y1="460" x2="-600" y2="460" />

                                                 <line class="right" x1="300" y1="0" x2="300" y2="1380" />

                                          </svg>

                                          <h4>A</h4>

                                          <span>2013</span>

                                          <span>Arugula, Chickweed</span>

                                   </div>

                                   <div class="box">

                                          <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

                                                 <line class="top" x1="0" y1="0" x2="900" y2="0" />

                                                 <line class="left" x1="0" y1="460" x2="0" y2="-920" />

                                                 <line class="bottom" x1="300" y1="460" x2="-600" y2="460" />

                                                 <line class="right" x1="300" y1="0" x2="300" y2="1380" />

                                          </svg>

                                          <h4>J</h4>

                                          <span>2014</span>

                                          <span>Broccoli, Asparagus, Lettuce</span>

                                   </div>

                            </div>

                            <!-- /grid -->

                     </section>

              </div>

              <!-- /container -->

       </body>

 

</html>

 

感谢各位的阅读!关于“css如何实现图片边框运动动画”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. 如何用CSS实现图片帧动画和曲线运动
  2. web前端入门到实战:使用CSS实现图片帧动画与曲线运动

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:css如何实现移动端点击态处理

下一篇:HTML怎么使段落的首字母浮动于左侧

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》