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

[catsky]

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

要点

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

[xnode]

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

[www6688w]

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

[www6688w]

抓 css 很简单吧

[catsky]

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

[Sor]

怎么联系你呢?

[taoche]

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

[shaojz2005]

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

[shaojz2005]

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

[catsky]

联系我📮好了，多谢了
ee5bf2b7c593561f3cf772350015d3a8

[redbuck]

.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]

右键 审查元素 查看源代码

[catsky]

不好意思，用这个 email

emhkaHVpQGdtYWlsLmNvbQ==

[codingBug]


[Sor]

http://139.9.90.195/sample.html

[livnimasileid]

@redbuck #10 我的 200 元泡汤了

[catsky]

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

[Sor]

@redbuck 给力 赞

[telami]

各路神仙

[catsky]

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

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

[VancleefL]

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

[LZYBB]

@redbuck 攒

[sugars]

唉，来晚了，不然 200 到手

[yEhwG10ZJa83067x]

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

[redbuck]

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

[Motoi]

来晚了

[supersonic13]

钱真好赚。。。

[Sor]

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

[redbuck]

@livnimasileid 哈哈

@catsky 其实基本是原网站的

[momocraft]

找人给钱是好文明

[hyy1995]

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

[hitoriga]

@redbuck 哇 大佬 nb ！

[Balibabo]

专业前端，ODI0MzMyMzYy


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

[rebel28]

f12 直接就看到啊

[123s]

送钱啊

[wolfan]

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

[aapon]

真是送钱啊

[v2elephant]

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

[catsky]

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

[v3xe]

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

[grewer]

这么简单还能得 200..

[wuweijia]

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

[zxcslove]

《子贡赎人》

[ugu]

f12，自己看

[melvin]

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

[gbin]

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

V 站要求真高

[catsky]

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

[LlvlDd]

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

[cjc2017]

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

[scukmh]

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

[gIrl1990]

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

[qiukun]

@catsky #46 初中级

[hzhengy]

来晚了

[strugglexiang]

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

[MIMEIK]

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

[jason19659]

下次带我一个

[KasuganoSoras]

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

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

效果图：

[KasuganoSoras]

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

[catsky]

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

[KasuganoSoras]

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

[Junn]

突然觉东西这东西好值钱

[BarZu]

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

[catsky]

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

[catsky]

@KasuganoSoras 👍

[LyleRockkk]

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

[zhiguang]

@zxcslove 子路受牛

[geying]

评论什么风气

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

[zxcslove]

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

[justin2018]

楼主 以后还有类似需求么 😁 求加个好友~

[justin2018]

@catsky

https://paste.ubuntu.com/p/76Qnwytw2j/


[justin2018]

@KasuganoSoras 借用了一下你的背景图哈~

[KasuganoSoras]

正好我网站能用上，就改了下应用上去了，效果还不错

[catsky]

@justin2018 多谢，我微信号 Y2F0c2t5

[ayase252]

来晚了，F12 一看 rotate(5deg)感觉自己还是想象力不够啊

[MzM2ODkx]

来，200 平分了啊

[catsky]

@KasuganoSoras 我刚才发了最后一条消息，我的 qq 就把我强制退出了，提示涉嫌发布虚假信息，我去~~ 你能加我微信吗 我微信号 Y2F0c2t5

[KasuganoSoras]

@catsky #75 啊 这 我加了