{"id":653271,"date":"2025-09-08T11:47:36","date_gmt":"2025-09-08T03:47:36","guid":{"rendered":"http:\/\/puo.cn\/?p=653271"},"modified":"2025-09-08T11:47:36","modified_gmt":"2025-09-08T03:47:36","slug":"wordpress%e4%be%a7%e8%be%b9%e6%a0%8f%e8%bd%ae%e7%95%aa%e5%9b%be%e6%96%87%e4%bb%a3%e7%a0%81","status":"publish","type":"post","link":"http:\/\/puo.cn\/?p=653271","title":{"rendered":"wordpress\u4fa7\u8fb9\u680f\u8f6e\u756a\u56fe\u6587\u4ee3\u7801"},"content":{"rendered":"

\"\"<\/p>\n

 <\/p>\n

<div style=”display: flex; flex-direction: column; gap: 15px; padding: 15px; background: #f8f9fa; border-radius: 12px;”>
\n<style>
\n@keyframes fadeInUp {
\nfrom { opacity: 0; transform: translateY(20px); }
\nto { opacity: 1; transform: translateY(0); }
\n}<\/p>\n

@keyframes pulse {
\n0% { box-shadow: 0 0 0 0 rgba(66, 153, 225, 0.4); }
\n70% { box-shadow: 0 0 0 10px rgba(66, 153, 225, 0); }
\n100% { box-shadow: 0 0 0 0 rgba(66, 153, 225, 0); }
\n}<\/p>\n

@keyframes carousel {
\n0% { opacity: 0; transform: translateX(100%); }
\n10% { opacity: 1; transform: translateX(0); }
\n33.33% { opacity: 1; transform: translateX(0); }
\n43.33% { opacity: 0; transform: translateX(-100%); }
\n100% { opacity: 0; transform: translateX(-100%); }
\n}<\/p>\n

.carousel-container {
\nposition: relative;
\nheight: 380px; \/* \u589e\u52a0\u9ad8\u5ea6\u5230380px *\/
\noverflow: hidden;
\nborder-radius: 12px;
\nbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
\nbackground: white;
\n}<\/p>\n

.carousel-item {
\nposition: absolute;
\ntop: 0;
\nleft: 0;
\nwidth: 100%;
\nheight: 100%;
\nopacity: 0;
\nanimation: carousel 12s infinite;
\ndisplay: flex;
\nflex-direction: column;
\npadding: 20px;
\nbox-sizing: border-box;
\n}<\/p>\n

.carousel-item:nth-child(1) { animation-delay: 0s; }
\n.carousel-item:nth-child(2) { animation-delay: 4s; }
\n.carousel-item:nth-child(3) { animation-delay: 8s; }<\/p>\n

.carousel-image {
\nwidth: 100%;
\nheight: 200px; \/* \u589e\u52a0\u56fe\u7247\u9ad8\u5ea6 *\/
\nobject-fit: cover;
\nborder-radius: 10px;
\nmargin-bottom: 15px;
\n}<\/p>\n

.carousel-content {
\nflex-grow: 1;
\ndisplay: flex;
\nflex-direction: column;
\njustify-content: space-between;
\n}<\/p>\n

.carousel-title {
\nfont-size: 18px;
\nfont-weight: bold;
\nmargin-bottom: 10px;
\ncolor: #333;
\n}<\/p>\n

.carousel-description {
\nfont-size: 14px;
\ncolor: #666;
\nmargin-bottom: 15px;
\nline-height: 1.5;
\nflex-grow: 1; \/* \u5141\u8bb8\u63cf\u8ff0\u533a\u57df\u6269\u5c55 *\/
\n}<\/p>\n

.carousel-button {
\ndisplay: inline-block;
\npadding: 10px 15px;
\nborder-radius: 6px;
\ncolor: white;
\ntext-decoration: none;
\nfont-weight: bold;
\ntext-align: center;
\ntransition: all 0.3s ease;
\ncursor: pointer;
\nborder: none;
\nfont-size: 14px;
\n}<\/p>\n

.btn-blue {
\nbackground: linear-gradient(135deg, #4285f4, #34a853);
\n}<\/p>\n

.btn-green {
\nbackground: linear-gradient(135deg, #34a853, #0f9d58);
\n}<\/p>\n

.btn-purple {
\nbackground: linear-gradient(135deg, #a142f4, #7b1fa2);
\n}<\/p>\n

.carousel-button:hover {
\ntransform: translateY(-2px);
\nbox-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
\n}<\/p>\n

.carousel-button:active {
\ntransform: translateY(1px);
\n}<\/p>\n

.indicators {
\ndisplay: flex;
\njustify-content: center;
\nmargin-top: 10px;
\n}<\/p>\n

.indicator {
\nwidth: 8px;
\nheight: 8px;
\nborder-radius: 50%;
\nbackground: #ccc;
\nmargin: 0 4px;
\ntransition: background 0.3s ease;
\n}<\/p>\n

.indicator.active {
\nbackground: #4285f4;
\n}
\n<\/style><\/p>\n

<div class=”carousel-container”>
\n<!– \u5361\u72471 –>
\n<div class=”carousel-item”>
\n<img src=”https:\/\/picsum.photos\/seed\/tech1\/400\/200.jpg” alt=”\u6280\u672f\u8d8b\u52bf” class=”carousel-image”>
\n<div class=”carousel-content”>
\n<div>
\n<h3 class=”carousel-title”>2023\u5e74\u6280\u672f\u8d8b\u52bf<\/h3>
\n<p class=”carousel-description”>\u63a2\u7d22\u4eba\u5de5\u667a\u80fd\u3001\u91cf\u5b50\u8ba1\u7b97\u548c\u751f\u7269\u6280\u672f\u7684\u6700\u65b0\u7a81\u7834\uff0c\u4e86\u89e3\u8fd9\u4e9b\u6280\u672f\u5982\u4f55\u6539\u53d8\u6211\u4eec\u7684\u751f\u6d3b\u548c\u672a\u6765\u5de5\u4f5c\u65b9\u5f0f\u3002<\/p>
\n<\/div>
\n<a href=”https:\/\/example.com\/tech-trends” class=”carousel-button btn-blue” target=”_blank”>\u4e86\u89e3\u66f4\u591a<\/a>
\n<\/div>
\n<\/div><\/p>\n

<!– \u5361\u72472 –>
\n<div class=”carousel-item”>
\n<img src=”https:\/\/picsum.photos\/seed\/design2\/400\/200.jpg” alt=”\u8bbe\u8ba1\u7075\u611f” class=”carousel-image”>
\n<div class=”carousel-content”>
\n<div>
\n<h3 class=”carousel-title”>UI\/UX\u8bbe\u8ba1\u7075\u611f<\/h3>
\n<p class=”carousel-description”>\u53d1\u73b0\u6700\u65b0\u7684\u8bbe\u8ba1\u8d8b\u52bf\u3001\u8272\u5f69\u642d\u914d\u548c\u7528\u6237\u4f53\u9a8c\u6280\u5de7\uff0c\u63d0\u5347\u60a8\u7684\u4ea7\u54c1\u8bbe\u8ba1\u6c34\u5e73\uff0c\u521b\u9020\u4ee4\u4eba\u5370\u8c61\u6df1\u523b\u7684\u7528\u6237\u754c\u9762\u3002<\/p>
\n<\/div>
\n<a href=”https:\/\/example.com\/design-inspiration” class=”carousel-button btn-green” target=”_blank”>\u63a2\u7d22\u8bbe\u8ba1<\/a>
\n<\/div>
\n<\/div><\/p>\n

<!– \u5361\u72473 –>
\n<div class=”carousel-item”>
\n<img src=”https:\/\/picsum.photos\/seed\/business3\/400\/200.jpg” alt=”\u5546\u4e1a\u7b56\u7565” class=”carousel-image”>
\n<div class=”carousel-content”>
\n<div>
\n<h3 class=”carousel-title”>\u521b\u4e1a\u5546\u4e1a\u7b56\u7565<\/h3>
\n<p class=”carousel-description”>\u5b66\u4e60\u6210\u529f\u4f01\u4e1a\u5bb6\u7684\u5546\u4e1a\u7b56\u7565\uff0c\u4e86\u89e3\u5e02\u573a\u5b9a\u4f4d\u3001\u54c1\u724c\u5efa\u8bbe\u548c\u5ba2\u6237\u83b7\u53d6\u7684\u6709\u6548\u65b9\u6cd5\uff0c\u52a0\u901f\u60a8\u7684\u4e1a\u52a1\u589e\u957f\u3002<\/p>
\n<\/div>
\n<a href=”https:\/\/example.com\/business-strategy” class=”carousel-button btn-purple” target=”_blank”>\u67e5\u770b\u7b56\u7565<\/a>
\n<\/div>
\n<\/div>
\n<\/div><\/p>\n

<div class=”indicators”>
\n<div class=”indicator active”><\/div>
\n<div class=”indicator”><\/div>
\n<div class=”indicator”><\/div>
\n<\/div>
\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

  <div style=”display: flex; flex-direction: column; gap: 15px; padding: 15px; background: #f8f9fa; border…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[136],"tags":[404],"topic":[342],"class_list":["post-653271","post","type-post","status-publish","format-standard","hentry","category-136","tag-wordpress","topic-wordpress"],"_links":{"self":[{"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts\/653271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=653271"}],"version-history":[{"count":1,"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts\/653271\/revisions"}],"predecessor-version":[{"id":653274,"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts\/653271\/revisions\/653274"}],"wp:attachment":[{"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=653271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=653271"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=653271"},{"taxonomy":"topic","embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftopic&post=653271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}