Анимированная собака на CSS. 4 варианта реализации

Последнее бновение - 15 января 2023 в 14:48

Уже довольно давно я администрирую блог с дог-тематикой. Иногда хочется внести в дизайн что-нибудь новенькое. Этим новым элементом может стать, например, анимированная собака. Эффекта анимированной собаки можно достичь, используя средства HTML, CSS и JS.

Здесь я оставлю заметку с четырьмя примерами анимированных собачек, которые нашёл на форуме сайта для вебмастера. Первые три анимашки будут только на CSS, а четвёртая ещё и с применением JavaScript.

Мне сразу понравилась вот такая собачка, которая приветливо машет хвостом. Пёсик оживает лишь при использовании CSS. Обязательно воспользуюсь этой анимашкой на своём блоге про собак.

Собачка №1. Вёрстка

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

</div>

Собачка №1. Стили

.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);
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

.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);

}

Вторая анимация в виде купающейся в ванне собачки чёрного цвета. Она умеет вилять хвостиком и поворачивать голову. В данном случае всё также работает на HTML и CSS.

Собачка №2. Вёрстка

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

</div>

</div>

Собачка №2. Стили

body{
  background:black;
  
}

.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);}

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

body{

background:black;

}

.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);}

}

Третий грызлик снова при помощи CSS кивает головой, охраняя косточку. Тоже очень симпатично выглядит!

Собачка №3. Вёрстка

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

</div>

</div>

Собачка №3. Стили

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

.dog-head {
  z-index: 100;
  -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
---------------------------------------------------------*/

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

#container {

margin-top: 50px;

margin-left: 200px;

}

.dog-head {

z-index: 100;

-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

---------------------------------------------------------*/

@-webkit-keyframes head-move {

50% {

-webkit-transform: rotate(-1.5deg);

}

Четвёртый мохнатик ещё интереснее. Эффект получается при внедрении кодов HTML, SVG и CSS. В области просмотра можно курсором двигать косточку в разные стороны. При этом, внимательный пёс будет отслеживать каждое движение. А ещё, если кликнуть мышкой по косточке, она начинает вращаться!

Собачка №4. Вёрстка

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

<defs>

</clipPath>

</defs>

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

</g>

</g>

</g>

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

Собачка №4. Стили

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 */
}

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 */

}

Собачка №4. 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 })

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

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 })

Видео

Рекомендую к просмотру. Эту теорию могу подтвердить собственной практикой, своим опытом, который получил около 10 лет тому назад.

Всем WEB!

Анимированная собака

Видео

Об авторе: Hobo

Добавить комментарий Отменить ответ

Видео

Почитайте похожие материалы

Уведомление об использовании Cookie на сайте

Как напечатать точку и запятую на клавиатуре MacBook

Об авторе: Hobo

Добавить комментарий Отменить ответ