Shulou(Shulou.com)06/01 Report--

This article is to share with you about how css implements picture frame motion animation. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

How to achieve the border motion of the picture, which is often used in some mobile effects, the following is the icon border motion implementation code:

Border Animation Effect with SVG

@ 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 an 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)

}

Border Animation Effect Recreating the effect seen on carlphilippebrenner.com with SVG

Highly experimental, tested in Google Chrome and Firefox

D

2012

Broccoli, Asparagus, Curry

A

2013

Arugula, Chickweed

S

2014

Strawberry, Lemon

Color animation

J

2012

Walnut, Pineapple

I

2013

Curry, Beancurd

C

2014

Lettuce, Asparagus

Frame

B

2012

Marmalade, Honey

U

2013

Beans, Chickweed

Q

2014

Broccoli, Lettuce

Border spin

C

2012

Berry, Spinach

A

2013

Arugula, Chickweed

J

2014

Broccoli, Asparagus, Lettuce

Thank you for reading! On "css how to achieve picture frame motion animation" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.