• 七夕，用HTML+CSS动画实现旋转图片表白魔方感动她

    实现效果：

     

    6de7081f1b74409da017282d73745023.png 

    ⭐️  作者：船长在船上
    🚩 主页：来访地址船长在船上的博客
    🔨  简介：高级前端开发工程师，专注前端开发，欢迎咨询交流，共同学习！

     

    🔔  感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。  

     

    HTML：

    1. <div id="content">
    2.         <div id="box1">
    3.             <img src="https://pics2.baidu.com/feed/7af40ad162d9f2d3e50ebd1cc427d11b6227cc7e.jpeg?token=7fa70fec093a4a72080dfdc29ec75831">
    4.         div>
    5.         <div id="box2">
    6.             <img src="https://pics2.baidu.com/feed/7af40ad162d9f2d3e50ebd1cc427d11b6227cc7e.jpeg?token=7fa70fec093a4a72080dfdc29ec75831">
    7.         div>
    8.         <div id="box3">
    9.             <img src="https://pics2.baidu.com/feed/7af40ad162d9f2d3e50ebd1cc427d11b6227cc7e.jpeg?token=7fa70fec093a4a72080dfdc29ec75831">
    10.         div>
    11.         <div id="box4">
    12.             <img src="https://pics2.baidu.com/feed/7af40ad162d9f2d3e50ebd1cc427d11b6227cc7e.jpeg?token=7fa70fec093a4a72080dfdc29ec75831">
    13.         div>
    14.         <div id="box5">
    15.             <img src="https://pics2.baidu.com/feed/7af40ad162d9f2d3e50ebd1cc427d11b6227cc7e.jpeg?token=7fa70fec093a4a72080dfdc29ec75831">
    16.         div>
    17.         <div id="box6">
    18.             <img src="https://pics2.baidu.com/feed/7af40ad162d9f2d3e50ebd1cc427d11b6227cc7e.jpeg?token=7fa70fec093a4a72080dfdc29ec75831">
    19.         div>
    20.     div>

     

    CSS：

    CSS3 transform 属性：

    transform: none|transform-functions;

    值描述
    none定义不进行转换。
    matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。
    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。
    translate(x,y)定义 2D 转换。
    translate3d(x,y,z)定义 3D 转换。
    translateX(x)定义转换，只是用 X 轴的值。
    translateY(y)定义转换，只是用 Y 轴的值。
    translateZ(z)定义 3D 转换，只是用 Z 轴的值。
    scale(x[,y]?)定义 2D 缩放转换。
    scale3d(x,y,z)定义 3D 缩放转换。
    scaleX(x)通过设置 X 轴的值来定义缩放转换。
    scaleY(y)通过设置 Y 轴的值来定义缩放转换。
    scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
    rotate(angle)定义 2D 旋转，在参数中规定角度。
    rotate3d(x,y,z,angle)定义 3D 旋转。
    rotateX(angle)定义沿着 X 轴的 3D 旋转。
    rotateY(angle)定义沿着 Y 轴的 3D 旋转。
    rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
    skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
    skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
    skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
    perspective(n)为 3D 转换元素定义透视视图。

     

    CSS3 animation（动画） 属性：

    animation: name duration timing-function delay iteration-count direction fill-mode play-state;

    值说明
    animation-name指定要绑定到选择器的关键帧的名称
    animation-duration动画指定需要多少秒或毫秒完成
    animation-timing-function设置动画将如何完成一个周期
    animation-delay设置动画在启动前的延迟间隔。
    animation-iteration-count定义动画的播放次数。
    animation-direction指定是否应该轮流反向播放动画。
    animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
    animation-play-state指定动画是否正在运行或已暂停。
    1.  
    2.         body {
    3.             height: 100vh;
    4.             width: 100vw;
    5.             margin: 0;
    6.             padding: 0;
    7.         }
    8.  
    9.         #content {
    10.             width: 300px;
    11.             height: 300px;
    12.             position: absolute;
    13.             top: 50%;
    14.             margin-top: -150px;
    15.             left: 50%;
    16.             margin-left: -150px;
    17.             transform-style: preserve-3d;
    18.             animation: run 10s linear infinite;
    19.         }
    20.  
    21.         #content>div {
    22.             width: 300px;
    23.             height: 300px;
    24.             position: absolute;
    25.             opacity: 0.7;
    26.         }
    27.  
    28.         #box1 {
    29.             background-color: green;
    30.             transform: rotateX(90deg) translateZ(150px);
    31.         }
    32.  
    33.         #box2 {
    34.             background-color: red;
    35.             transform: rotateX(-90deg) translateZ(150px);
    36.         }
    37.  
    38.         #box3 {
    39.             background-color: blue;
    40.             transform: rotateY(90deg) translateZ(150px);
    41.         }
    42.  
    43.         #box4 {
    44.             background-color: yellow;
    45.             transform: rotateY(-90deg) translateZ(150px);
    46.         }
    47.  
    48.         #box5 {
    49.             background-color: pink;
    50.             transform: translateZ(-150px);
    51.         }
    52.  
    53.         #box6 {
    54.             background-color: orange;
    55.             transform: translateZ(150px);
    56.         }
    57.  
    58.         @keyframes run {
    59.             from {
    60.                 transform: rotateX(0) rotateY(0);
    61.             }
    62.             to {
    63.                 transform: rotateX(360deg) rotateY(360deg);
    64.             }
    65.         }
    66.  
    67.         div img {
    68.             width: 300px;
    69.             height: 300px;
    70.         }

     完整代码：

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title>魔方title>
    6.  
    7.         <style type="text/css">
    8.             body{
    9.                 height: 100vh;
    10.                 width: 100vw;
    11.  
    12.                 margin: 0;
    13.                 padding: 0;
    14.             }
    15.             #content{
    16.                 width: 300px;
    17.                 height: 300px;
    18.                 position: absolute;
    19.                 top: 50%;
    20.                 margin-top: -150px;
    21.                 left: 50%;
    22.                 margin-left: -150px;
    23.                 transform-style: preserve-3d;
    24.                 animation: run 10s linear infinite;
    25.             }
    26.             
    27.             #content > div{
    28.                 width: 300px;
    29.                 height: 300px;
    30.                 position: absolute;
    31.                 opacity: 0.7;
    32.             }
    33.             
    34.             #box1{
    35.                 background-color: green;
    36.                 transform:rotateX(90deg) translateZ(150px);
    37.             }
    38.             #box2{
    39.                 background-color: red;
    40.                 transform:rotateX(-90deg) translateZ(150px);
    41.             }
    42.             #box3{
    43.                 background-color: blue;
    44.                 transform:rotateY(90deg) translateZ(150px);
    45.             }
    46.             #box4{
    47.                 background-color: yellow;
    48.                 transform:rotateY(-90deg) translateZ(150px);
    49.             }
    50.             #box5{
    51.                 background-color: pink;
    52.                 transform:translateZ(-150px);
    53.             }
    54.             #box6{
    55.                 background-color: orange;
    56.                 transform:translateZ(150px);
    57.             }
    58.             
    59.             @keyframes run{
    60.                 from{
    61.                     transform: rotateX(0) rotateY(0);
    62.                 }
    63.                 to{
    64.                     transform: rotateX(360deg) rotateY(360deg);
    65.                 }
    66.             }
    67.             
    68.             div img{
    69.                 width: 300px;
    70.                 height: 300px;
    71.             }
    72.         style>
    73.     head>
    74.     
    75.     <body>
    76.         <div id="content">
    77.             <div id="box1">
    78.                 <img src="../img/1.jpg" >
    79.             div>
    80.             <div id="box2">
    81.                 <img src="../img/2.jpg" >
    82.             div>
    83.             <div id="box3">
    84.                 <img src="../img/3.jpg" >
    85.             div>
    86.             <div id="box4">
    87.                 <img src="../img/4.jpg" >
    88.             div>
    89.             <div id="box5">
    90.                 <img src="../img/5.jpg" >
    91.             div>
    92.             <div id="box6">
    93.                 <img src="../img/6.jpg" >
    94.             div>
    95.         div>
    96.     body>
    97. html>

     

     

    👉👉👉 欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。  

     

     

     

  • 相关阅读:
    SpringCloud Alibaba 入门到精通 - Nacos
    【无标题】
    被火车撞了都不能忘记的两个题(考验你的递归能力）
    GBase 8c产品简介
    系统学习Python——类（class）代码的编写基础与实例（一）：代码的编写基础
    项目人力资源管理
    Nvidia GPU 入门教程之 07 TensorFlow MNiST GPU A100（教程含源码）
    未来的金融服务永远不会停歇，牛市仍将继续 2021-05-28
    学生用RockyLinux9.2模板虚拟机说明
    RabbitMQ进阶教程三（整合springboot，延迟队列，发布确认高级，备份交换机）
  • 原文地址：https://blog.csdn.net/SmartJunTao/article/details/126136613