CSS3特效设计

1.CSS控制首页图片轮播特效，需要用到@keyframes和animation标签，前者给动画命名，后者创建动画样式

div { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox / -webkit-animation:myfirst 5s; / Safari and Chrome / -o-animation:myfirst 5s; / Opera */ }

@keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }

@-moz-keyframes myfirst /* Firefox */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }

2.

@-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }

@-o-keyframes myfirst /* Opera */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }

2.实现div在鼠标悬浮时的动画缩放效果，务必规定动画时间，因为时间默认为0，为0时没有动画效果

div { width:100px; height:200px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 / -webkit-transition:width 2s; / Safari and Chrome / -o-transition:width 2s; / Opera */ }

div:hover { width:300px; }

3.登录按钮实现圆角，圆角的大小由radius来控制，数值越大，圆角越明显

border-radius:10px; -moz-border-radius:25px; /* 老的 Firefox */

原文地址：https://blog.csdn.net/zbl100911063/article/details/20008651?ops_request_misc=&request_id=&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-17-20008651-null-null.142^v87^koosearch_v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88