模仿世纪佳缘网站上的效果

紫微前端

于 2020-11-17 13:22:15 发布

阅读量516

点赞数

CC 4.0 BY-SA版权

分类专栏：原生javascript制作各种酷炫组件文章标签： html

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/109740583

原生javascript制作各种酷炫组件专栏收录该内容

157 篇文章 ¥89.90 ¥99.00

订阅专栏

本文探讨如何使用HTML来复现世纪佳缘网站的界面和交互效果，包括布局设计、表单构建和动态功能的实现。通过学习，读者可以掌握更高级的HTML应用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;font-size: 0}
        .img{
            animation-name: ani_bottom_item;
            animation-duration: 4s;
            width: 390px;height:390px;
        }
        @-webkit-keyframes ani_bottom_item {
            0%   { width: 20px;height:20px; }
            100% { width: 390px;height:390px;}
        }
    </style>
</head>
<body>
<img src="img/1.jpg" class="img">
<img src="img/2.jpg" class="img">
<img src="img/3.jpg" class="img">
<img src="img/4.jpg" class="img">
<img src="img/5.jpg" class="img">
<img src="img/1.jpg" class="img">

了解本专栏