使用CSS Challenge Task 2 of 6对SVG进行动画处理

 

.star-bg {转换：1s; } .star-bg：hover {fill：yellow; }

 

 index.html

<！DOCTYPE html> 

< html > 

< head > 

< title >用CSS动画SVG </ title > < link rel = “ stylesheet” href = “ base.css” > < link rel = “ stylesheet” href = “ style.css “ > </头> <正文> < svg xmlns = ” http://www.w3.org/2000/svg“ viewBox = ”60 60 240 240英寸> < g    

 

    > 

<圆类别= “ star-bg”填充= “＃40adcf”笔画= “ #fff”笔划宽度= “ 6” cx = “ 180” cy = “ 180” r = “ 108.3” /> <路径类别= “ star” fill = “ #fff” stroke = “ #fff” stroke-width = “ 2” stroke-linecap = “ round” stroke-linejoin = “圆” d =               

               “ M180 107.8l16.9 52.1h54.8l-44.3 32.2 16.9 52.1-44.3-32.2-44.3 32.2 16.9-52.1-44.3-32.2h54.8z” /> 

</ g > </ svg > </ body > </ html >    

 

 style.css

/ *通过在* /下面编写CSS来完成挑战

。star-bg {转换：1 s ; } 。star-bg ：悬停{填充：黄色；}

 

 

答：您只想定位填充而不是进行一般过渡，

 

。star-bg  {

过渡：填充1 s ; }