سلام رفیق رایا وردپرسی عزیزم! 😎
تا حالا به این فکر کردی چرا بعضی سایت‌ها اینقدر جذاب و گیرا هستن که کاربر رو مثل آهنربا به خودشون جذب می‌کنن؟ 🤔 خب، راز این سایت‌ها همونطور که حدس می‌زنی، جلب توجه کاربر هست! تو دنیای شلوغ اینترنت، تنها ۳ ثانیه وقت داری تا کاربر رو جذب کنی و نگه داری. یعنی در همون لحظه اولی که کاربر وارد سایتت میشه، باید کاری کنی که تصمیم بگیره بمونه، بیشتر اسکرول کنه و یا سایت رو دیرتر ترک کنه!
حالا چطور می‌تونی توجه کاربر رو جلب کنی تا بیشتر بمونه؟ خیلی ساده! با اضافه کردن المان‌های متفاوت و جذابی که شاید توی سایت‌های دیگه کمتر دیده باشه. تو این پست قراره یه المان چرخشی جالب به صفحه‌ات اضافه کنیم تا توجه کاربر رو به کلی به صفحه سایتت معطوف کنیم! 😊
پس تا آخر این پست منو با نگاه زیبات همراهی کن 🙂
📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD
اضافه کردن المان چرخشی به صفحه برای جلب توجه کاربران 🛞
حالا بریم سراغ اصل مطلب. با استفاده از ویجت HTML المنتور، می‌تونی انیمیشن‌های جذابی به سایتت اضافه کنی که توجه هر کسی رو جلب کنه. این انیمیشن‌ها می‌تونند شامل چرخش و تغییر مقیاس (scale) باشن که به طور مداوم اتفاق میفتن و باعث میشن المان‌های سایتت زنده و پویاتر به نظر برسن.
1. ویجت HTML رو اضافه کن
- برگه‌ای که می‌خوای المان رو بهش اضافه کنی با المنتور باز کن تا وارد محیط ویرایشگر بشی.
- حالا از پنل ویجت‌ها، ویجت «HTML» رو پیدا کن و توی قسمتی از صفحه که می‌خوای، بکش و رها کن.
- حالا کدهای زیر رو درون ویجت HTML ات پیست کن:
<div class="elementor-element elementor-element-837e4db e-con-full e-flex e-con e-child" data-id="837e4db" data-element_type="container" data-settings="{"background_background":"classic"}">
<div class="elementor-element elementor-element-ef84856 elementor-absolute svg-r18 elementor-view-default elementor-widget elementor-widget-icon" data-id="ef84856" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-fcbb292 elementor-absolute svg-r17 elementor-view-default elementor-widget elementor-widget-icon" data-id="fcbb292" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-5fa92c9 elementor-absolute svg-r16 elementor-view-default elementor-widget elementor-widget-icon" data-id="5fa92c9" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-f030a6a elementor-absolute svg-r15 elementor-view-default elementor-widget elementor-widget-icon" data-id="f030a6a" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-2d32410 elementor-absolute svg-r14 elementor-view-default elementor-widget elementor-widget-icon" data-id="2d32410" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-5f7aa50 elementor-absolute svg-r13 elementor-view-default elementor-widget elementor-widget-icon" data-id="5f7aa50" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-8a7db5f elementor-absolute svg-r12 elementor-view-default elementor-widget elementor-widget-icon" data-id="8a7db5f" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-600fdd6 elementor-absolute svg-r11 elementor-view-default elementor-widget elementor-widget-icon" data-id="600fdd6" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-7154c73 elementor-absolute svg-r10 elementor-view-default elementor-widget elementor-widget-icon" data-id="7154c73" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-7da14cd elementor-absolute svg-r9 elementor-view-default elementor-widget elementor-widget-icon" data-id="7da14cd" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-1a35422 elementor-absolute svg-r8 elementor-view-default elementor-widget elementor-widget-icon" data-id="1a35422" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-0c138ad elementor-absolute svg-r7 elementor-view-default elementor-widget elementor-widget-icon" data-id="0c138ad" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-3760f04 elementor-absolute svg-r6 elementor-view-default elementor-widget elementor-widget-icon" data-id="3760f04" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-b17c751 elementor-absolute svg-r5 elementor-view-default elementor-widget elementor-widget-icon" data-id="b17c751" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-b60e346 elementor-absolute svg-r4 elementor-view-default elementor-widget elementor-widget-icon" data-id="b60e346" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-32a59c6 elementor-absolute svg-r3 elementor-view-default elementor-widget elementor-widget-icon" data-id="32a59c6" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-7e6661f elementor-absolute svg-r2 elementor-view-default elementor-widget elementor-widget-icon" data-id="7e6661f" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-3d9fbae elementor-absolute svg-r1 elementor-view-default elementor-widget elementor-widget-icon" data-id="3d9fbae" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-5a7d5e3 elementor-absolute svg-r0 elementor-view-default elementor-widget elementor-widget-icon" data-id="5a7d5e3" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="icon.default">
<div class="elementor-widget-container">
<div class="elementor-icon-wrapper">
<div class="elementor-icon">
<svg xmlns="http://www.w3.org/2000/svg" id="Social_media_post_template" data-name="Social media post template" width="221.09" height="225.99" viewBox="0 0 221.09 225.99"><path d="M202.78,175.35,220.64,72.84c8.15-46.76-37.37-84.81-82-68.49L41,40.13C-3.59,56.45-13.78,114.91,22.64,145.35l79.84,66.73C138.91,242.52,194.63,222.11,202.78,175.35Z" transform="translate(-0.51 -0.5)"></path></svg> </div>
</div>
</div>
</div>
<div class="elementor-element elementor-element-3dfc34b svg-rc elementor-widget elementor-widget-image" data-id="3dfc34b" data-element_type="widget" data-widget_type="image.default">
<div class="elementor-widget-container">
<img decoding="async" width="512" height="512" src="https://www.rayawp.ir/wp-content/uploads/2024/08/cropped-Untitled-123647547547.png" class="attachment-large size-large wp-image-28150" alt="" srcset="https://www.rayawp.ir/wp-content/uploads/2024/08/cropped-Untitled-123647547547.png 512w, https://www.rayawp.ir/wp-content/uploads/2024/08/cropped-Untitled-123647547547.png 300w, https://www.rayawp.ir/wp-content/uploads/2024/08/cropped-Untitled-123647547547.png 150w" sizes="(max-width: 512px) 100vw, 512px"> </div>
</div>
</div>توجه! 🚨 برای تغییر عکس داخل المان چرخشی، کافیه کدهای خط ۱۵۶ رو ویرایش کنی و آدرس URL عکس دلخواهت رو جایگزین کنی. 🖼️
بعد از انجام مراحل، تصویر کار به این شکل در میاد. ولی هنوز کارمون تموم نشده! برای اینکه انیمیشن و افکت چرخش رو به المان اضافه کنیم و استایلش رو تنظیم کنیم، باید کدهای CSS رو بهش اضافه کنیم.
2. کدهای CSS رو اضافه کن
- به تب پیشرفته ویجت HTML برو و در بخش کلاس های CSS کلاس elementor-312 رو به ویجت اختصاص بده.
- تو همون تب پیشرفته به پایین اسکرول کن و در بخش کدهای CSS سفارشی کدهای زیر رو قرار بده:
.elementor-312 .elementor-element .elementor-icon svg{
fill:#00c6FF45
}
.e-con-full .elementor-widget-image .elementor-widget-container{
border-radius:80px!important
}
.elementor-312 .elementor-element .elementor-icon svg{
animation:hp 120s ease-in-out infinite;
width:450px;
height:auto
}
.elementor-312 .elementor-element .svg-rc .elementor-widget-container{
animation-delay:1s!important;
animation:hp3 120s ease-in-out infinite;
opacity:0
}
.elementor-312 .elementor-element .svg-rc img{
animation-delay:1s!important;
animation:hp3 120s ease-in-out infinite;
border-radus:0
}
.elementor-312 .elementor-element .svg-r1 .elementor-icon svg{
animation-delay:1.1s
}
.elementor-312 .elementor-element .svg-r2 .elementor-icon svg{
animation-delay:1.2s
}
.elementor-312 .elementor-element .svg-r3 .elementor-icon svg{
animation-delay:1.3s
}
.elementor-312 .elementor-element .svg-r4 .elementor-icon svg{
animation-delay:1.4s
}
.elementor-312 .elementor-element .svg-r5 .elementor-icon svg{
animation-delay:1.5s
}
.elementor-312 .elementor-element .svg-r6 .elementor-icon svg{
animation-delay:1.6s
}
.elementor-312 .svg-r7 .elementor-icon svg{
animation-delay:1.7s
}
.elementor-312 .elementor-element .svg-r8 .elementor-icon svg{
animation-delay:1.8s
}
.elementor-312 .elementor-element .svg-r9 .elementor-icon svg{
animation-delay:1.9s
}
.elementor-312 .elementor-element .svg-r10 .elementor-icon svg{
animation-delay:2s
}
.elementor-312 .elementor-icon svg{
animation-delay:2.1s
}
.elementor-312 .elementor-element .svg-r12 .elementor-icon svg{
animation-delay:2.2s
}
.elementor-312 .elementor-element .svg-r13 .elementor-icon svg{
animation-delay:2.3s
}
.elementor-312 .elementor-element .svg-r14 .elementor-icon svg{
animation-delay:2.4s
}
.elementor-312 .elementor-element .svg-r15 .elementor-icon svg{
animation-delay:2.5s
}
.elementor-312 .elementor-element .svg-r16 .elementor-icon svg{
animation-delay:2.6s
}
.elementor-312 .elementor-element .svg-r17 .elementor-icon svg{
animation-delay:2.7s
}
.elementor-312 .elementor-element .svg-r18 .elementor-icon svg{
animation-delay:2.8s
}
.elementor-312 .elementor-element-837e4db{
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
width:100%;
height:100vh
}
.elementor-312 .elementor-element-ef84856 .elementor-icon-wrapper{
text-align:center
}
.elementor-312 .elementor-element .elementor-icon .elementor-icon{
color:#00c6FF0D;
border-color:#00c6FF0D
}
.elementor-312 .elementor-element-ef84856 .elementor-icon svg{
fill:#00c6FF0D
}
.elementor-312 .elementor-element .elementor-icon-wrapper{
text-align:center
}
.elementor-312 .elementor-element-fcbb292 .elementor-icon{
color:#00c6FF17;
border-color:#00c6FF17
}
.elementor-312 .elementor-element-fcbb292 .elementor-element .elementor-icon svg{
fill:#00c6FF17
}
.elementor-312 .elementor-element.elementor-element-5fa92c9>.elementor-widget-container{
margin:0 0 -16px 0
}
.elementor-312 .elementor-element.elementor-element-5fa92c9.elementor-view-default .elementor-icon{
color:#00c6FF24;
border-color:#00c6FF24
}
.elementor-312 .elementor-element.elementor-element-5fa92c9.elementor-view-default .elementor-icon svg{
fill:#00c6FF24
}
.elementor-312 .elementor-element.elementor-element-f030a6a>.elementor-widget-container{
margin:0 0 -16px 0
}
.elementor-312 .elementor-element.elementor-element-f030a6a .elementor-icon-wrapper{
text-align:center
}
.elementor-312 .elementor-element.elementor-element-f030a6a.elementor-view-default .elementor-icon{
color:#00c6FF45;
border-color:#00c6FF45
}
.elementor-312 .elementor-element.elementor-element-f030a6a.elementor-view-default .elementor-icon svg{
fill:#00c6FF45
}
.elementor-312 .elementor-element.elementor-element-2d32410>.elementor-widget-container{
margin:0 0 -16px 0
}
.elementor-312 .elementor-element.elementor-element-2d32410 .elementor-icon-wrapper{
text-align:center
}
.elementor-312 .elementor-element.elementor-element-2d32410.elementor-view-default .elementor-icon{
color:#00c6ff;
border-color:#00c6ff
}
.elementor-312 .elementor-element.elementor-element-2d32410.elementor-view-default .elementor-icon svg{
fill:#00c6ff
}
.elementor-312 .elementor-element.elementor-element-5f7aa50>.elementor-widget-container{
margin:0 0 -16px 0
}
.elementor-312 .elementor-element.elementor-element-5f7aa50.elementor-view-default .elementor-icon{
color:#ffa2a2;
border-color:#ffa2a2
}
.elementor-312 .elementor-element.elementor-element-5f7aa50.elementor-view-default .elementor-icon svg{
fill:#ffa2a2
}
.elementor-312 .elementor-element.elementor-element-8a7db5f>.elementor-widget-container{
margin:0 0 -16px 0
}
.elementor-312 .elementor-element.elementor-element-8a7db5f.elementor-view-default .elementor-icon{
color:#ff00d6;
border-color:#ff00d6
}
.elementor-312 .elementor-element.elementor-element-8a7db5f.elementor-view-default .elementor-icon svg{
fill:#ff00d6
}
.elementor-312 .elementor-element.elementor-element-600fdd6>.elementor-widget-container{
margin:0 0 -16px 0
}
.elementor-312 .elementor-element.elementor-element-600fdd6 .elementor-icon-wrapper{
text-align:center
}
.elementor-312 .elementor-element.elementor-element-600fdd6.elementor-view-default .elementor-icon{
color:#eeff81;
border-color:#eeff81
}
.elementor-312 .elementor-element.elementor-element-600fdd6.elementor-view-default .elementor-icon svg{
fill:#eeff81
}
.elementor-312 .elementor-element.elementor-element-7154c73>.elementor-widget-container{
margin:0 0 -16px 0
}
.elementor-312 .elementor-element.elementor-element-7154c73 .elementor-icon-wrapper{
text-align:center
}
.elementor-312 .elementor-element.elementor-element-7154c73.elementor-view-default .elementor-icon{
color:#87ffcb;
border-color:#87ffcb
}
.elementor-312 .elementor-element.elementor-element-7154c73.elementor-view-default .elementor-icon svg{
fill:#87ffcb
}
.elementor-312 .elementor-element.elementor-element-7da14cd>.elementor-widget-container{
margin:0 0 -16px 0
}
.elementor-312 .elementor-element.elementor-element-7da14cd .elementor-icon-wrapper{
text-align:center
}
.elementor-312 .elementor-element.elementor-element-7da14cd.elementor-view-default .elementor-icon{
color:#87fff4;
border-color:#87fff4
}
.elementor-312 .elementor-element.elementor-element-7da14cd.elementor-view-default .elementor-icon svg{
fill:#87fff4
}
.elementor-312 .elementor-element.elementor-element-1a35422>.elementor-widget-container{
margin:0 0 -16px 0
}
.elementor-312 .elementor-element.elementor-element-1a35422 .elementor-icon-wrapper{
text-align:center
}
.elementor-312 .elementor-element.elementor-element-1a35422.elementor-view-default .elementor-icon{
color:#87d2ff;
border-color:#87d2ff
}
.elementor-312 .elementor-element.elementor-element-1a35422.elementor-view-default .elementor-icon svg{
fill:#87d2ff
}
.elementor-312 .elementor-element.elementor-element-0c138ad>.elementor-widget-container{
margin:0 0 -16px 0
}
.elementor-312 .elementor-element.elementor-element-0c138ad.elementor-view-default .elementor-icon{
color:#9487ff;
border-color:#9487ff
}
.elementor-312 .elementor-element.elementor-element-0c138ad.elementor-view-default .elementor-icon svg{
fill:#9487ff
}
.elementor-312 .elementor-element.elementor-element-3760f04>.elementor-widget-container{
margin:0 0 -16px 0
}
.elementor-312 .elementor-element.elementor-element-3760f04 .elementor-icon-wrapper{
text-align:center
}
.elementor-312 .elementor-element.elementor-element-3760f04.elementor-view-default .elementor-icon{
color:#c687ff;
border-color:#c687ff
}
.elementor-312 .elementor-element.elementor-element-3760f04.elementor-view-default .elementor-icon svg{
fill:#c687ff
}
.elementor-312 .elementor-element.elementor-element-b17c751>.elementor-widget-container{
margin:0 0 -16px 0
}
.elementor-312 .elementor-element.elementor-element-b17c751 .elementor-icon-wrapper{
text-align:center
}
.elementor-312 .elementor-element.elementor-element-b17c751.elementor-view-default .elementor-icon{
color:#ff87fc;
border-color:#ff87fc
}
.elementor-312 .elementor-element.elementor-element-b17c751.elementor-view-default .elementor-icon svg{
fill:#ff87fc
}
.elementor-312 .elementor-element.elementor-element-b60e346>.elementor-widget-container{
margin:0 0 -16px 0
}
.elementor-312 .elementor-element.elementor-element-b60e346 .elementor-icon-wrapper{
text-align:center
}
.elementor-312 .elementor-element.elementor-element-b60e346.elementor-view-default .elementor-icon{
color:#78ffd3;
border-color:#78ffd3
}
.elementor-312 .elementor-element.elementor-element-b60e346.elementor-view-default .elementor-icon svg{
fill:#78ffd3
}
.elementor-312 .elementor-element.elementor-element-32a59c6>.elementor-widget-container{
margin:0 0 -16px 0
}
.elementor-312 .elementor-element.elementor-element-32a59c6.elementor-view-default .elementor-icon{
color:#76f9ff;
border-color:#76f9ff
}
.elementor-312 .elementor-element.elementor-element-32a59c6.elementor-view-default .elementor-icon svg{
fill:#76f9ff
}
.elementor-312 .elementor-element.elementor-element-7e6661f>.elementor-widget-container{
margin:0 0 -16px 0
}
.elementor-312 .elementor-element.elementor-element-7e6661f.elementor-view-default .elementor-icon{
color:#78d1ff;
border-color:#78d1ff
}
.elementor-312 .elementor-element.elementor-element-7e6661f.elementor-view-default .elementor-icon svg{
fill:#78d1ff
}
.elementor-312 .elementor-element.elementor-element-3d9fbae>.elementor-widget-container{
margin:0 0 -16px 0
}
.elementor-312 .elementor-element.elementor-element-5a7d5e3>.elementor-widget-container{
margin:0 0 -16px 0
}
.elementor-312 .elementor-element.elementor-element-5a7d5e3{
z-index:11
}
.elementor-312 .elementor-element.elementor-element-5a7d5e3 .elementor-icon-wrapper{
text-align:center
}
.elementor-312 .elementor-element.elementor-element-5a7d5e3.elementor-view-default .elementor-icon{
color:#0d1534;
border-color:#0d1534
}
.elementor-312 .elementor-element.elementor-element-5a7d5e3.elementor-view-default .elementor-icon svg{
fill:#0d1534
}
.elementor-312 .elementor-element.elementor-element-5a7d5e3 .elementor-icon{
font-size:500px
}
.elementor-312 .elementor-element.elementor-element-3dfc34b>.elementor-widget-container{
padding:15% 15% 15% 15%;
border-style:solid;
border-width:1px 1px 1px 1px;
border-color:#00a5FF42;
border-radius:12px 12px 12px 12px;
box-shadow:39px -34px 51px -20px rgba(0,164.99999999999986,255,.5)
}
.elementor-312 .elementor-element.elementor-element-3dfc34b{
z-index:12
}
.elementor-312 .elementor-element.elementor-element-3dfc34b img{
width:138px;
opacity:0
}
.elementor-312 .elementor-element.elementor-element-18c2e92.elementor-view-default .elementor-icon{
fill:#ee64ff;
color:#ee64ff;
border-color:#ee64ff
}
.elementor-312 .elementor-element.elementor-element-837e4db .elementor-icon svg{
animation:hp 120s ease-in-out infinite;
right:0;
width:450px;
height:auto
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-rc .elementor-widget-container{
animation-delay:1s!important;
animation:hp3 120s ease-in-out infinite;
opacity:0
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-rc img{
animation-delay:1s!important;
animation:hp3 120s ease-in-out infinite;
border-radus:0
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r0 .elementor-icon svg{
animation-delay:1s!important;
animation:hp2 120s ease-in-out infinite
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r1 .elementor-icon svg{
animation-delay:1.1s
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r2 .elementor-icon svg{
animation-delay:1.2s
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r3 .elementor-icon svg{
animation-delay:1.3s
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r4 .elementor-icon svg{
animation-delay:1.4s
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r5 .elementor-icon svg{
animation-delay:1.5s
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r6 .elementor-icon svg{
animation-delay:1.6s
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r7 .elementor-icon svg{
animation-delay:1.7s
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r8 .elementor-icon svg{
animation-delay:1.8s
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r9 .elementor-icon svg{
animation-delay:1.9s
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r10 .elementor-icon svg{
animation-delay:2s
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r11 .elementor-icon svg{
animation-delay:2.1s
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r12 .elementor-icon svg{
animation-delay:2.2s
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r13 .elementor-icon svg{
animation-delay:2.3s
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r14 .elementor-icon svg{
animation-delay:2.4s
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r15 .elementor-icon svg{
animation-delay:2.5s
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r16 .elementor-icon svg{
animation-delay:2.6s
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r17 .elementor-icon svg{
animation-delay:2.7s
}
.elementor-312 .elementor-element.elementor-element-837e4db .svg-r18 .elementor-icon svg{
animation-delay:2.8s
}
@keyframes hp{
0%{
transform:rotate(0) scale(1)
}
10%{
transform:rotate(360deg) scale(1)
}
20%{
transform:rotate(720deg) scale(.6)
}
30%{
transform:rotate(360deg) scale(1)
}
40%{
transform:rotate(1800deg) scale(.9)
}
50%{
transform:rotate(2160deg) scale(1)
}
100%{
transform:rotate(1440deg) scale(1)
}
}
@keyframes hp2{
0%{
transform:rotate(0) scale(1)
}
10%{
transform:rotate(360deg) scale(1)
}
20%{
transform:rotate(720deg) scale(.6)
}
30%{
transform:rotate(360deg) scale(1)
}
40%{
transform:rotate(1800deg) scale(.9)
}
50%{
transform:rotate(2160deg) scale(1)
}
100%{
transform:rotate(1440deg) scale(1)
}
}
@keyframes hp3{
0%{
transform:rotate(0) scale(1);
opacity:0
}
10%{
transform:rotate(0) scale(1);
opacity:9
}
20%{
transform:rotate(0) scale(.6);
filter:hue-rotate(0)
}
30%{
transform:rotate(-10deg) scale(1);
filter:hue-rotate(100deg)
}
40%{
transform:rotate(25deg) scale(.9);
filter:hue-rotate(1080deg)
}
50%{
transform:rotate(0) scale(1);
opacity:1;
filter:hue-rotate(1080deg)
}
100%{
transform:rotate(0) scale(1);
opacity:0;
filter:hue-rotate(0)
}
}الان کار تمومه و نتیجه کار به شکل تصویر زیر خواهد بود
هورااااااا! حالا یه المان جذاب و خفن داری. با این المان چرخشی جذاب، می‌تونی توجه کاربر رو به راحتی جلب کنی و سایتت رو از بقیه متمایز کنی. مرسی که مثل همیشه از سایت خودتت حمایت میکنی تا یه آموزش خاص و جذاب دیگه فعلن 🙂
ارسال نظر ( 1 نظر تایید شده )
عالی