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

V2EX = way to explore

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

现在注册

已注册用户请登录

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

目标：提取 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-09-23 09:00:03 +08:00

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

www6688w

2019-09-23 09:00:38 +08:00

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

www6688w

2019-09-23 09:00:57 +08:00

抓 css 很简单吧

catsky

2019-09-23 09:01:14 +08:00

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

Sor

2019-09-23 09:01:38 +08:00

怎么联系你呢?

taoche

2019-09-23 09:03:48 +08:00

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

shaojz2005

2019-09-23 09:04:01 +08:00

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

shaojz2005

2019-09-23 09:04:24 +08:00

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

catsky

2019-09-23 09:04:37 +08:00

联系我📮好了，多谢了
ee5bf2b7c593561f3cf772350015d3a8

redbuck

2019-09-23 09:06:19 +08:00

.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-09-23 09:08:11 +08:00

右键审查元素查看源代码

catsky

2019-09-23 09:13:20 +08:00

不好意思，用这个 email

emhkaHVpQGdtYWlsLmNvbQ==

codingBug

2019-09-23 09:13:49 +08:00

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

Sor

2019-09-23 09:14:26 +08:00

http://139.9.90.195/sample.html

livnimasileid

2019-09-23 09:15:53 +08:00

@redbuck #10 我的 200 元泡汤了

catsky

2019-09-23 09:15:56 +08:00

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

Sor

2019-09-23 09:17:58 +08:00

@redbuck 给力赞

telami

2019-09-23 09:18:03 +08:00

各路神仙

catsky

2019-09-23 09:21:57 +08:00

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

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

VancleefL

2019-09-23 09:22:11 +08:00

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

LZYBB

2019-09-23 09:22:52 +08:00

@redbuck 攒

sugars

2019-09-23 09:24:36 +08:00

唉，来晚了，不然 200 到手

yEhwG10ZJa83067x

2019-09-23 09:26:04 +08:00

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

redbuck

2019-09-23 09:36:04 +08:00

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

Motoi

2019-09-23 09:36:12 +08:00

来晚了

supersonic13

2019-09-23 09:38:22 +08:00

钱真好赚。。。

Sor

2019-09-23 09:38:39 +08:00

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

redbuck

2019-09-23 09:39:11 +08:00

@livnimasileid 哈哈

@catsky 其实基本是原网站的

momocraft

2019-09-23 09:39:52 +08:00

找人给钱是好文明

hyy1995

2019-09-23 10:10:47 +08:00

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

hitoriga

2019-09-23 10:11:35 +08:00

@redbuck 哇大佬 nb ！

xutao881

2019-09-23 10:34:34 +08:00

专业前端，ODI0MzMyMzYy

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

violetlai

2019-09-23 10:45:00 +08:00

f12 直接就看到啊

123s

2019-09-23 10:45:02 +08:00

送钱啊

wolfan

2019-09-23 10:48:00 +08:00

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

aapon

2019-09-23 10:49:17 +08:00

真是送钱啊

v2elephant

2019-09-23 10:56:43 +08:00

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

catsky

2019-09-23 11:03:28 +08:00

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

v3xe

2019-09-23 11:28:02 +08:00 via iPhone

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

grewer

2019-09-23 11:31:55 +08:00

这么简单还能得 200..

wuweijia

2019-09-23 11:46:50 +08:00

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

zxcslove

2019-09-23 13:21:01 +08:00

《子贡赎人》

ugu

2019-09-23 13:22:25 +08:00

f12，自己看

melvin

2019-09-23 15:05:35 +08:00

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

gbin

2019-09-23 15:10:54 +08:00 via Android

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

V 站要求真高

catsky

2019-09-23 15:35:09 +08:00

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

LlvlDd

2019-09-23 15:50:29 +08:00

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

cjc2017

2019-09-23 18:06:02 +08:00

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

scukmh

2019-09-23 18:28:19 +08:00 via iPhone

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

gIrl1990

2019-09-23 18:30:33 +08:00

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

qiukun

2019-09-23 18:59:41 +08:00

@catsky #46 初中级

hzhengy

2019-09-23 19:43:55 +08:00 via Android

来晚了

strugglexiang

2019-09-23 19:53:44 +08:00

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

MIMEIK

2019-09-23 19:57:48 +08:00

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

jason19659

2019-09-24 01:01:24 +08:00

下次带我一个

KasuganoSoras

2019-09-24 05:21:24 +08:00

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

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

效果图：

KasuganoSoras

2019-09-24 05:28:17 +08:00

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

catsky

2019-09-24 07:27:58 +08:00

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

KasuganoSoras

2019-09-24 07:34:16 +08:00

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

Junn

2019-09-24 07:48:29 +08:00 via iPhone

突然觉东西这东西好值钱

BarZu

2019-09-24 08:25:46 +08:00 via Android

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

catsky

2019-09-24 09:03:08 +08:00

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

catsky

2019-09-24 09:03:28 +08:00

@KasuganoSoras 👍

LyleRockkk

2019-09-24 09:20:32 +08:00

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

zhiguang

2019-09-24 10:00:02 +08:00

@zxcslove 子路受牛

geying

2019-09-24 10:18:51 +08:00

评论什么风气

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

zxcslove

2019-09-24 10:49:22 +08:00

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