CSS3过渡动画实现hover人物弹出炫酷效果案例

laiqi_luckyboy

已于 2022-06-13 10:21:21 修改

阅读量1.9k

点赞数 2

分类专栏： HTML和CSS css3 文章标签： css3 html

于 2021-06-18 15:04:56 首次发布

本文链接：https://blog.csdn.net/qq_38836435/article/details/118025676

版权

HTML和CSS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css3

1 篇文章 0 订阅

订阅专栏

目标

我们要实现的目标效果如下
在这里插入图片描述

过渡如何使用

可以清楚地看出效果图中的效果用到了css3中的过渡transition，先来了解一下transition
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果

过渡共有四个属性，分别是：

transition-property：规定应用过渡的 CSS 属性的名称
transition-duration：定义过渡效果花费的时间。默认是 0
transition-timing-function：规定过渡效果的时间曲线。默认是 “ease”
transition-delay：规定过渡效果何时开始。默认是 0

其中，transition-property和transition-duration是必填的，否则动画无法生效

1. transition-property：

transition-property属性指定CSS属性发生变化时的过渡效果（注意，不是所有css属性都支持过渡），过渡属性取值如下：

none：没有属性会获得过渡效果。

all：所有属性都将获得过渡效果。

property：定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

例：

element {
	/*单个属性*/
	transition-property：width;
	/*属性名称列表*/
	transition-property：width, height;
	/*全部支持过渡的属性*/
	transition-property：all;
}

2. transition-duration：

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）

例：

element {
 	transition-duration: 2s;
  	transition-duration: 200ms;
}

3. transition–timing-function：

transition-timing-function：属性指定切换效果的速度。此属性允许一个过渡效果，以改变其持续时间的速度，取值：

linear：规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。

ease：规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

ease-in：规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。

ease-out：规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。

ease-in-out：规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

补充最后一个贝塞尔曲线速度曲线生成网站：https://cubic-bezier.com/

写法：

element {
	transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
}

4. transition-delay：

transition-delay 属性指定何时将开始切换效果。transition-delay值是指以秒为单位（S）或毫秒（ms）

例：

element {
 	transition-delay: 5s;
  	transition-delay: 20000ms;
}

5. 简写

直接使用transition属性即可实现简写，写法如下

transition: property duration timing-function delay;

实现效果

步入正题，该如何实现开头的效果呢，话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      ul {
        display: flex;
      }
      ul li {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: relative;
        list-style: none;
        width: 200px;
        height: 140px;
        margin: 80px 20px;
        background-color: #fcfcfc;
        border-radius: 20px;
        border: 2px solid #ccc;
      }
      ul li .index {
        width: 40px;
        height: 40px;
        background-color: cornflowerblue;
        text-align: center;
        line-height: 40px;
        transition: all 0.8s;
        border-radius: 50%;
      }
      ul li:hover {
        cursor: pointer;
        border-radius: #000;
        background-color: #f4f4f4;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
        border: 2px solid #333;
      }
      ul li:hover .index {
        color: #fff;
        background-color: crimson;
        transform: rotate(-360deg);
      }
      .dog {
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        transition: all cubic-bezier(0, 0.7, 0.37, 1.35) 0.8s;
        opacity: 0;
        z-index: -1;
      }
      .dog img {
        width: 100%;
        height: 100%;
      }
      ul li:hover .dog {
        transform: translate(90px, -92px) rotate(20deg);
        opacity: 1;
      }
      .keyframes {
        display: none;
        width: 200px;
        height: 200px;
        animation: fadep 3s infinite linear;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <div class="dog"><img src="./img/扁平头像-boy 02.png" alt="" /></div>
        <div class="index">1</div>
        生活不止眼前的苟且
      </li>
      <li>
        <div class="dog"><img src="./img/扁平头像-boy 03.png" alt="" /></div>
        <div class="index">2</div>
        生活不止眼前的苟且
      </li>
      <li>
        <div class="dog"><img src="./img/扁平头像-girl 06.png" alt="" /></div>
        <div class="index">3</div>
        生活不止眼前的苟且
      </li>
    </ul>
  </body>
</html>

代码可以直接运行，记得改自己的图片地址

laiqi_luckyboy

关注

2
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
CSS3过渡动画实现hover人物弹出炫酷效果案例

目标我们要实现的目标效果如下过渡如何使用可以清楚地看出效果图中的效果用到了css3中的过渡transition，先来了解一下transitionCSS3 过渡是元素从一种样式逐渐改变为另一种的效果过渡共有四个属性，分别是：transition-property：规定应用过渡的 CSS 属性的名称transition-duration：定义过渡效果花费的时间。默认是 0transition-timing-function：规定过渡效果的时间曲线。默认是 “ease”transi
复制链接

扫一扫

专栏目录