css艺术家是什么意思

2023-04-12 01:35:01html-css020

css艺术家是什么意思,第1张

由于css具备交互层叠动画等功能，可以使用css来绘制许多优美的画面，CSS像艺术家一样优雅，像工程师一样严谨。所以说css像艺术家

第五届CSS大会是袁川大佬在css大会首秀，利用css-doodle制作出了很多图案，属实惊艳。css-doodle可以帮助轻松的使用Custom Elements、Shadow DOM和CSS Grid创建任何你想要的图案（CSS 图案）。（注意：css-doodle组件到目前为止只在最新的Chrome和Safari浏览器上可以正常的运行。）

这里需要强调的一点是，ie不支持css3的动画属性，再次抱怨下万恶的ie。但是我们不能以此为理由不去拥抱css3。

我们先来看html代码。

复制代码

代码如下:

<!DOCTYPE html>

<html>

<head>

type="text/css"

href="css/google-doodle-animation-in-css3-without-javascript.css"/>

</head>

<body>

<div

class="frame">

</div>

<label for="play_button"

id="play_label"></label>

<input type="checkbox" id="play_button"

name="play_button"/>

<img

src="img/muybridge12-hp-p.jpg"/>

</span>

<div

class="horse"></div>

</div>

</body>

</html>

下面是部分css。

复制代码

代码如下:

*{margin:0pxpadding:0px}

#logo{position: relative}

.horse{

width:469px

height:54px

background: url('../img/muybridge12-hp-f.jpg')

}

.frame{position:absoluteleft:0top:0z-index: 1}

#play_button{display:

none}

#play_label{

width:67px

height:54px

display:block

position: absolute

left:201px

top:54px

z-index: 2

}

#play_image{

position: absolute

left:201px

top:54px

z-index: 0

overflow: hidden

width: 68px

height: 55px

}

#play_image img{

position: absolute

left: 0

top: 0

}

这部分代码没太大难度，我就不做详细讲解了。css基础不是很扎实的读者，也许会疑惑【开始】按钮是如何实现定位的。可以自行阅读position属性，了解absolute具体作用。

下面是上述html和css代码完成的页面效果。

pic

下面我们来介绍如何产生动画效果。我们首先需要定义关键帧，他规定动画在不同阶段的效果。大家可以通过http://www.w3schools.com/css3/css3_animations.asp

了解更多信息。

我们创建了一个名为horse-ride的关键帧，针对chrome和firefox需要在前面添加-webkit-或者是-moz-前缀。0%和100%分别代码开始和结束，可以根据需要增加新的case，比如50%时的动画效果。

复制代码

代码如下:

@-webkit-keyframes horse-ride {

{background-position: 0 0}

% {background-position: -804px 0}

}

@-moz-keyframes horse-ride {

% {background-position: 0 0}

{background-position: -804px 0}

}

下面，我们来为horse添加css3的动画效果。

复制代码

代码如下:

#play_button:checked ~.horse{

-webkit-animation:horse-ride 0.5s steps(12,end) infinite

-webkit-animation-delay:2.5s

-moz-animation:horse-ride 0.5s

steps(12,end) infinite

-moz-animation-delay:2.5s

background-position:

-2412px 0

-webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675,

0.190)

-moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190)

}

这里首先介绍:checked和~，:checked是伪类，指当#play_button选中时的css效果，~指的是#play_button的兄弟节点。

接下来介绍.horse相关的css属性。animation中我们使用了4个值，依次代表：关键帧（我们上面定义的horse-ride），动画间隔时间，动画效果和执行次数。之后我们又通过animation-delay设置动画延迟时间。通过transition和background-position集合起来，设置背景的过渡动画。

最后我们为【开始】按钮添加动画效果。

复制代码

代码如下:

#play_button:checked ~#play_image img{

left:-68px

-webkit-transition: all 0.5s ease-in

-moz-transition:

all 0.5s ease-in

}

大家可以自己动手尝试开发了。

demo下载地址：google-doodle-animation-in-css3-without-javascript.zip今天我们将介绍，如何使用css3完成google涂鸦动画。当你点击demo页面的【开始】按钮之后，页面中的骑手和马匹将会运动起来，http://www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html。

这里需要强调的一点是，ie不支持css3的动画属性，再次抱怨下万恶的ie。但是我们不能以此为理由不去拥抱css3。

我们先来看html代码。

复制代码

代码如下:

<!DOCTYPE html>

<html>

<head>

type="text/css"

href="css/google-doodle-animation-in-css3-without-javascript.css"/>

</head>

<body>

<div

class="frame">

</div>

<label for="play_button"

id="play_label"></label>

<input type="checkbox" id="play_button"

name="play_button"/>

<img

src="img/muybridge12-hp-p.jpg"/>

</span>

<div

class="horse"></div>

</div>

</body>

</html>

下面是部分css。

复制代码

代码如下:

*{margin:0pxpadding:0px}

#logo{position: relative}

.horse{

width:469px

height:54px

background: url('../img/muybridge12-hp-f.jpg')

}

.frame{position:absoluteleft:0top:0z-index: 1}

#play_button{display:

none}

#play_label{

width:67px

height:54px

display:block

position: absolute

left:201px

top:54px

z-index: 2

}

#play_image{

position: absolute

left:201px

top:54px

z-index: 0

overflow: hidden

width: 68px

height: 55px

}

#play_image img{

position: absolute

left: 0

top: 0

}

下面是上述html和css代码完成的页面效果。

pic

下面我们来介绍如何产生动画效果。我们首先需要定义关键帧，他规定动画在不同阶段的效果。大家可以通过http://www.w3schools.com/css3/css3_animations.asp

了解更多信息。

复制代码

代码如下:

@-webkit-keyframes horse-ride {

{background-position: 0 0}

% {background-position: -804px 0}

}

@-moz-keyframes horse-ride {

% {background-position: 0 0}

{background-position: -804px 0}

}

下面，我们来为horse添加css3的动画效果。

复制代码

代码如下:

#play_button:checked ~.horse{

-webkit-animation:horse-ride 0.5s steps(12,end) infinite

-webkit-animation-delay:2.5s

-moz-animation:horse-ride 0.5s

steps(12,end) infinite

-moz-animation-delay:2.5s

background-position:

-2412px 0

-webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675,

0.190)

-moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190)

}

这里首先介绍:checked和~，:checked是伪类，指当#play_button选中时的css效果，~指的是#play_button的兄弟节点。

最后我们为【开始】按钮添加动画效果。

复制代码

代码如下:

#play_button:checked ~#play_image img{

left:-68px

-webkit-transition: all 0.5s ease-in

-moz-transition:

all 0.5s ease-in

}

大家可以自己动手尝试开发了。

CSS并不难

只要用心留意一点就可以了还有Yahoo HK Blog暂无CSS能支援游标图案. 最后建议你改用以下固定背景语法 body.blog_my

body.blog_my_index

bodyment_listing

body.trackback_listing

body.blog_archives_folder

body.blog_archives_date

body.blog_archives_all

body.post_rte

body.post_doodle

body.guestbook

bodyment_list

body.subscribe_list

body.post_gb

body.profile_view

body.gallery

body.photo_big

body.slideshow

body.photo_upload_pc

body.photo_upload_gallery {background-attachment:fixed} (那之前你一直用的body.blog_my{background:#FFFFFF url(us.f6.yahoofs/blog/VSFvz3GeERqWK6wo3xzZyN6MqUVwLUbahA--_1/blog/20090515060608716?ib_____DjD.P4yLk) fixed}可以删除了) 我提供的这个语法比你原先的语法好得多

你的语法只有主页能固定背景

相簿、留言版、个人档案、Blog友、订阅、回应箱

甚么页都没有固定背景! 而我提供的语法既能做到整个Blog固定背景

而且转背景时也不用再在语法中修改!

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：如何设计一个html页面的导航栏在手机端自适应

# 下一篇：js中布尔值为false的六种情况