运用SVG和CSS3来完成1个酷炫的边框动漫

日期:2021-01-20 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

    演试 | 免费下载


今日大家来探寻1下Carl Philipe Brenner的网站上1个彼此之间而趣味的动漫实际效果。当电脑鼠标历经网格元素时,会有1个彼此之间的动漫产生——网格元素变得全透明,每条边有个顺时针的动漫,造就了十分好的实际效果。这类实际效果是根据JS给span标识的宽或高做了动漫。大家待会会用SVG和CSS渐变色来进行。留意,这个技术性還是试验性的。

最先,让大家看来看基础的定义,随后大家会朝着这个方位勤奋。

请留意,大家将在SVG上应用CSS过渡,将会没法获得全部访问器的适用。

乍眼1看将会不搞清楚这个实际效果是如何进行的。大家先细心看看上面的边就会发现,白色的边的宽度持续从右侧往左侧拓宽,而1条略微延时的边紧跟随1起挪动。每条边都有这样的做法。看起来就像上面的边历经拐角挪动到了左侧,并以此类推。

无需SVG也能进行这样的实际效果,乃至只用伪元素。可是大家想探寻1下如何用CSS而并不是JavaScript来操纵SVG。

如今,来思索1下要如何建立出这样的实际效果。大家能够更改矩形框的troke-dashoffset或立即画线。大家尝试无需JavaScript的处理计划方案。大家发现,CSS过渡stroke-dashoffset 和 stroke-dasharray的值会开启许多BUG。因此大家要尝试不一样的处理计划方案,运用线条和它们的动漫,这在CSS里很非常容易了解和完成。这也给大家更多机遇去探寻不一样的动漫实际效果。

大家即将应用的线的非常的地方是,它们在这个动漫里将有3种情况。它们是方盒边长的3倍,在其中正中间1截是与边等长的空隙。大家将根据设定stroke-dashoffset的值来完成与方盒的边等长。如今,这个动漫完成的重要在于线的部位变换:

SVG与方盒尺寸1致,就不容易看到超过虚线的一部分。

大家先进行第1条线:

CSS Code拷贝內容到剪贴板
  1. <div>   
  2.     <svg width="200" height="200">   
  3.         <line x1="0" y1="0" x2="600" y2="0" />   
  4.     </svg>   
  5. </div>  

这个div长宽20px,和SVG1样。把SVG部位设为absolute,线宽度为10,stroke-dasharray为200。

CSS Code拷贝內容到剪贴板
  1. div {   
  2.     width200px;   
  3.     height200px;   
  4.     positionrelative;   
  5.     overflowhidden;   
  6.     background#ddd;   
  7. }   
  8.   
  9. svg {   
  10.     positionabsolute;   
  11.     top: 0;   
  12.     left: 0;   
  13. }   
  14.   
  15. svg line {   
  16.     stroke-width: 10;   
  17.     stroke: #000;   
  18.     fill: none;   
  19.     stroke-dasharray: 200;   
  20.     -webkit-transition: -webkit-transform .6s ease-out;   
  21.     transition: transform .6s ease-out;   
  22. }   
  23.   
  24. div:hover svg line {   
  25.     -webkit-transform: translateX(-400px);   
  26.     transform: translateX(-400px);   
  27. }  

当数电脑鼠标飘浮在div上时,线也是有1个过渡。大家要把线挪动到它的3分之2处,因此要在x轴上挪动到⑷00px处,你能够看看这个实际效果。由于translation不可以在这里用百分比做企业,因此用px。

接着加上其余3条线,gif实际效果:

大家必须完成下列实际效果:线的第1一部分移出方盒后,周围的线的最终1一部分挪动进来,,这将传进平行线在转角处拐弯的假象,

看来看座标系的界定:

左侧的线的座标是(0,200) 到 (0,⑷00),底部的是(200,200) 到 (⑷00,200),右侧的是right one (200,0) 到 (200,600):

给每条线再加不一样的hover实际效果:

CSS Code拷贝內容到剪贴板
  1. div:hover svg line.top {   
  2.   -webkit-transform: translateX(-400px);   
  3.   transform: translateX(-400px);   
  4. }   
  5.   
  6. div:hover svg line.bottombottom {   
  7.   -webkit-transform: translateX(400px);   
  8.   transform: translateX(400px);   
  9. }   
  10.   
  11. div:hover svg line.left {   
  12.   -webkit-transform: translateY(400px);   
  13.   transform: translateY(400px);   
  14. }   
  15.   
  16. div:hover svg line.rightright {   
  17.   -webkit-transform: translateY(-400px);   
  18.   transform: translateY(-400px);   
  19. }  

看看如今的实际效果。

如今方盒尺寸改成300 x 460,再给它加上1些內容:

CSS Code拷贝內容到剪贴板
  1. <div class="box">   
  2.     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">   
  3.         <line class="top" x1="0" y1="0" x2="900" y2="0"/>   
  4.         <line class="left" x1="0" y1="460" x2="0" y2="⑼20"/>   
  5.         <line class="bottom" x1="300" y1="460" x2="⑹00" y2="460"/>   
  6.         <line class="right" x1="300" y1="0" x2="300" y2="1380"/>   
  7.     </svg>   
  8.     <h3>D</h3>   
  9.     <span>2012</span>   
  10.     <span>Broccoli, Asparagus, Curry</span>   
  11. </div>   
  12.   

以便完成Carl Philipe Brenner的网站上的实际效果,大家还要加上色调过渡实际效果、盒子黑影等:

CSS Code拷贝內容到剪贴板
  1. .box {   
  2.     width300px;   
  3.     height460px;   
  4.     positionrelative;   
  5.     background: rgba(255,255,255,1);   
  6.     displayinline-block;   
  7.     margin: 0 10px;   
  8.     cursorpointer;   
  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 h3 {   
  2.     font-family"Ruthie"cursive;   
  3.     font-size180px;   
  4.     line-height370px;   
  5.     margin: 0;   
  6.     font-weight: 400;   
  7.     width: 100%;   
  8. }   
  9.   
  10. .box span {   
  11.     displayblock;   
  12.     font-weight: 400;   
  13.     text-transformuppercase;   
  14.     letter-spacing1px;   
  15.     font-size13px;   
  16.     padding5px;   
  17. }   
  18.   
  19. .box h3,   
  20. .box span {   
  21.     -webkit-transition: color 0.4s 0.5s;   
  22.     transition: color 0.4s 0.5s;   
  23. }   
  24.   
  25. .box:hover h3,   
  26. .box:hover span {   
  27.     color#fff;   
  28.     -webkit-transition-delay: 0s;   
  29.     transition-delay: 0s;   
  30. }  

给SVG和线条加上款式:

CSS Code拷贝內容到剪贴板
  1. .box svg {   
  2.     positionabsolute;   
  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仅有1个值,可是如今要因规格转变而改动

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. }  

大获全胜。期待能根据这些实际效果激起你的艺术创意,完成更多的实际效果~

上一篇:CSS3 display专业知识详解 返回下一篇:没有了