css3中的动画效果能不能随鼠标移动而开始和停止

html-css018

css3中的动画效果能不能随鼠标移动而开始和停止,第1张

用 hover ， animation， 和 transform 可以达到鼠标移入而开始执行动画，鼠标移出而恢复动画的原来状态。但是想要达到更精细的动画效果只能使用 js 来监听鼠标的各个事件onmouseenter， onmousemove， onmouseleave来执行动画。纯 css 是不能感知鼠标的移动事件的。

代码如下：

<h1>CSS3滑入/滑出效果</h1>

<div id="volet_clos">

  <div id="volet">

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quisquam tempora quaerat dolores molestias reiciendis .</p>

      <p>vero labore voluptates necessitatibus ut? Et</p>

      <p>vero labore voluptates necessitatibus ut? Et</p>

      <p>vero labore voluptates necessitatibus ut? Et</p>

      <p>vero labore voluptates necessitatibus ut? Et</p>

      <a href="#volet"  aria-hidden="true" class="ouvrir">滑出</a>

      <a href="#volet_clos" aria-hidden="true" class="fermer">滑入</a>

  </div>

</div>

扩展资料

web网页设计的重要注意事项：

1、网页版面设计合理性

网页设计过程中，一定要留意网页版式的合理性，通过合理的网页布局让用户浏览起来比较顺畅舒适，注意网页版式的设计，不要块块之间过于冗繁，显示拥挤，要有主次分明，注意简练大方。

2、运用舒缓的色彩设计

在网页色彩搭配上，采用淡色系进行页面设计，特别要注意颜色的分配，总体颜色不宜超过三种颜色，可以确定一个主颜色再加上辅助颜色进行点缀搭配，这样整体设计展现出来比较调和、舒缓，用户浏览页面也不会导致眼花缭乱，眼睛疲劳。

3、丰富的页面内容

丰富的内容赋予网页生命力，用户都是喜欢有新鲜、丰富内容的网页，一个受欢迎的网页设计一定是有丰富多彩的内容吸引用户的。

丰富内容的网页对于搜索引擎也是受欢迎的，当搜索引擎每次来到我们网站进行抓取内容的时候，如果我们的网页内容保持新鲜、原创，将会很快进行收录，这对于网站整体优化排名都是有好处的。