Loading...
Графика/Дизайн | Как сделать такие кнопки?
JCtapuk (14.03.2020 в 21:55)
а что сложного для этого транформации rotage делаеш и радуеш

ну объясни мне на примере тогда.

Изображение

------
71076_controller__hover.png (21.6 Kb)
Скачиваний: 99
css
   .controller{border:0;margin-bottom:0} .controller td{height:128px;vertical-align:middle;padding:0;border-right:0;border-left:0} .controller__heal #heal{margin:0 auto;width:64px;height:64px;display:block;background:#171512 url("/images/background/icon-heal.png") no-repeat center;background-size:cover} .controller__heal #heal:hover{background:#171512 url("/images/background/icon-heal__hover.png") no-repeat center} .controller__cursor nav.cursor{background:#171512 url("images/controller.png") no-repeat center;background-size:cover;position:relative;padding:0;margin:0 auto;width:128px;height:128px;border-radius:50%;list-style:none;overflow:hidden} .controller__cursor nav.cursor:hover{background:#171512 url("/images/controller__hover.png") no-repeat center} .controller__cursor nav.cursor .sector{overflow:hidden;position:absolute;top:0;right:0;width:50%;height:50%;transform-origin:0% 100%} .controller__cursor nav.cursor .sector:first-child{transform:rotate(316deg) skewY(0deg)} .controller__cursor nav.cursor .sector:nth-child(2){transform:rotate(46deg) skewY(0deg)} .controller__cursor nav.cursor .sector:nth-child(3){transform:rotate(135deg) skewY(0deg)} .controller__cursor nav.cursor .sector:nth-child(4){transform:rotate(226deg) skewY(0deg)} .controller__cursor nav.cursor .sector-contents{overflow:hidden;position:absolute;left:-100%;width:200%;height:200%;border-radius:50%;border:1px dashed} .controller__magic a{margin:0 auto;width:64px;height:64px;display:block;background:#171512 url("/images/background/icon-magic.png") no-repeat center;background-size:cover} .controller__magic a:hover{background:#171512 url("/images/background/icon-magic__hover.png") no-repeat center}   
как это реализовать в html?
ой ржу ни могу!
Elenrill (14.03.2020 в 22:22)
css
   .controller{border:0;margin-bottom:0} .controller td{height:128px;vertical-align:middle;padding:0;border-right:0;border-left:0} .controller__heal #heal{margin:0 auto;width:64px;height:64px;display:block;background:#171512 url("/images/background/icon-heal.png") no-repeat center;background-size:cover} .controller__heal #heal:hover{background:#171512 url("/images/background/icon-heal__hover.png") no-repeat center} .controller__cursor nav.cursor{background:#171512 url("images/controller.png") no-repeat center;background-size:cover;position:relative;padding:0;margin:0 auto;width:128px;height:128px;border-radius:50%;list-style:none;overflow:hidden} .controller__cursor nav.cursor:hover{background:#171512 url("/images/controller__hover.png") no-repeat center} .controller__cursor nav.cursor .sector{overflow:hidden;position:absolute;top:0;right:0;width:50%;height:50%;transform-origin:0% 100%} .controller__cursor nav.cursor .sector:first-child{transform:rotate(316deg) skewY(0deg)} .controller__cursor nav.cursor .sector:nth-child(2){transform:rotate(46deg) skewY(0deg)} .controller__cursor nav.cursor .sector:nth-child(3){transform:rotate(135deg) skewY(0deg)} .controller__cursor nav.cursor .sector:nth-child(4){transform:rotate(226deg) skewY(0deg)} .controller__cursor nav.cursor .sector-contents{overflow:hidden;position:absolute;left:-100%;width:200%;height:200%;border-radius:50%;border:1px dashed} .controller__magic a{margin:0 auto;width:64px;height:64px;display:block;background:#171512 url("/images/background/icon-magic.png") no-repeat center;background-size:cover} .controller__magic a:hover{background:#171512 url("/images/background/icon-magic__hover.png") no-repeat center}   
как это реализовать в html?
Где стили взяты, там и разметка.
Elenrill (14.03.2020 в 21:42)
Добрый вечер. Объяснит мне кто нибудь как сделать такие кнопки?

Судя по скрину, открыт просмотр кода элемента, так ведь там и видна разметка, даже один из элементов джойстика выделен.
Онлайн: 5
Время:
Gen. 0.0757
(c) Bym.Guru 2010-2026