47.112.232.56 Open in urlscan Pro
47.112.232.56  Public Scan

Form analysis
1 forms found in the DOM

GET /ask/search.html

<form class="form-inline navbar-form search-form" action="/ask/search.html" method="get">
  <input class="form-control" name="q" value="" type="text" id="searchinput" placeholder="搜索问题、话题或文章">
</form>

Text Content

Toggle navigation
 * 首页
 * 发现

 * 
 * Ask
 * User
   * 登 录
   * 注 册

Warm tip: This article is reproduced from serverfault.com, please click
clip-path css


ROTATE CLIP-PATH FROM BOTTOM RIGHT SIDE TO THE BOTTOM LEFT SIDE

发布于 2021-08-21 06:51:43

I have a button on css:



button {
  background: #FB5D5D;
  width: 350px;
  height: 54px;
  border-radius: 4px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  color: white;
  border: none;
  transition: clip-path 3s ease, transform 3s ease, -webkit-clip-path 3s ease;
}

button:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(-90deg, #D92121 0%, #FF6464 100%);
  z-index: -1;
  transition: clip-path .3s ease;
  clip-path: polygon(200% 0, 0 200%, 0 0);
}

button:hover:after {
  clip-path: polygon(0 0, 0 0, 0 0);
}

<button type="submit" class="w-full font-bold">Send</button>

Run code snippetHide results
Expand snippet




How I can start animation from bottom left side, but not right? I need when user
hover on button, animation should start from left and go to from light bg to
dark (light сolor should be on the whole button as it is now). Help please.
Thanks.

Questioner
Jadasdas
Viewed
0
Original

分享

Parvat . R 2021-08-21 15:15:00

You can do that by just using transfomr: rotateY(0.5turn); to rotate that 90deg
and make that animation from right.


EDIT

change the angle of the background-gradient -270deg to move the dark side to
right.



button {
  background: #FB5D5D;
  width: 350px;
  height: 54px;
  border-radius: 4px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  color: white;
  border: none;
  transition: clip-path 3s ease, transform 3s ease, -webkit-clip-path 3s ease;
}

button:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(-270deg, #D92121 0%, #FF6464 100%);
  z-index: -1;
  transition: clip-path .3s ease;
  clip-path: polygon(200% 0, 0 200%, 0 0);
  transform: rotateY(0.5turn);
}

button:hover:after {
  clip-path: polygon(0 0, 0 0, 0 0);
}

<button type="submit" class="w-full font-bold">Send</button>

Run code snippetHide results
Expand snippet




Jadasdas 2021-08-21 07:12:47


dark side of gradient must be on right, but not left :) I need rotate only
clip-path animation


热门帖子

1
Apple Vision Pro 应用探讨脑洞开一下
2
广州市电动自行车通行管理调整政策，今起再次向社会公开征求意见
3
听说房地产行业的现状“密不发丧” ，大家怎么看
4
3 年 Java ，坐标深圳求职，也接受上海，也希望站友能提出点意见
5
程序员聊天吹水群，有兴趣的可以加入一下
6
你们会在个人简历里放上自己的 github 账号么？
7
上行卡 95m/190m 的老上海联通用户明天早上可以试试看是否可以跑到 120mbps/240mbps
8
聊聊新买的电瓶车
9
一个关于屏蔽全家的短视频的想法
10
扇面题字，题点啥？


热门GITHUB

1
<⚡️> SuperAGI - A dev-first open source autonomous AI agent framework. Enabling
developers to build, manage & run useful autonomous agents quickly and reliably.
2
科技爱好者周刊，每周五发布
3
Starter files, final projects, and FAQ for my Ultimate React course
4
Enable everyone to develop, optimize and deploy AI models natively on everyone's
devices.
5
We propose HQ-SAM to upgrade SAM for high-quality zero-shot segmentation.
6
ReactPy is a library for building user interfaces in Python without Javascript.
ReactPy interfaces are made from components that look and behave similar to
those found in ReactJS.
7
Collection of Summer 2023 & Summer 2024 tech internships!
8
Decoupling Reasoning from Observations for Efficient Augmented Language Models
9
OpenDAN is an open source Personal AI OS , which consolidates various AI modules
in one place for your personal use.
10
A collection of scientific methods, processes, algorithms, and systems to build
stories & models. This roadmap contains 16 Chapters, whether you are a fresher
in the field or an experienced professional who wants to transition into Data
Science & AI
11
A list of Summer 2024 internships for software engineering, updated
automatically everyday
12
Port of Facebook's LLaMA model in C/C++
13
Open source codebase powering the HuggingChat app
14
100% Open Source CSGO
15
Curated list of project-based tutorials
×


Copyright © 2017-2020 Powered by nuomiphp All Rights Reserved 我的网站 Copyrights