Новые ответы с меткой less
2
mask SVG
Создаем path по форме рамки, включаем его в SVG mask и обрезаем область изображения, которая находится вне маски.
<style>
.img {
mask:url(#msk);
}
</style>
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" version="1.1">
<mask id="msk"...
ответ дан 27 мар в 16:29
Alexandr_TT
90.7k2020 золотых знаков8989 серебряных знаков259259 бронзовых знаков
4
необходимо, чтобы при наведении эта рамка сложной формы вращалась на
360 градусов
Совсем простой вариант:
body{padding:0;overflow:hidden;}
.item {
position: relative; overflow: hidden; width: 180px; height: 180px;
border-radius: 120% 120% 170% 100% / 120% 120% 150% 150%;
transition: transform 2s;
}
.item::before {
content: ""; position: ...
ответ дан 27 мар в 13:53
Sevastopol'
26.9k1212 золотых знаков5858 серебряных знаков117117 бронзовых знаков
5
Обычный border-radius и ни какого svg
.item {
width: 300px;
height: 300px;
border-radius: 49% 51% 50% 50% / 86% 32% 68% 14%;
background: url(https://yt3.ggpht.com/a/AATXAJwNLWXw1UnVIqUZu9Kj3qEMX3HkXv7ry4NQq5W7=s900-c-k-c0xffffffff-no-rj-mo);
background-size: cover;
animation: move 5s linear infinite;
}
@keyframes move {
0% {
border-...
ответ дан 26 мар в 14:09
MaximLensky
13.8k22 золотых знака1313 серебряных знаков5656 бронзовых знаков
50 лучших ответов включены
Связанные метки
less × 150css × 86
html × 27
sass × 22
javascript × 20
gulp × 15
css3 × 10
вёрстка × 9
webpack × 9
scss × 9
node.js × 5
reactjs × 5
flexbox × 5
phpstorm × 5
media-queries × 5
bootstrap × 4
svg × 4
webstorm × 4
адаптивная-верстка × 3
sublime-text-3 × 3
jquery × 2
linux × 2
wordpress × 2
angular × 2
frontend × 2