css旋转动画代码
transition使用
为鼠标指针的滑过状态设置一些动画效果。图标在1秒内匀速旋转360度。
.close:hover::before{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transition:-webkit-transform 1s linear;
transition:transform 1s linear;
}
css3圆环旋转效果动画怎么做
1、首先新建一个html空白文档，取名字叫做css3动画，保存一下。
2、然后写html结构，只需要一个div元素即可，class名字叫做img
3、设置其边框为不同的颜色，边框宽度设置成100px。
4、因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。
5、接下来就是关键的步骤了，也就是添加动画效果。输入以下代码
6、来看一下最后的效果，还是不错的。
css3怎么制作打开的大门动画代码
方法/步骤
首先，先在《body》《/body》中加入门
然后写好大门的css，如下：[由于本人设计不好，所以这里的门都是用颜色块代替的，大家在用的时候可以换成各种门的背景]
div{
margin:0;
padding:0;
}
.door{
width:450px;
height:450px;
position:relative;
background:#a1a1a1;
}
.door .leftDoor,.door .rightDoor{
position:absolute;
width:224px;
height:400px;
top:57px;
top:50px;
background:#d1d1d1;
}
.door .leftDoor{
left:0;
border-right:1px solid #999;
box-shadow:inset -2px -2px 10px rgba(0, 0, 0, 0.1);
-webkit-animation:leftDoor 5s 1;
-moz-animation:leftDoor 5s 1;
-o-animation:leftDoor 5s 1;
animation:leftDoor 5s 1;
-webkit-transform-origin: 0% 40%;
-moz-transform-origin: 0% 40%;
-o-transform-origin: 0% 40%;
transform-origin: 0% 40%;
}
.door .rightDoor{
right:0;
border-left:1px solid #999;
box-shadow:inset 2px -2px 10px rgba(0, 0, 0, 0.1);
-webkit-animation:rightDoor 5s 1;
-moz-animation:rightDoor 5s 1;
-o-animation:rightDoor 5s 1;
animation:rightDoor 5s 1;
-webkit-transform-origin: 100% 40%;
-moz-transform-origin: 100% 40%;
-o-transform-origin: 100% 40%;
transform-origin: 100% 40%;
}
先为左边的门添加动画
@-webkit-keyframes leftDoor {
0%,100% {
-webkit-transform-origin: 0% 40%;
}
0{
-webkit-transform:perspective(0) rotateY(0);
}
100% {
-webkit-transform:perspective(600px) rotateY(70deg);
}
}
@-moz-keyframes leftDoor {
0%,100% {
-moz-transform-origin: 0% 40%;
}
0{
-moz-transform:perspective(0) rotateY(0);
}
100% {
-moz-transform:perspective(600px) rotateY(70deg);
}
}
@-o-keyframes leftDoor {
0%,100% {
-o-transform-origin: 0% 40%;
}
0{
-o-transform:perspective(0) rotateY(0);
}
100% {
-o-transform:perspective(600px) rotateY(70deg);
}
}
@keyframes leftDoor {
0%,100% {
transform-origin: 0% 40%;
}
0{
transform:perspective(0) rotateY(0);
}
100% {
transform:perspective(600px) rotateY(70deg);
}
}
然后为右边的门添加css3动画，由于左右门对称，只要变化相应的地方就行了
@-webkit-keyframes rightDoor {
0%,100% {
-webkit-transform-origin: 100% 40%;
}
0{
-webkit-transform:perspective(0) rotateY(0);
}
100% {
-webkit-transform:perspective(600px) rotateY(-70deg);
}
}
@-moz-keyframes rightDoor {
0%,100% {
-moz-transform-origin: 100% 40%;
}
0{
-moz-transform:perspective(0) rotateY(0);
}
100% {
-moz-transform:perspective(600px) rotateY(-70deg);
}
}
@-o-keyframes rightDoor {
0%,100% {
-o-transform-origin: 100% 40%;
}
0{
-o-transform:perspective(0) rotateY(0);
}
100% {
-o-transform:perspective(600px) rotateY(-70deg);
}
}
@keyframes rightDoor {
0%,100% {
transform-origin: 100% 40%;
}
0{
transform:perspective(0) rotateY(0);
}
100% {
transform:perspective(600px) rotateY(-70deg);
}
}
5
这里的动画主要用到的是rotate和perspective
6
如果想要动画点击后才开门，可以加入一个按钮，然后js控制
如何通过css样式来实现网站logo发光动画效果
添加修改CSS代码如下 ：
.logo-site,.logo-sites{position:relative;float:left;margin:18px 0 0 10px;width:220px;max-height:50px;overflow:hidden;transition-duration:.5s}
.logo-site img,.logo-sites img{width:220px;max-height:50px}@media screen and (max-width:480px){
.logo-site,.logo-sites{width:140px}}@media screen and (min-width:900px){
.logo-site:before{content:““;position:absolute;left:-665px;top:-460px;width:220px;height:15px;background-color:rgba(255,255,255,.5);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:searchLights 1s ease-in 1s infinite;-o-animation:searchLights 1s ease-in 1s infinite;animation:searchLights 1s ease-in 1s infinite}}@-webkit-keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}@-o-keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}@-moz-keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}@keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}
.site-title{font-size:24px;font-size:2.4rem;font-weight:700;padding:0 0 2px 0}
.site-name{display:none}@media screen and (min-width:900px){
.logo-site img,.logo-sites img{transition-duration:.8s}
操作流程
把css代码当中的logo-site改成你网站包围logo的css即可(f12键审核元素，即可找到你的logo的css元素)。找到你logo的css名称然后把上面的css代码修改成你的css名称，放入css代码当中即可(防止出错，记得备份!)
以上就是logo添加css扫光效果的方法，当然你也可以运用到其他的地方。
注意，有些模板CSS代码不相同，不能贸然的使用，可能会出现错误，新手不要尝试。
源自CODEPEN的25个最受欢迎的HTML/CSS代码
Codepen是一个非常了不起的网站，也是全球web前端开发人员的圣地!
我搜索了一些时下最好最流行的codepen(仅限于HTML和CSS)。如果你能把它们融入到设计中去，那么就会大大节省很多时间。
在下面的例子中你会看到各式各样的片段，HTML
陈列，登录方式，垂直菜单，甚至时下最流行的主题：扁平化设计(扁平化图像，扁平化按钮形状，扁平化用户界面要素等)。好好欣赏这些精选的代码片段吧，如果现在没时间看完所有的代码例子，那就保存下来以备不时之需吧。
CSS3
Working
Clock
这是一个纯css3时钟。它使用css动画还有图形，没有使用任何图片或者是js
CSS3
Pricing
Table
CSS
Loader
Pure
CSS3
MacBook
Air
with
Thunderbird
Display
and
Keyboard
Twitter
Button
Concept
CSS3
Loading
Animation
Pure
CSS3
Vertical
Menu
with
Hover
Effect
CSS3
Stamp
effect
using
radial
gradients
I
Love
Blur
Social
Navigation
Login
Calendar
Social
Footer
Parallax
Landscape
CSS3
Thermometer
CSS-Only
Responsive
Layout
with
Smooth
Transitions
Flat
CSS3
Weather
Widget
Flat
Responsive
Sliding
Boxes
Tiny
CSS3
Round
Breadcrumb
CSS3
Hover
Effect
using
:after
Psuedo
Element
Flat
UI
Elements
CSS
Flat
Button
Shapes
Email
UI
Flat
Icons
CSS
谁能给一个类似于CSS过渡功能的动画的示例
CSS3中的过渡效果——点击图层，颜色渐渐消失
Internet Explorer 10 和使用 JavaScript 的 Modern UI 风格的应用支持 CSS3 过渡特效。通过过渡特效，可以实现简单的动画效果，在一小段时间内平滑地改变CSS 的属性值。例如，在10秒钟内改变一个对象的大小和颜色。以前需要通过 CSS 和 JavaScript 的复杂组合操作实现的效果，现在只需几行 CSS 代码即可完成。
1. 《!DOCTYPEhtml》
2. 《htmllang=“en-us“》
3. 《head》
4. 《styletype=“text/css“》
5. body {
6. padding:10px;
7. font:bold27px “Segoe UI“;
8. }
9. div {
10.width:250px;
11.background-color:lime;
12.padding:10px;
13.opacity:1;
14.-ms-transition:opacity5s linear 1s;
15.}
16.div:active {
17.opacity:0;
18.}
19.《/style》
20.《/head》
21.《body》
22.《div》
23.Duis ac leosit ametlectustristiquepulvinarnecrutrum dolor.
24.Etiamsedipsumenim,vitae euismododio.Suspendisseeu.
25.《/div》
26.《/body》
27.《/html》
复制代码
在这个示例中，属性-ms-transform 被设置为“opacity 5s linear 1s”。借助于：active伪类，当单击（或触摸）并按住柠檬绿色的div，它将慢慢消失。特别地，它的opacity 属性在1 秒之后，会产生平滑的过渡效果（使用一个线性计时函数），在5 秒之内从完全不透明变为完全透明。请参见这个页面（
1. -ms-transform属性是一个简写属性，这个声明也可以使用以下属性来替代：
2. -ms-transition-property:opacity;
3. -ms-transition-duration:5s;
4. -ms-transition-timing-function:linear;
5. -ms-transition-delay:1s;
了解更多，百度[xyytIT]进我博客查看