¥200 求高手。求提取一个 html 元素的 CSS (JS)，自己搞不定

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 2309 天前的主题，其中的信息可能已经有所发展或是发生改变。

目标：提取 https://alexperryhotelandapartments.com.au 左下角的 “PRICE CHECK NOW" 那个”按钮“html，css （ js ），放在自己的一个 html 页面，达到一样的外观和动画效果。不需要提取点击后出现页面的内容。如果动画效果是用 css 实现的，js 不提取也没关系。

要点

提取后，要有清晰，整洁的 html, css (js)结构，方便我以后进行定制
提取后所有 css （ js)不能引用第三方网站
提取后，比如放在这个 html 文件里 sample.html, 我可以通过 python -m SimpleHTTPServer 预览效果

Markdown

提取

CSS

HTML

Markdown

76 条回复 • 2021-05-21 07:56:44 +08:00

xnode

2019 年 9 月 23 日

..... 老哥手工写就行了,这个没什么复杂的

www6688w

2019 年 9 月 23 日

所以呢，，联系方式呢 (￣△￣；)

www6688w

2019 年 9 月 23 日

抓 css 很简单吧

catsky

2019 年 9 月 23 日

@xnode 哥，主要我 css 技术不过关啊，😂

Sor

2019 年 9 月 23 日

怎么联系你呢?

taoche

2019 年 9 月 23 日

如果你可以帮我一个 ruby 的忙，作为交换我可以免费帮你处理这个问题

shaojz2005

2019 年 9 月 23 日

就是一个异形的按钮和一个类似呼吸的动态效果嘛

shaojz2005

2019 年 9 月 23 日

这个没有 js，就是 css 实现的效果

catsky

2019 年 9 月 23 日

联系我📮好了，多谢了
ee5bf2b7c593561f3cf772350015d3a8

redbuck

2019 年 9 月 23 日

.box {
width: 500px;
height: 200px;
background-color: #8e764a;
position: absolute;
bottom: -100px;
left: -50px;
transform: rotate(5deg);
animation: popup 1s infinite;
}

@keyframes popup {
0% {
background: #8e764a;
bottom: -105px;
}
50% {
background: #80673b;
bottom: -100px;
}
100% {
background: #8e764a;
bottom: -105px;
}
}

html

<div class="box"></div>

yunhu

2019 年 9 月 23 日

右键审查元素查看源代码

catsky

2019 年 9 月 23 日

不好意思，用这个 email

emhkaHVpQGdtYWlsLmNvbQ==

codingBug

2019 年 9 月 23 日

![image]( https://user-images.githubusercontent.com/11707934/65397406-6ea27a00-dde2-11e9-8566-b605c035c159.png)

Sor

2019 年 9 月 23 日

http://139.9.90.195/sample.html

livnimasileid

2019 年 9 月 23 日

@redbuck #10 我的 200 元泡汤了

catsky

2019 年 9 月 23 日

@redbuck 哇塞你太厉害，短短几行

Sor

2019 年 9 月 23 日

@redbuck 给力赞

telami

2019 年 9 月 23 日

各路神仙

catsky

2019 年 9 月 23 日

@redbuck 把你的微信私信给我吧，转钱给你。你是第一个给出方案的，而且简洁好用，👍

如果是稍微做下 responsive 就更好了

VancleefL

2019 年 9 月 23 日

我为什么没早点看到这条帖子

LZYBB

2019 年 9 月 23 日

@redbuck 攒

sugars

PRO

2019 年 9 月 23 日

唉，来晚了，不然 200 到手

yEhwG10ZJa83067x

2019 年 9 月 23 日

@Sor 建议不要把 ip 暴露哦，把你的放在这里就行了
效果： https://output.jsbin.com/roqicarike
代码： https://jsbin.com/roqicarike/edit?html,css,js,output

redbuck

2019 年 9 月 23 日

@catsky
哈哈,不用了,反正也是闲着

Motoi

2019 年 9 月 23 日

来晚了

supersonic13

2019 年 9 月 23 日

钱真好赚。。。

Sor

2019 年 9 月 23 日

@justrand 嘿嘿感谢! 闲置小鸡马上到期了

redbuck

2019 年 9 月 23 日

@livnimasileid 哈哈

@catsky 其实基本是原网站的

momocraft

2019 年 9 月 23 日

找人给钱是好文明

hyy1995

2019 年 9 月 23 日

哇，这钱太容易赚了吧。。真的很简单的。。。

hitoriga

2019 年 9 月 23 日

@redbuck 哇大佬 nb ！

xutao881

2019 年 9 月 23 日

专业前端，ODI0MzMyMzYy

以后有这种活直接打钱，哈哈哈哈

violetlai

2019 年 9 月 23 日

f12 直接就看到啊

123s

2019 年 9 月 23 日

送钱啊

wolfan

2019 年 9 月 23 日

lz 好心人吖，这样子发红 @包，下次一定要喊上俺吖

aapon

2019 年 9 月 23 日

真是送钱啊

v2elephant

2019 年 9 月 23 日

老哥,谈钱就有点看不起我们了

catsky

2019 年 9 月 23 日

@redbuck 多谢啊，只能多送你几个铜板了

v3xe

2019 年 9 月 23 日 via iPhone

喜欢你这样有价值的问题，希望多来两个给我。

grewer

2019 年 9 月 23 日

这么简单还能得 200..

wuweijia

2019 年 9 月 23 日

在 v 站这个级别的技术问题谈钱看不起人啊

zxcslove

2019 年 9 月 23 日

《子贡赎人》

ugu

2019 年 9 月 23 日

f12，自己看

melvin

2019 年 9 月 23 日

2 行代码搞定的事情，这居然还花钱买，原谅我笑 cry ～

gbin

2019 年 9 月 23 日 via Android

不花钱会被骂伸手党，花钱少会被骂看不起程序员的时间，花钱“多”了还要被骂看不起人?

V 站要求真高

catsky

2019 年 9 月 23 日

报酬参考的是澳洲初中级程序员时薪，我本来预估这个至少也得半小时-1 小时的工作量，现在发现技术水平限制了我的想象 😆

LlvlDd

2019 年 9 月 23 日

@catsky #46 CSS 已然成为一门玄学

cjc2017

2019 年 9 月 23 日

@catsky 老哥以后这种脏活累活请直接 @我

scukmh

2019 年 9 月 23 日 via iPhone

以后有这种好活直接打钱就完事了🥺

gIrl1990

2019 年 9 月 23 日

脏活累活我拿手滴，让我来。

qiukun

2019 年 9 月 23 日

@catsky #46 初中级

hzhengy

2019 年 9 月 23 日 via Android

来晚了

strugglexiang

2019 年 9 月 23 日

@justrand 老哥有点强啊，我怎么写不出来

MIMEIK

2019 年 9 月 23 日

我还以为 CSS 有啥骚操作？真就白给啊

jason19659

2019 年 9 月 24 日

下次带我一个

KasuganoSoras

2019 年 9 月 24 日

给你完美还原了一下，纯手工写的，搞了一个多小时，前端比较渣没办法。。

Demo： https://cdn.zerodream.net/code/test.html
源码： https://github.com/kasuganosoras/SomeCodes/blob/master/v2ex_603187.html

效果图：

KasuganoSoras

2019 年 9 月 24 日

因为有点困了所以就没做移动端适配。。凑合着用吧，如果有需要其他的私信我 QQ 204034

catsky

2019 年 9 月 24 日

@KasuganoSoras 👍，多谢，你的网站我在澳洲打不开：）

KasuganoSoras

2019 年 9 月 24 日

@catsky #58 那就直接看 github 上的源码吧，我有两台国内的服务器没 peer 国外，所以打不开，你直接 clone 到本地打开 html 就可以看到了。

Junn

2019 年 9 月 24 日 via iPhone

突然觉东西这东西好值钱

BarZu

2019 年 9 月 24 日 via Android

快点加楼主微信，说不定以后还有好多这类需求

catsky

2019 年 9 月 24 日

是的，类似的前端任务以后还会有，有兴趣的可以合作

catsky

2019 年 9 月 24 日

@KasuganoSoras 👍

LyleRockkk

2019 年 9 月 24 日

@KasuganoSoras 这位老哥可真用心，点个赞

zhiguang

2019 年 9 月 24 日

@zxcslove 子路受牛

geying

2019 年 9 月 24 日

评论什么风气

看了一下按钮是 div 旋转了 5 度，一个上下移动的动画
@-webkit-keyframes angle_highlight_PCH3CK { 0% { background:#00aeef; top:-35px; } 50% { background:#018cc0; top:-40px; } 100% { background:#00aeef; top:-35px; }}

zxcslove

2019 年 9 月 24 日

@zhiguang 怪李眼儿红咯...........doge