css如何实现图片边框运动动画
这篇文章给大家分享的是有关css如何实现图片边框运动动画的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
如何实现图片的边框运动,这点在一些移动端的效果的经常应用,下面是图标边框运动实现代码:
@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);
}
Highly experimental, tested in Google Chrome and Firefox 2012 Broccoli, Asparagus, Curry 2013 Arugula, Chickweed 2014 Strawberry, Lemon 2012 Walnut, Pineapple 2013 Curry, Beancurd 2014 Lettuce, Asparagus 2012 Marmalade, Honey 2013 Beans, Chickweed 2014 Broccoli, Lettuce 2012 Berry, Spinach 2013 Arugula, Chickweed 2014 Broccoli, Asparagus, LettuceBorder Animation Effect Recreating the effect seen on carlphilippebrenner.com with SVG
D
A
S
Color animation
J
I
C
Frame
B
U
Q
Border spin
C
A
J
感谢各位的阅读!关于"css如何实现图片边框运动动画"这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!