CSS是一个用于样式美化的语言,它可以对HTML元素进行各种排版、颜色、大小、形状等方面的美化设计。其中一个重要的功能就是可以添加动态图片。要向一个页面中添加一张图片,我们需要在HTML中先引入它。在...
CSS是一个用于样式美化的语言,它可以对HTML元素进行各种排版、颜色、大小、形状等方面的美化设计。其中一个重要的功能就是可以添加动态图片。
要向一个页面中添加一张图片,我们需要在HTML中先引入它。在引入图片时,可以使用img标签,如下所示:
<img src="images/pic.jpg">
img:hover{
transform:scale(1.2);
}
img{
transition: all .4s ease;
}
img:hover{
transform: rotate(360deg);
}
@keyframes shake{
0%{ transform: translate(2px, 2px) rotate(0deg); }
10%{ transform: translate(-2px, -2px) rotate(-3deg); }
20%{ transform: translate(-3px, 0px) rotate(3deg); }
30%{ transform: translate(0px, 2px) rotate(0deg); }
40%{ transform: translate(2px, -2px) rotate(-3deg); }
50%{ transform: translate(-2px, 2px) rotate(3deg); }
60%{ transform: translate(-3px, 2px) rotate(0deg); }
70%{ transform: translate(2px, -2px) rotate(-3deg); }
80%{ transform: translate(3px, 2px) rotate(3deg); }
90%{ transform: translate(0px, -2px) rotate(0deg); }
100%{ transform: translate(-2px, 2px) rotate(-3deg); }
}
img:hover{
animation: shake .5s;
}