本文共 569 字，大约阅读时间需要 1 分钟。

开发工具与关键技术：DWHTML+CSS3

作者：彭水清 撰写时间：2019年1月18日

我学习了HTML与CSS3，在CSS3里我发现了很多很有趣的代码，就是如何去利用这些代码来实现自己想要的效果。接下来就是我要怎么去用CSS3来现实我自己想要的一些效果。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容：

1、规定您希望把效果添加到哪个 CSS 属性上

2、规定效果的时长 注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。

首先，先写HTML的代码

接下来我们要给这些源代码一些样式

为了营造鼠标移入图片，图片就会有CSS3旋转位移的效果 注释：伪类用于向某些选择器添加特殊的效果。 然后我以center 400px为中心，就是让图片围绕这个中心旋转位移；为了清楚的看到旋转位移的效果，我使用了transition的属性 以下就是我的效果图：

效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时，当鼠标指针移出元素时，它会逐渐变回原来的样式。

鼠标还没有移入元素上的时候是这样子的，动态如下： 然后当鼠标指针移入元素时，图片就会散开，显示的效果如下：

以上就是我的作品，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！

转载地址：https://blog.csdn.net/weixin_44540414/article/details/86550592 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！