• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Собака в анимационном виде с помощью CSS (Анимируем животных виде собак при помощи HTML + CSS)
Собака в анимационном виде с помощью CSS
Kosten
 		Вторник, 08 Октября 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
« 554 »
Если вы любите собак, то вам понравится эта небольшая коллекция фрагментов 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);
    }
}

Как видим, что анимация происходит на чистых стилях.

Демонстрация
Прикрепления: 0899052.png (10.3 Kb)
Страна: (RU)
Kosten
 		Вторник, 08 Октября 2019 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
« 554 »
Эта анимированная собака и сопровождающая ее кость созданы с использованием 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 })


Интересное решение, где водим не курсором, а костью, и у собаки поворачиваеться голова, по ту сторону, где кажется кость.

Демонстрация
Прикрепления: 8164349.png (13.1 Kb)
Страна: (RU)
Kosten
 		Вторник, 08 Октября 2019 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
« 554 »
Этот фрагмент 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);}

}


Демонстрация
Прикрепления: 8765892.png (30.4 Kb)
Страна: (RU)
Kosten
 		Вторник, 08 Октября 2019 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44356
Награды: 70
« 554 »
Этот фрагмент CSS создает собаку с тонкой анимацией. Собака с большими глазами и маленькой костью качает головой вверх и вниз благодаря CSS-анимации, где все происходит без JavaScript.



HTML

Код
<div id=container>
  <div class="dog-head">
    <img src="http://www.clker.com/cliparts/j/3/Z/Y/D/5/dog-head-md.png">
  </div>

  <div class="dog-body">

  </div>
</div>

CSS

Код
#container {
  margin-top: 50px;
  margin-left: 200px;
}

.dog-head {
  z-index: 100;
  animation: head-move 1s ease-in-out infinite;
  -moz-animation: head-move 1s ease-in-out infinite;
  -webkit-animation: head-move 1s ease-in-out infinite;
}

div.dog-body {
  height: 300px;
  width: 225px;
  margin-top: -175px;
  margin-left: 40px;
  background-image: url('http://www.clker.com/cliparts/T/0/9/J/e/4/dog-body-md.png');
  background-repeat: no-repeat;
}

/*ANIMATIONS
---------------------------------------------------------*/

@keyframes head-move,
@-moz-keyframes head-move,
@-webkit-keyframes head-move {
  50% {
  transform: rotate(-1.5deg);
  -moz-transform: rotate(-1.5deg);
  -webkit-transform: rotate(-1.5deg);
  }
}

Демонстрация
Прикрепления: 3519034.png (68.2 Kb) · 2961110.png (22.3 Kb) · 7225085.png (28.7 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Собака в анимационном виде с помощью CSS (Анимируем животных виде собак при помощи HTML + CSS)
  • Страница 1 из 1
  • 1
Поиск: