如何利用SVG和CSS3实现边框动画效果

为了实现Carl Philipe Brenner的网站上的效果，我们还要添加颜色过渡效果、盒子阴影等：

CSS Code复制内容到剪贴板

1. .box {   

2.     width: 300px;   

3.     height: 460px;   

4.     position: relative;   

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

6.     display: inline-block;   

7.     margin: 0 10px;   

8.     cursor: pointer;   

9.     color: #2c3e50;   

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

11.     -webkit-transition: background 0.4s 0.5s;   

12.     transition: background 0.4s 0.5s;   

13. }   

14.   

15. .box:hover {   

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

17.     -webkit-transition-delay: 0s;   

18.     transition-delay: 0s;   

19. }  

给文字加上样式：

CSS Code复制内容到剪贴板

1. .box h4 {   

2.     font-family: "Ruthie", cursive;   

3.     font-size: 180px;   

4.     line-height: 370px;   

5.     margin: 0;   

6.     font-weight: 400;   

7.     width: 100%;   

8. }   

9.   

10. .box span {   

11.     display: block;   

12.     font-weight: 400;   

13.     text-transform: uppercase;   

14.     letter-spacing: 1px;   

15.     font-size: 13px;   

16.     padding: 5px;   

17. }   

18.   

19. .box h4,   

20. .box span {   

21.     -webkit-transition: color 0.4s 0.5s;   

22.     transition: color 0.4s 0.5s;   

23. }   

24.   

25. .box:hover h4,   

26. .box:hover span {   

27.     color: #fff;   

28.     -webkit-transition-delay: 0s;   

29.     transition-delay: 0s;   

30. }  

给SVG和线条添加样式：

CSS Code复制内容到剪贴板

1. .box svg {   

2.     position: absolute;   

3.     top: 0;   

4.     left: 0;   

5. }   

6.   

7. .box svg line {   

8.     stroke-width: 3;   

9.     stroke: #ecf0f1;   

10.     fill: none;   

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

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

13. }  

给线的过渡加上延时：

CSS Code复制内容到剪贴板

1. .box:hover svg line {   

2.     -webkit-transition-delay: 0.1s;   

3.     transition-delay: 0.1s;   

4. }  

之前我们定义的stroke-dasharray只有一个值，但是现在要因尺寸变化而修改

CSS Code复制内容到剪贴板

1. .box svg line.top,   

2. .box svg line.bottombottom {   

3.     stroke-dasharray: 330 240;    

4. }   

5.   

6. .box svg line.left,   

7. .box svg line.rightright {   

8.     stroke-dasharray: 490 400;   

9. }  

如果你尝试这些值，你就能看到这些线条不同的显示效果。

最后，我们要个hover过渡设置相应的值。因为现在元素是300px宽，所以水平线条改为900px，竖线同理改变:

CSS Code复制内容到剪贴板

1. .box:hover svg line.top {   

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

3.     transform: translateX(-600px);   

4. }   

5.   

6. .box:hover svg line.bottombottom {   

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

8.     transform: translateX(600px);   

9. }   

10.   

11. .box:hover svg line.left {   

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

13.     transform: translateY(920px);   

14. }   

15.   

16. .box:hover svg line.rightright {   

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

18.     transform: translateY(-920px);   

19. }  

大功告成。希望能通过这些效果激发你的创意，实现更多的效果~

到此，相信大家对“如何利用SVG和CSS3实现边框动画效果”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！