| Kosten | Вторник, 08 Октября 2019, 18:40 | Сообщение 1 |
| Если вы любите собак, то вам понравится эта небольшая коллекция фрагментов CSS, которые все о создании реалистичных. Собаки в этом списке анимированные, интерактивный, где несомненно станут забавным дополнением к любому проекту или веб-сайту. Не стесняйтесь настраивать любого из них, чтобы они больше походили на ваших собственных собак.
Этот фрагмент CSS создает собаку с тонкой анимацией. Собака с большими глазами, где качает хвостом вверх и вниз благодаря CSS-анимации, где все произведено без JavaScript.
Тема в том, что очень много интернет сайтов, которые посвящены различным животным, но а собака друг человека, то думаю здесь найдется много тематических ресурсов, где можно установить такую анимацию, которая соответствует тематическому направлению сайта.
HTML
Код <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./style.css"> <title>Cheerful Dog</title> </head> <body> <div class="dog"> <div class="body"> <div class="leg1"></div> <div class="leg2"></div> <div class="leg3"></div> <div class="leg4"></div> <div class="tail"></div> <div class="ear"></div> <div class="nose"></div> <div class="eye"></div> <div class="tongue"></div> </div> </div> </body> </html>
CSS
Код .dog {
background: #fdb44e;
height: 75px;
width: 120px;
position: absolute;
top: 40%;
left: 35%;
border-radius: 0 0 0 125px;
}
.body {
background-color: #fdb44e;
height: 100px;
width: 180px;
position: relative;
top: 55px;
left: 70px;
border-radius: 0 0 0 60px;
}
.leg1,
.leg2,
.leg3,
.leg4 {
background: #fdb44e;
height: 50px;
width: 18px;
position: relative;border-radius: 10px
}
.leg1 {
left: 20px;
top: 80px;
}
.leg2 {
left: 50px;
top: 30px;
}
.leg3 {
left: 135px;
bottom: 20px;
background: rgba(151, 89, 2, 0.5);
z-index: -1;
}
.leg4 {
left: 162px;
bottom: 70px;
}
.tail {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 100px solid #fdb44e;
position: relative;
bottom: 290px;
left: 160px;
transform: rotate(30deg);
transform-origin: bottom;
animation: wag 1s infinite;
}
@keyframes wag {
50% {
transform: rotate(10deg);
}
}
.ear {
background: rgba(151, 89, 2, 0.8);
width: 45px;
height: 90px;
border-radius: 0 0 100px 100px;
position: relative;
left: 5px;
bottom: 355px;
}
.nose {
background: #000;
height: 15px;
width: 15px;
border-radius: 50%;
position: relative;
bottom: 450px;
left: -80px;
}
.eye {
background: #000;
height: 10px;
width: 10px;
border-radius: 50%;
position: relative;
bottom: 450px;
left: -20px;
}
.tongue {
background: rgb(253, 97, 69);
height: 20px;
width: 8px;
border-radius: 10px;
position: relative;
bottom: 430px;
left: -50px;
transform: rotate(45deg);
z-index: -1;
animation: move .5s infinite;
}
@keyframes move {
50% {
transform: rotate(45deg) translateY(2.5px);
}
}
Как видим, что анимация происходит на чистых стилях.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Вторник, 08 Октября 2019, 18:49 | Сообщение 2 |
|
| Эта анимированная собака и сопровождающая ее кость созданы с использованием HTML, SVG-тегов и CSS. Кость перемещается вашим курсором, а глаза, брови и нос собаки следуют за костью, когда вы перемещаетесь по области просмотра. Этот фрагмент кода является наиболее интерактивным в нашем списке.
HTML
Код <div class="container"> <svg class="dogSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"> <defs> <clipPath id="mainMask"> <rect id="bg" width="600" height="600" rx="56" ry="56" fill="#C32747"/> </clipPath> </defs> <use xlink:href="#bg"/> <g id="dogGroup"> <rect id="earL" x="207" y="220" width="31" height="187" rx="15" ry="15" fill="#CC6A49"/> <rect id="earR" x="361" y="220.94" width="31" height="187" rx="15.7" ry="15.7" fill="#CC6A49"/> <ellipse id="head" cx="301" cy="285" rx="86" ry="94" fill="#E69C53"/> <rect id="earLTOP" x="207" y="220" width="31" height="187" rx="15" ry="15" fill="#CC6A49"/> <rect id="earRTOP" x="361" y="220.94" width="31" height="187" rx="15.7" ry="15.7" fill="#CC6A49"/> <rect id="snout" x="239" y="294" width="121" height="84.98" rx="42" ry="42" fill="#F1F4E4"/> <g id="nose" > <rect x="276" y="325" width="46" height="23" rx="11" ry="11" fill="#443F43"/> <path id="noseShine" fill="none" stroke="#AAABAF" stroke-width="4" stroke-linecap="round" d=" M282.1,337.7L282.1,337.7c0-4.2,3.4-7.6,7.6-7.6h20.4c4.2,0,7.6,3.4,7.6,7.6l0,0"/> </g> <!-- <rect id="noseShine" x="306" y="331" width="6" height="6" rx="3" ry="3" fill="#ededed"/> --> <g id="browGroup" stroke="#443F43" stroke-linecap="round" > <line id="browL" x1="250" y1="253" x2="290" y2="253" fill="none" stroke-miterlimit="10" stroke-width="7"/> <line id="browR" x1="309" y1="253" x2="349" y2="253" fill="none" stroke-miterlimit="10" stroke-width="7"/> </g> <g id="eyeGroup" fill="#443F43"> <g id="eyeSpinL"> <ellipse id="eyeL" class="eye" cx="270" cy="285" rx="7" ry="7" /> </g> <g id="eyeSpinR"> <ellipse id="eyeR" class="eye" cx="329" cy="285" rx="7" ry="7" /> </g> </g> </g> <g clip-path="url(#mainMask)"> <path id="bone" stroke="#AAABAD" stroke-width="4" fill="#F8FAF1" d="M108,28c7.7,0,14-6.3,14-14s-6.3-14-14-14S94,6.3,94,14H28c0-7.7-6.3-14-14-14S0,6.3,0,14s6.3,14,14,14 C6.3,28,0,34.3,0,42s6.3,14,14,14s14-6.3,14-14h66c0,7.7,6.3,14,14,14s14-6.3,14-14S115.7,28,108,28z"/> </g> </svg> </div>
CSS
Код body {
background-color:#F1F4E4;
overflow: hidden;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container{
position:absolute;
width:600px
}
svg{
width:100%;
visibility:hidden;
/* overflow:visible */
}
JS
Код var xmlns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink",
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
container = select('.container'),
dogSVG = select('.dogSVG'),
bone = select('#bone'),
browL = select('#browL'),
browR = select('#browR'),
eyeSpinL = select('#eyeSpinL'),
eyeSpinR = select('#eyeSpinR'),
stageWidth = 600,
stageHeight = stageWidth,
mousePos = {x:0,y:0}
//center the container cos it's pretty an' that
TweenMax.set(container, {
position: 'absolute',
top: '50%',
left: '50%',
xPercent: -50,
yPercent: -50
})
TweenMax.set('svg', {
visibility: 'visible'
})
TweenMax.set([nose, bone, '.eye'], {
transformOrigin:'50% 50%'
})
TweenMax.set(browL, {
transformOrigin:'0% 50%'
})
TweenMax.set(browR, {
transformOrigin:'100% 150%'
})
TweenMax.set([eyeSpinL,eyeSpinR], {
transformOrigin:'65% 50%'
})
var tl = new TimelineMax();
var eyeMaxY = 1;
var browMaxY = 2;
var browMaxRot = 0;
var snoutMinY = 2;
var snoutMaxY = 12;
var noseMaxY = 12;
var noseShineTL = new TimelineMax({paused:true});
noseShineTL.fromTo('#noseShine', 1, {
drawSVG:'0% 20%'
},{
drawSVG:'0% 50%',
ease:Linear.easeNone
})
.to('#noseShine', 1, {
drawSVG:'40% 60%',
ease:Linear.easeNone
})
.to('#noseShine', 1, {
drawSVG:'80% 100%',
ease:Linear.easeNone
})
dogSVG.onmousemove = function(e){
//console.log(((stageWidth/2) - e.offsetX) * -1)
mousePos.x = ((stageWidth/2) - e.offsetX) * -1;
mousePos.y = ((stageHeight/2) - e.offsetY) * -1;
TweenMax.to('#eyeGroup',1,{
x:mousePos.x/20,
y:((mousePos.y/12) > eyeMaxY) ? eyeMaxY : mousePos.y/12
})
TweenMax.to(browL,1,{
rotation:((mousePos.y/25) > browMaxRot) ? browMaxRot : mousePos.y/25
})
TweenMax.to(browR,1,{
rotation:-((mousePos.y/15) > browMaxRot) ? -browMaxRot : -mousePos.y/15
})
TweenMax.to('#browGroup',1,{
x:mousePos.x/40,
y:((mousePos.y/25) > browMaxY) ? browMaxY : mousePos.y/25
})
TweenMax.to('#snout',1,{
x:mousePos.x/30,
y:((mousePos.y/60) < snoutMinY) ? snoutMinY : mousePos.y/60
})
TweenMax.to('#nose',1,{
x:mousePos.x/8,
y:((mousePos.y/10) > noseMaxY) ? noseMaxY : mousePos.y/10
})
TweenMax.to(bone, 1, {
x:e.offsetX - (bone.getBBox().width/2),
y:e.offsetY- (bone.getBBox().height/2),
ease:Elastic.easeOut.config(0.7, 0.8)
})
TweenMax.to('#earL',1, {
x:-(mousePos.x/50),
y:-(mousePos.y/50)
})
TweenMax.to('#earR',1, {
x:-(mousePos.x/50),
y:-(mousePos.y/50)
})
TweenMax.to('#dogGroup',1, {
x:(mousePos.x/23),
y:(mousePos.y/23)
})
TweenMax.set(noseShineTL,{
time:noseShineTL.duration() - ((e.offsetX/stageWidth) * noseShineTL.duration())
})
}
function blink(){
TweenMax.to('.eye', 0.1,{
attr:{
ry:0
},
repeat:1,
yoyo:true,
onComplete:blink,
delay:Math.random() * 10
})
}
function sniff(){
TweenMax.to('#nose', 0.1,{
scaleX:1.1,
repeat:1,
yoyo:true,
onComplete:sniff,
delay:Math.random()
})
}
container.addEventListener('click', function(e){
TweenMax.to([bone,eyeSpinL, eyeSpinR], 1, {
rotation:'+=720',
onUpdate:function(){
TweenMax.set('.eye', {
rotation:-eyeSpinL._gsTransform.rotation
})
}
})
})
blink();
sniff();
dogSVG.onmousemove({offsetX:300, offsetY:60 })
Интересное решение, где водим не курсором, а костью, и у собаки поворачиваеться голова, по ту сторону, где кажется кость.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Вторник, 08 Октября 2019, 18:56 | Сообщение 3 |
|
| Этот фрагмент CSS создает симпатичную анимированную собачку, которая сидит в ванне. Хвост собаки виляет, а голова двигается слева направо. Анимация выполняется исключительно с помощью CSS и JavaScript, где теги SVG или jQuery не требуются.
HTML
Код <div class="contenedor"> <div class="todo"> <div class="dog"> <span class="leg3"></span> <div class="body"><span class="cola"></span><span class="leg"></span></div> <div class="cabezota"> <div class="orejas"><span class="orejitas"></span></div> <div class="orejas3"><span class="orejitas3"></span></div> <div class="cabeza"> <span class="cabeza3"></span> <span class="ojos"><span class="iris"></span></span> <span class="nariz"></span> <span class="nariz3"></span> </div> </div> <div class="canasta"></div> </div> </div> </div>
CSS
Код .contenedor{
position:relative;
width:800px;
height:600px;
background:#FCD7B9;
margin:90px auto;
}
.cabezota{
position:absolute;
width:30px;
height:30px;
background:red;
transform:rotate(12deg);
-moz-transform:rotate(12deg);
-webkit-transform:rotate(12deg);
transform-origin:0% 100%;
margin:225px 370px;
animation:gira 3s alternate infinite;
-moz-animation:gira 3s alternate infinite;
-webkit-animation:gira 3s alternate infinite;
}
.todo{
position:absolute;
margin:30px 90px;
}
.cabeza{
position:absolute;
width:121px;
height:121px;
border-radius:100%;
background:#3F5967;
margin:-102px -33px;
}
.cabeza::before{
content:"";
position:absolute;
width:132px;
height:102px;
border-radius:100%;
background:#3F5967;
margin:45px -5px;
}
.cabeza3{
position:absolute;
width:102px;
height:102px;
border-radius:100%;
background:#48636F;
margin:9px 10px;
}
.cabeza3::before{
content:"";
position:absolute;
width:112px;
height:80px;
border-radius:100%;
background:#48636F;
margin:50px -5px;
}
.ojos{
position:absolute;
width:21px;
height:30px;
border-radius:100%;
background:#121D21;
margin:60px 21px;}
.ojos::before{
content:"";
position:absolute;
width:21px;
height:30px;
border-radius:100%;
background:#121D21;
margin:1px 60px;}
.iris{
position:absolute;
width:9px;
height:9px;
border-radius:100%;
background:white;
margin:3px 6px
}
.iris::before{
content:"";
position:absolute;
width:9px;
height:9px;
border-radius:100%;
background:white;
margin:1px 60px
}
.nariz3::after{
content:"";
position:absolute;
width:7px;
height:5px;
border-radius:100%;
background:white;
margin:7px 5px;
}
.nariz{
position:absolute;
width:35px;
height:30px;
border-radius:100%;
background:#648999;
transform:rotate(-35deg);
-moz-transform:rotate(-35deg);
-webkit-transform:rotate(-35deg);
margin:99px 30px;
}
.nariz::before{
content:"";
position:absolute;
width:35px;
height:30px;
border-radius:100%;
background:#648999;
transform:rotate(70deg);
-moz-transform:rotate(70deg);
-webkit-transform:rotate(70deg);
margin:19px 25px;
}
.nariz3{
position:absolute;
width: 25px;
height: 21px;
border-radius:100%;
background:#121D21;
margin:90px 47px;
}
.ore{
position:absolute;
margin:90px 300px;
}
.orejas{
position:absolute;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 70px solid #586E7B;
margin: -152px -50px;
transform:rotate(-12deg);
-moz-transform:rotate(-12deg);
-webkit-transform:rotate(-12deg);
}
.orejitas{
position:absolute;
width: 0;
height: 0;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 55px solid #2D4149;
margin: -132px -21px;
}
.orejas::before{
content:"";
display:block;
width:30px;
height:30px;
border-radius:30px 30px 0 0;
background:#586E7B;
transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
margin:60px -31px
}
.orejas3{
position:absolute;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 70px solid #586E7B;
margin: -142px 50px;
transform:rotate(12deg);
-moz-transform:rotate(12deg);
-webkit-transform:rotate(12deg);
}
.orejas3::before{
content:"";
display:block;
width:30px;
height:30px;
border-radius:0 0 30px 30px;
background:#586E7B;
transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
margin:60px 1px
}
.orejitas3{
position:absolute;
width: 0;
height: 0;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 55px solid #2D4149;
margin: -132px -21px;
}
.body{
position:absolute;
width:155px;
height:142px;
border-radius:162px 30px 162px 162px;
background:#556C7A;
margin:255px 261px
}
.canasta{
position:absolute;
border-top: 152px solid #9DE3FD;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
height: 0;
width: 212px;
margin:295px 182px
}
.canasta::before{
content:"";
display:block;
width:281px;
height:21px;
border-radius:21px;
background:#D4F0F9;
border:1px solid gray;
margin:-157px -39px
}
.canasta::after{
content:"";
display:block;
width:231px;
height:21px;
border-radius:21px;
background:#D4F0F9;
border:1px solid gray;
margin:271px -12px
}
.leg{
position:absolute;
width:70px;
height:25px;
border-radius:12px;
background:#556C7A;
margin:12px 142px
}
.leg::before{
content:"";
display:block;
width:27px;
height:40px;
border-radius:0 0 12px 12px;
background:#556C7A;
margin:9px 43px
}
.leg3{
position:absolute;
width:75px;
height:25px;
border-radius:12px;
background:#2D4149;
margin:261px 403px
}
.leg3::before{
content:"";
display:block;
width:27px;
height:40px;
border-radius:0 0 12px 12px;
background:#2D4149;
margin:9px 48px
}
.cola{
position:absolute;
width:90px;
height:90px;
border-radius:100%;
border-bottom:30px solid #556C7A;
margin:-85px -27px;
transform:rotate(43deg);
-moz-transform:rotate(43deg);
-webkit-transform:rotate(43deg);
animation:gira3 .3s alternate infinite;
-moz-animation:gira3 .3s alternate infinite;
-webkit-animation:gira3 .3s alternate infinite;
}
@keyframes gira {
0%{
transform:rotate(6deg);
-moz-transform:rotate(6deg);
-webkit-transform:rotate(6deg);}
100%{
transform:rotate(-6deg);
-moz-transform:rotate(-6deg);
-webkit-transform:rotate(-6deg);}
}
@-moz-keyframes gira {
0%{
transform:rotate(6deg);
-moz-transform:rotate(6deg);
-webkit-transform:rotate(6deg);}
100%{
transform:rotate(-6deg);
-moz-transform:rotate(-6deg);
-webkit-transform:rotate(-6deg);}
}
@-webkit-keyframes gira {
0%{
transform:rotate(6deg);
-moz-transform:rotate(6deg);
-webkit-transform:rotate(6deg);}
100%{
transform:rotate(-6deg);
-moz-transform:rotate(-6deg);
-webkit-transform:rotate(-6deg);}
}
@keyframes gira3 {
0%{
transform:rotate(43deg);
-moz-transform:rotate(43deg);
-webkit-transform:rotate(43deg);}
100%{
transform:rotate(33deg);
-moz-transform:rotate(33deg);
-webkit-transform:rotate(33deg);}
}
@-moz-keyframes gira3 {
0%{
transform:rotate(43deg);
-moz-transform:rotate(43deg);
-webkit-transform:rotate(43deg);}
100%{
transform:rotate(33deg);
-moz-transform:rotate(33deg);
-webkit-transform:rotate(33deg);}
}
@-webkit-keyframes gira3 {
0%{
transform:rotate(43deg);
-moz-transform:rotate(43deg);
-webkit-transform:rotate(43deg);}
100%{
transform:rotate(33deg);
-moz-transform:rotate(33deg);
-webkit-transform:rotate(33deg);}
}
Демонстрация
| | Страна: (RU) |
| |
