css3旋转 | 易学教程

CSS3 animation属性实现转动效果

阅读更多关于 CSS3 animation属性实现转动效果

<!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"> <meta charset="utf-8"> <title>旋转效果</title> <style> div { width:100%; margin:50px auto; text-align: center; } img { width: 200px; height: 200px; border-radius: 100px; animation: run 5s linear infinite; -webkit-animation: run 5s linear infinite; animation-play-state: running; -webkit-animation-play-state: running; } img:hover { animation-play-state: paused; -webkit-animation-play-state: paused; } @keyframes run

CSS3基础

阅读更多关于 CSS3基础

内容： 1.圆角 border-radius 2.阴影 text-shadow、box-shadow 3.渐变 linear、radial 4.rgba rgb+alpha opacity 5.transform 6.动画 transition、animation 1.圆角 border-radius 通过设置元素的border-radius值，可以轻松给元素设置圆角边框，甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形： (1)只设置一个值只设置一个值得情况常用来给button加圆角边框，或者画一个圆形按钮，仅需设置一个数值，即可给元素的四个边角设置统一的圆角弧度 1 .box {width:300px; height:300px; background:#CCC; margin:10px auto 0; border-radius:10px;} 效果： (2)四个方向的值分别设置 border-radius属性其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式，因此，border-radius : 30px;，其实等价于border-radius : 30px 30px 30px 30px;

图片触及翻转效果 css3

阅读更多关于图片触及翻转效果 css3

实现图片由左向右飞入回到最初设定位置，鼠标浮上去旋转显示另一张图片效果； html: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html"; charset="utf-8" /> <title>图片翻转CSS3</title> </head> <body> <div class="page"> <ul id="box"> <li> <div class="div1"> <img src="Images/m.png" alt=""/></div> </li> <li> <span></span><div class="div2"> <img src="Images/w.png" alt=""/></div> </li> <li> <span></span><div class="div3"> <img src="Images/k.png" alt=""/></div> </li> <li> <span></span><div class="div4"> <img src="Images/t.png" alt=""/></div> </li> </ul> </div> </body> </html> 2. css部分： @-webkit-keyframes

css3 3d 与案例分析

阅读更多关于 css3 3d 与案例分析

作者：魔洁聊到3d那我们就先聊聊空间维度，首先一维，比如一条线就是一个一维空间，连点成线在这个空间里这些点只能前进后退，二维空间就是一个平面，这时点不仅可以前进后退还可以左右移动，3维空间也可以说是3d，这时点可以前进后退，左右，上下移动。css3里有几个关于3d运动的属性以及值我做一下解释 transform-style:preserve-3d;（transform-style是属性）（preserve-3d是值）（这个属性可以把一个处于2维的div变为3d空间，把这个属性比作一个相机的摄像头,这个div内的内容会以3d的形式通过摄像头的形式反馈给你,他的子元素才会享受3d效果,子元素以下的元素就不会有3d效果。） perspective:800px; （这个属性是配合上边的属性使用的，把这个属性比作你的屏幕距离摄像头的距离） transform:rotateY(180deg); (把这个3d空间div看做一个人rotateY(180deg)，是做y轴旋转180°，y轴可以看作是一个人原地转身) transform:rotatex(180deg); （rotateY(180deg)，是做x轴旋转180°，x轴可以看作是一个人原地翻跟斗） transform:rotateZ(180px); （rotateZ(180px)，是在前进180px

CSS3学习笔记

阅读更多关于 CSS3学习笔记

1.text-shadow 文字阴影 2.background-size：背景图大小经常用于ios手机端的sprite图，先等比缩小一倍，再取值 3.display:flex 拉伸布局给父元素子元素用flex：1 3.min-with：最小宽度不能小于多少 4.max-with：最大宽度不能大于多少 5.animation 动画必须用@keyframes声明后调用 6.background：linear-gradient（位置，颜色，渐变后颜色）线性渐变 7.transition:过度 8.transform：变形和相对定位相识 translate（）移动 rotate（deg）旋转 scale（）缩放 9.transform-origin: 旋转中心点 10.box-sizing：border-box 内减模式来源： https://www.cnblogs.com/zjfman/p/11512105.html

css3制作旋转的太极图

阅读更多关于 css3制作旋转的太极图

<div class="div"></div> <style> body { background-color: #aaa; } .div { width: 400px; height: 400px; border-radius: 50%; border: 1px solid #ddd; background-image: radial-gradient(50% 50% at 50% 25%, #000 10%, transparent 0), radial-gradient(50% 50% at 50% 75%, #fff 10%, transparent 0), radial-gradient(50% 50% at 50% 25%, #fff 50%, transparent 0), radial-gradient(50% 50% at 50% 75%, #000 50%, transparent 0), linear-gradient(to left, #fff 50%, #000 50%); animation: rotate 3s linear infinite; } @keyframes rotate { from { transform: rotate(0deg) } to { transform: rotate(360deg)} } </style> 来源：

css3实现椭圆轨迹旋转

阅读更多关于 css3实现椭圆轨迹旋转

css3实现椭圆轨迹旋转实现效果 X轴Y轴在一个矩形内移动做斜线运动 1 .ball { 2 position: absolute; 3 animation: 4 animX 2s linear infinite alternate, 5 animY 2s linear infinite alternate 6 } 7 @keyframes animX{ 8 0% {left: 0px;} 9 100% {left: 500px;} 10 } 11 @keyframes animY{ 12 0% {top: 0px;} 13 100% {top: 300px;} 14 } 设置动画延时设置Y轴延时为动画时长的一半, 运动轨迹变成菱形 1 .ball { 2 animation: 3 animX 2s linear 0s infinite alternate, 4 animY 2s linear -1s infinite alternate 5 } 设置三次贝塞尔曲线 1 .ball { 2 animation: 3 animX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, 4 animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate 5 }

前端开发（四）HTML5和CSS3

阅读更多关于前端开发（四）HTML5和CSS3

一、圆角、rgba 设置某一个角的圆角，比如设置左上角的圆角： border-top-left-radius:30px 60px; border-top-left-radius: 60px; 同时分别设置四个角： border-radius:30px 60px 120px 150px; 设置四个圆角相同： border-radius:50%; ①盒子透明度表示法： .box { opacity:0.1; /* 兼容IE */ filter:alpha(opacity=10); } ②rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>透明度</title> <style type="text/css"> body{ background: url(images/banner01.jpg); } .box{ width: 300px; height: 100px; background-color: #000; color: #fff; text-align: center; line-height: 100px; font-size: 30px; /*设置透明度*/ opacity: 0.3; /*兼容IE*/

个人总结（css3新特性）

阅读更多关于个人总结（css3新特性）

1.前言css3这个相信大家不陌生了，是个非常有趣，神奇的东西！有了css3，js都可以少写很多！我之前也写过关于css3的文章，也封装过css3的一些小动画。个人觉得css3不难，但是很难用得好，用得顺手，最近我也在过一遍css3的一些新特性（不是全部，是我在工作上常用的，或者觉得有用的），以及一些实例，就写了这一篇总结！希望，这篇文章能帮到大家认识css3。写这篇文章主要是让大家能了解css3的一些新特性，以及基础的用法，感觉css3的魅力！如果想要用好css3，这个得靠大家继续努力学习，寻找一些讲得更深入的文章或者书籍了！如果大家有什么其他特性推荐的，欢迎补充！大家一起学习，进步！看这篇文章，代码可以不用看得过于仔细！这里主要是想让大家了解css3的新特性！代码也是很基础的用法。我给出代码主要是让大家在浏览器运行一下，让大家参考和调试。不要只看代码，只看代码的话，不会知道哪个代码有什么作用的，建议边看效果边看代码。2.过渡过渡，是我在项目里面用得最多的一个特性了！也相信是很多人用得最多的一个例子！我平常使用就是想让一些交互效果（主要是hover动画），变得生动一些，不会显得那么生硬！好了，下面进入正文！引用菜鸟教程的说法：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。2

CSS3 实现太极图案

阅读更多关于 CSS3 实现太极图案

CSS3实现太极图案分析图片组成（如下图所示）：先给出html代码： <div class="box"> <div class="content"> <div class="left"></div> <div class="right"></div> <div class="inner-circle up"> <div class="sm-circle circle-white"></div> </div> <div class="inner-circle down"> <div class="sm-circle circle-black"></div> </div> </div> </div> View Code 步骤一：先把紫色框出来的两个div修改其样式，使其分别成两个半圆，一黑一白。 .left{ position: absolute; width: 50%; top: 0; left:0; height: 100%; background-color: #000000; border-radius: 100% 0 0 100% / 50% 0 0 50%; } .right{ position: absolute; width: 50%; top: 0; right: 0;; height: 100%; background-color: #FFFFFF;

订阅 css3旋转